/* ============================================================================
   granos.uy — BASE: variables, reset y componentes compartidos
   (botones, formularios, tarjetas, tablas, chips, modales, avisos)
   ========================================================================== */

:root {
    /* Paleta institucional */
    --verde-900: #0c2115;
    --verde-800: #123726;
    --verde-700: #1a5c38;
    --verde-600: #1e7a46;
    --verde-500: #10b981;
    --verde-100: #d9f3e5;

    --ambar-500: #f59e0b;
    --ambar-100: #fdeed3;

    --tinta-900: #101d16;
    --tinta-700: #2c3a32;
    --gris-600: #5b6b62;
    --gris-400: #94a39a;
    --gris-200: #dde5df;
    --gris-100: #eef2ef;
    --crema: #f7faf7;
    --blanco: #ffffff;

    --rojo-500: #e11d48;
    --rojo-100: #fde3e9;
    --azul-500: #2563eb;

    --sombra-1: 0 1px 3px rgba(16, 29, 22, .08), 0 1px 2px rgba(16, 29, 22, .04);
    --sombra-2: 0 10px 30px rgba(16, 29, 22, .12);
    --radio: 12px;
    --radio-chico: 8px;

    --fuente: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------- Reset ---------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fuente);
    color: var(--tinta-900);
    background: var(--crema);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: inline-block; }

a { color: var(--verde-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.015em; }

code { background: var(--gris-100); padding: 2px 6px; border-radius: 6px; font-size: .85em; }

.contenedor { width: min(1180px, 92%); margin: 0 auto; }

.anti-extraccion { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.anti-extraccion input, .anti-extraccion textarea { -webkit-user-select: text; -moz-user-select: text; user-select: text; }

.texto-suave { color: var(--gris-600); font-size: .92rem; }
.alinear-derecha { text-align: right; }

/* Barra de desplazamiento sutil */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gris-100); }
::-webkit-scrollbar-thumb { background: var(--gris-400); border-radius: 8px; }

/* ------------------------------- Botones -------------------------------- */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    font: 600 .95rem/1 var(--fuente);
    padding: 12px 22px;
    border-radius: 10px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
    text-decoration: none !important;
    white-space: nowrap;
}
.boton:active { transform: translateY(1px); }

.boton--primario { background: var(--verde-600); color: var(--blanco); box-shadow: 0 6px 18px rgba(30, 122, 70, .35); }
.boton--primario:hover { background: var(--verde-700); }

.boton--secundario { background: var(--blanco); color: var(--verde-700); border-color: var(--verde-600); }
.boton--secundario:hover { background: var(--verde-100); }

.boton--oscuro { background: var(--tinta-900); color: var(--blanco); }
.boton--oscuro:hover { background: var(--tinta-700); }

.boton--fantasma { background: transparent; color: var(--tinta-900); border-color: var(--gris-200); }
.boton--fantasma:hover { border-color: var(--verde-600); color: var(--verde-700); }

.boton--peligro-fantasma { background: transparent; color: var(--rojo-500); border-color: transparent; }
.boton--peligro-fantasma:hover { background: var(--rojo-100); }

.boton--grande { font-size: 1.05rem; padding: 16px 30px; border-radius: 12px; }
.boton--chico { font-size: .82rem; padding: 8px 14px; border-radius: 8px; }
.boton--bloque { width: 100%; }

.boton[disabled] { opacity: .55; cursor: wait; }

/* ----------------------------- Formularios ------------------------------ */

label { display: block; font-size: .85rem; font-weight: 600; color: var(--tinta-700); }
label small { font-weight: 400; color: var(--gris-600); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
    width: 100%;
    margin-top: 6px;
    padding: 11px 13px;
    font: 500 .95rem var(--fuente);
    color: var(--tinta-900);
    background: var(--blanco);
    border: 1.5px solid var(--gris-200);
    border-radius: 10px;
    outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--verde-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}
input[type="color"] { padding: 4px; height: 46px; cursor: pointer; }

.etiqueta-casilla { display: flex; align-items: center; gap: 8px; font-size: .92rem; padding-top: 22px; }
.etiqueta-casilla input { width: auto; margin: 0; accent-color: var(--verde-600); transform: scale(1.2); }

/* -------------------------------- Chips --------------------------------- */

.chip {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.chip--pro       { background: var(--ambar-500); color: #3d2800; }
.chip--publico   { background: var(--gris-100); color: var(--gris-600); }
.chip--publicado { background: var(--verde-100); color: var(--verde-700); }
.chip--pendiente { background: var(--ambar-100); color: #8a5a00; }
.chip--cme       { background: #dbe8ff; color: #1d4fd7; }

/* ------------------------------- Modales -------------------------------- */

.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(12, 33, 21, .55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    padding: 20px;
}
.modal-fondo[hidden] { display: none; }

.modal {
    position: relative;
    width: min(430px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--blanco);
    border-radius: 18px;
    padding: 34px 30px 28px;
    box-shadow: var(--sombra-2);
    animation: modal-entrada .18s ease;
}
.modal--ancho { width: min(560px, 100%); }

@keyframes modal-entrada {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.modal__cerrar {
    position: absolute;
    top: 14px; right: 16px;
    font-size: 1.5rem;
    line-height: 1;
    border: none;
    background: none;
    color: var(--gris-400);
    cursor: pointer;
}
.modal__cerrar:hover { color: var(--tinta-900); }

.modal__marca { text-align: center; margin-bottom: 12px; }
.modal__marca img { height: 40px; }

.modal h3 { margin-bottom: 14px; font-size: 1.2rem; }

.modal__pestanas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--gris-100);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 18px;
}
.modal__pestana {
    border: none;
    background: transparent;
    font: 700 .92rem var(--fuente);
    padding: 10px;
    border-radius: 8px;
    color: var(--gris-600);
    cursor: pointer;
}
.modal__pestana.activa { background: var(--blanco); color: var(--verde-700); box-shadow: var(--sombra-1); }

.modal__formulario label { margin-bottom: 13px; }
.modal__doble { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.modal__error {
    background: var(--rojo-100);
    color: var(--rojo-500);
    font-size: .88rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
}
.modal__aviso {
    background: var(--ambar-100);
    color: #8a5a00;
    font-size: .88rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    text-align: center;
}
.modal__aviso--ok { background: var(--verde-100); color: var(--verde-700); }
.modal__nota { font-size: .8rem; color: var(--gris-600); text-align: center; margin-top: 10px; }

/* --------------------------- Aviso flotante ----------------------------- */

.aviso-flotante {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    background: var(--tinta-900);
    color: var(--blanco);
    font-weight: 600;
    font-size: .92rem;
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: var(--sombra-2);
    max-width: 380px;
    animation: modal-entrada .2s ease;
}
.aviso-flotante--error { background: var(--rojo-500); }

/* -------------------------------- Tablas -------------------------------- */

.tabla-envoltura { overflow-x: auto; margin-top: 14px; }

.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gris-600);
    padding: 10px 12px;
    border-bottom: 2px solid var(--gris-200);
    white-space: nowrap;
}
.tabla th.alinear-derecha { text-align: right; }
.tabla td { padding: 11px 12px; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--crema); }

.muestra-color {
    display: inline-block;
    width: 26px; height: 26px;
    border-radius: 8px;
    border: 2px solid var(--blanco);
    box-shadow: var(--sombra-1);
    vertical-align: middle;
}