/* ==================================================================
   OviNET · Sistema de diseño — variables (tokens)
   Única fuente de colores, tipografía, espacios, radios y sombras.
   app.css y las páginas deben usar estas variables, no valores sueltos.
   Contrastes: los colores "texto-*" cumplen WCAG AA (≥ 4,5:1) sobre
   --color-superficie y --color-fondo.
   ================================================================== */
:root {
    /* ── Marca ─────────────────────────────────────────────────── */
    --marca-marino-900: #141827;
    --marca-marino-800: #1e2235;
    --marca-marino-700: #262c42;
    --marca-azul-500:   #0ea5e9;   /* acento: fondos, iconos, bordes (no texto) */
    --marca-azul-600:   #0284c7;
    --marca-azul-700:   #0369a1;   /* acento como texto o enlace */
    --marca-oro-500:    #d4a843;
    --marca-oro-600:    #b8862a;
    --marca-campo-500:  #3f9b4f;   /* «Mi ganadería»: barra y selector del espacio de gestión */
    --marca-campo-600:  #2f7d3d;
    --marca-campo-300:  #86e09a;   /* indicador activo sobre el lateral verde */
    --marca-campo-700:  #1d5a33;
    --marca-campo-800:  #14432a;   /* lateral de «Mi ganadería» */
    --marca-campo-900:  #0d2e1c;
    --marca-pizarra-300: #8cc8f0;  /* «Mi trabajo» (personal de AGRAMA): indicador activo sobre el lateral */
    --marca-pizarra-500: #3b82c4;
    --marca-pizarra-600: #2b6aa6;  /* selector y barra del espacio */
    --marca-pizarra-700: #1d4670;
    --marca-pizarra-800: #15334f;  /* lateral de «Mi trabajo» */
    --marca-pizarra-900: #0d2236;

    /* ── Neutros ───────────────────────────────────────────────── */
    --gris-50:  #f8fafc;
    --gris-100: #f1f5f9;
    --gris-150: #f0f4f8;
    --gris-200: #e2e8f0;
    --gris-300: #cbd5e1;
    --gris-400: #94a3b8;   /* solo decorativo o desactivado: no llega a 4,5:1 */
    --gris-500: #64748b;
    --gris-600: #475569;
    --gris-700: #334155;
    --gris-900: #0f172a;

    /* ── Semánticos ────────────────────────────────────────────── */
    --color-fondo:          var(--gris-150);
    --color-superficie:     #ffffff;
    --color-superficie-2:   #f4f6f9;   /* cabeceras de tabla, zonas secundarias */
    --color-borde:          var(--gris-200);
    --color-borde-fuerte:   var(--gris-300);
    --color-texto:          var(--gris-900);
    --color-texto-2:        var(--gris-700);
    --color-texto-suave:    #5b6b80;   /* 5,4:1 sobre blanco, 4,9:1 sobre el fondo */
    --color-texto-desactivado: var(--gris-400);
    --color-acento:         var(--marca-azul-500);
    --color-acento-texto:   var(--marca-azul-700);
    --color-acento-suave:   rgba(14,165,233,.10);

    --color-exito:          #047857;
    --color-exito-fondo:    #ecfdf5;
    --color-aviso:          #b45309;
    --color-aviso-fondo:    #fffbeb;
    --color-peligro:        #b91c1c;
    --color-peligro-fondo:  #fef2f2;
    --color-info:           var(--marca-azul-700);
    --color-info-fondo:     #f0f9ff;

    /* Escala de calidad (percentiles: 1 = mejor). Texto AA sobre su fondo; -barra para marcas y barras. */
    --calidad-top:          #065f46;  --calidad-top-fondo:   #d1fae5;  --calidad-top-barra:   #059669;
    --calidad-bueno:        #166534;  --calidad-bueno-fondo: #ecfdf5;  --calidad-bueno-barra: #4ade80;
    --calidad-medio:        var(--gris-700); --calidad-medio-fondo: #f4f6f9; --calidad-medio-barra: #94a3b8;
    --calidad-bajo:         #92400e;  --calidad-bajo-fondo:  #fffbeb;  --calidad-bajo-barra:  #f59e0b;
    --calidad-malo:         #991b1b;  --calidad-malo-fondo:  #fef2f2;  --calidad-malo-barra:  #ef4444;

    /* ── Tipografía ────────────────────────────────────────────── */
    --fuente-ui:   'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fuente-mono: 'JetBrains Mono', ui-monospace, Consolas, 'Courier New', monospace;

    /* Escala única (7 tamaños). En móvil sube un punto (ver abajo). */
    --fs-2xs: 11px;   /* micro: insignias, sobretítulos en mayúsculas */
    --fs-xs:  12px;   /* etiquetas, cabeceras de tabla, notas */
    --fs-sm:  13px;   /* texto de datos y tablas (escritorio) */
    --fs-md:  15px;   /* texto normal, botones, campos */
    --fs-lg:  18px;   /* títulos de tarjeta y de página */
    --fs-xl:  24px;   /* cifras destacadas */
    --fs-2xl: 32px;   /* cifras grandes */

    --lh-ajustado: 1.25;
    --lh-normal:   1.5;

    --peso-normal:   400;
    --peso-medio:    500;
    --peso-fuerte:   600;
    --peso-titulo:   700;

    /* ── Espacios (múltiplos de 4) ─────────────────────────────── */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;
    --esp-12: 48px;

    /* ── Radios y sombras ──────────────────────────────────────── */
    --radio-xs:   5px;
    --radio-sm:   8px;
    --radio-md:   12px;
    --radio-lg:   16px;
    --radio-full: 999px;

    --sombra-xs: 0 1px 2px rgba(0,0,0,.04);
    --sombra-sm: 0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
    --sombra-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
    --sombra-lg: 0 8px 28px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.07);

    /* Objetivo táctil mínimo */
    --toque-min: 44px;
}

/* Móvil: letra un punto mayor (lectura en el campo) y 16 px en campos para que iOS no haga zoom */
@media (max-width: 700px) {
    :root {
        --fs-2xs: 12px;
        --fs-xs:  13px;
        --fs-sm:  14px;
        --fs-md:  16px;
    }
    input, select, textarea { font-size: 16px; }
}