/* Comercializadora Díaz Pérez 90 · tokens del sistema de diseño (un solo producto: tienda y panel).
   La tienda y el panel leen los mismos roles (--fondo, --superficie, --tinta, --accion, radios, letra),
   que salen de la paleta del panel. Claro y oscuro se cambian aquí y alcanzan a los dos. */

@font-face { font-family: "Public Sans"; src: url("fuentes/PublicSans-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  /* Paleta de marca + ajustes medidos */
  --oro: #FEC804;          /* amarillo del rótulo del logo: solo sobre fondos oscuros como texto */
  --oro-claro: #FFD84A;    /* hover del oro; texto sobre verde bosque */
  --oro-oscuro: #7A5A12;   /* "dorado" para texto sobre crema/blanco (5,6:1) */
  --carbon: #191812;       /* negro carbón: bandas oscuras, texto principal */
  --carbon-2: #26241C;     /* superficie sobre carbon (tarjetas en banda oscura) */
  --carbon-3: #34312A;     /* borde/separador en oscuro */
  --crema: #F5F0E5;        /* fondo de la tienda */
  --crema-2: #EBE3D1;      /* superficie hundida en claro (filtros, chips) */
  --blanco: #FFFFFF;       /* tarjetas y campos */
  --bosque: #344C36;       /* elementos agropecuarios: especie, disponible */
  --bosque-claro: #DDE5D8; /* fondo de etiqueta verde */
  --gris: #777777;         /* solo decorativo: NO pasa AA como texto */
  --gris-texto: #5F5B52;   /* texto secundario (6,8:1 en blanco) */
  --gris-claro: #B9B3A6;   /* texto secundario en oscuro (8,5:1 en carbon) */
  --linea: var(--panel-borde); /* borde de campos y tablas (rol compartido) */
  --alerta: #9A2B1E;       /* advertencias y error (7,4:1 en blanco) */
  --alerta-fondo: #F6E3DC;

  /* Tokens del panel de administración (estética Recurra: fondo gris-salvia muy claro, tarjetas blancas, acento: el negro del logo desde la v3) */
  --panel-fondo: #EFF4F5;
  --panel-superficie: #FFFFFF;
  --panel-superficie-2: #F4F7F8;
  --panel-superficie-3: #E7EEF0;
  --panel-borde: #E3EBEE;
  --panel-borde-fuerte: #CBD6DA;
  --panel-tinta: #0F2930;
  --panel-tinta-2: #5A7077;
  --panel-accion: #14110D;   /* negro del contorno del logo */
  --panel-accion-hover: #2C2720;
  --panel-accion-tinta: #FFFFFF;
  --panel-foco: #14110D;
  --panel-azul-valor: #2B70C9;

  /* Estados en píldora tipo contorno suave (verde, azul, naranja, rojo) con contraste AA */
  --pildora-verde-bg: #EBF9F1;
  --pildora-verde-fg: #187944;
  --pildora-verde-borde: #7AD9A4;
  --pildora-azul-bg: #EDF5FF;
  --pildora-azul-fg: #2563EB;
  --pildora-azul-borde: #93C5FD;
  --pildora-naranja-bg: #FFF7EB;
  --pildora-naranja-fg: #B45309;
  --pildora-naranja-borde: #FCD34D;
  --pildora-rojo-bg: #FFF1F1;
  --pildora-rojo-fg: #C53030;
  --pildora-rojo-borde: #FCA5A5;

  /* Campo de marca: el negro del contorno del logo (total de la caja, bandas oscuras).
     No cambia con el tema. Medido: blanco 19:1; oro (amarillo) 12,6:1; --campo-tinta-2 10,9:1. */
  --campo: #14110D;
  --campo-2: #2C2720;
  --campo-tinta: #FFFFFF;
  --campo-tinta-2: #C9C2B3;

  /* Roles compartidos (tienda y panel) */
  --fondo: var(--panel-fondo);
  --superficie: var(--panel-superficie);
  --superficie-2: var(--panel-superficie-2);
  --superficie-3: var(--panel-superficie-3);
  --borde: var(--panel-borde);
  --borde-fuerte: var(--panel-borde-fuerte);
  --tinta: var(--panel-tinta);
  --tinta-2: var(--panel-tinta-2);
  --accion: var(--panel-accion);
  --accion-hover: var(--panel-accion-hover);
  --accion-tinta: var(--panel-accion-tinta);
  --foco: var(--panel-foco);

  /* Tipografía: una sola familia, la del panel */
  --f-titulo: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Escala (5 pasos visibles). Fluida entre 390 y 1440 px. */
  --t-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); /* 40 → 76 px */
  --t-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.75rem);     /* 28 → 44 px */
  --t-h3: 1.375rem;   /* 22 px */
  --t-cuerpo: 1.0625rem; /* 17 px */
  --t-pequeno: 0.875rem; /* 14 px: solo metadatos */
  --interlinea: 1.55;
  --interlinea-titulo: 1.02;
  --tracking-titulo: -0.02em;

  /* Espaciado 4/8 */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --margen: clamp(16px, 4vw, 48px);  /* margen exterior único */
  --ancho: 1344px;

  /* Radios */
  --r-control: 12px;
  --r-tarjeta: 22px;
  --r-0: 0; --r-1: var(--r-control); --r-2: var(--r-tarjeta); --r-pill: 999px;

  /* Sombras */
  --sombra-suave: 0 2px 6px rgba(15, 49, 58, .03), 0 8px 24px rgba(15, 49, 58, .04);
  --sombra-flota: 0 12px 32px rgba(15, 49, 58, .16), 0 2px 6px rgba(15, 49, 58, .08);

  /* Movimiento */
  --dur: 180ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* Modo oscuro automático (según el sistema), salvo que el usuario haya elegido claro explícitamente. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --panel-fondo: #0C1417;
    --panel-superficie: #131F24;
    --panel-superficie-2: #19282E;
    --panel-superficie-3: #203239;
    --panel-borde: #243840;
    --panel-borde-fuerte: #324C56;
    --panel-tinta: #F0F6F7;
    --panel-tinta-2: #94A9B0;
    --panel-accion: #FEC804;
    --panel-accion-hover: #FFD84A;
    --panel-accion-tinta: #14110D;
    --panel-foco: #FEC804;
    --panel-azul-valor: #60A5FA;

    --pildora-verde-bg: rgba(24, 121, 68, .2);
    --pildora-verde-fg: #86EFAC;
    --pildora-verde-borde: rgba(134, 239, 172, .45);
    --pildora-azul-bg: rgba(37, 99, 235, .22);
    --pildora-azul-fg: #93C5FD;
    --pildora-azul-borde: rgba(147, 197, 253, .45);
    --pildora-naranja-bg: rgba(217, 119, 6, .22);
    --pildora-naranja-fg: #FCD34D;
    --pildora-naranja-borde: rgba(252, 211, 77, .45);
    --pildora-rojo-bg: rgba(220, 38, 38, .22);
    --pildora-rojo-fg: #FCA5A5;
    --pildora-rojo-borde: rgba(252, 165, 165, .45);

    --sombra-suave: 0 2px 10px rgba(0, 0, 0, .35);
    --sombra-flota: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);

    --fondo: var(--panel-fondo);
    --superficie: var(--panel-superficie);
    --tinta: var(--panel-tinta);
    --tinta-2: var(--panel-tinta-2);
    --linea: var(--panel-borde);
    --accion: var(--panel-accion);
    --accion-tinta: var(--panel-accion-tinta);
    --foco: var(--panel-foco);
  }
}

:root[data-theme="dark"] {
  --panel-fondo: #0C1417;
  --panel-superficie: #131F24;
  --panel-superficie-2: #19282E;
  --panel-superficie-3: #203239;
  --panel-borde: #243840;
  --panel-borde-fuerte: #324C56;
  --panel-tinta: #F0F6F7;
  --panel-tinta-2: #94A9B0;
  --panel-accion: #FEC804;
  --panel-accion-hover: #FFD84A;
  --panel-accion-tinta: #14110D;
  --panel-foco: #FEC804;
  --panel-azul-valor: #60A5FA;

  --pildora-verde-bg: rgba(24, 121, 68, .2);
  --pildora-verde-fg: #86EFAC;
  --pildora-verde-borde: rgba(134, 239, 172, .45);
  --pildora-azul-bg: rgba(37, 99, 235, .22);
  --pildora-azul-fg: #93C5FD;
  --pildora-azul-borde: rgba(147, 197, 253, .45);
  --pildora-naranja-bg: rgba(217, 119, 6, .22);
  --pildora-naranja-fg: #FCD34D;
  --pildora-naranja-borde: rgba(252, 211, 77, .45);
  --pildora-rojo-bg: rgba(220, 38, 38, .22);
  --pildora-rojo-fg: #FCA5A5;
  --pildora-rojo-borde: rgba(252, 165, 165, .45);

  --fondo: var(--panel-fondo);
  --superficie: var(--panel-superficie);
  --tinta: var(--panel-tinta);
  --tinta-2: var(--panel-tinta-2);
  --linea: var(--panel-borde);
  --accion: var(--panel-accion);
  --accion-tinta: var(--panel-accion-tinta);
  --foco: var(--panel-foco);
  --sombra-suave: 0 2px 10px rgba(0, 0, 0, .35);
  --sombra-flota: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
}