/* ==========================================================================
   Autoventa — tokens de diseño (fase 1)
   Solo variables y @font-face. Los componentes están en app.css y solo
   usan estas variables: si hay que cambiar un color o un tamaño, se cambia
   aquí y en ningún otro sitio.

   Contraste (WCAG 2.x, calculado con la fórmula de luminancia relativa,
   script en la entrega de la fase 1). Objetivo: 7:1 (AAA) en todo texto.

     Texto #000000 sobre fondo #FFFFFF ............... 21,00:1
     Texto #000000 sobre superficie #EEF0EB .......... 18,30:1
     Verde #185C2C sobre #FFFFFF ...................... 8,06:1
     Verde #185C2C sobre superficie #EEF0EB ........... 7,02:1
     Ámbar #7F3D00 sobre #FFFFFF ...................... 8,17:1
     Ámbar #7F3D00 sobre superficie #EEF0EB ........... 7,12:1
     Rojo  #9B1C12 sobre #FFFFFF ...................... 8,18:1
     Rojo  #9B1C12 sobre superficie #EEF0EB ........... 7,12:1
     Blanco sobre verde / ámbar / rojo ........ 8,06 / 8,17 / 8,18:1
     Blanco sobre verde / ámbar / rojo pulsados 12,32 / 11,80 / 11,87:1
     Verde #185C2C sobre verde suave #EDF5EF .......... 7,26:1
     Ámbar #7F3D00 sobre ámbar suave #FDF2E6 .......... 7,40:1
     Rojo  #9B1C12 sobre rojo suave #FDF0EE ........... 7,35:1
     Negro sobre verde / ámbar / rojo suave .. 18,91 / 19,02 / 18,88:1
     Texto secundario #3B4136 sobre #FFFFFF .......... 10,52:1
     Texto secundario #3B4136 sobre #EEF0EB ........... 9,17:1
     Texto secundario sobre fondos suaves ....... 9,46 – 9,53:1
     Borde fino #5E6558 sobre #FFFFFF (no texto, ≥3:1)  6,04:1
     Borde fino #5E6558 sobre #EEF0EB (no texto, ≥3:1)  5,26:1
     Negro / texto secundario sobre franja #FAFBF8 . 20,2 / 10,1:1
   ========================================================================== */

/* --- Fuente local: Atkinson Hyperlegible (OFL, ver fonts/OFL.txt) -------- */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-ext-700-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Perfil repartidor (móvil): valores por defecto ---------------------- */

:root {
  /* Colores base (no tocar: ajustados a ≥7:1) */
  --color-fondo: #FFFFFF;
  --color-texto: #000000;
  --color-superficie: #EEF0EB;       /* tarjetas, bloques secundarios */

  /* Colores con significado. El color nunca va solo: siempre icono + texto */
  --color-principal: #185C2C;        /* acción principal, «cobrado», «entregado» */
  --color-aviso: #7F3D00;            /* «a deber», deuda, pendientes de enviar */
  --color-error: #9B1C12;            /* errores, devoluciones, anular */

  /* Variantes pulsadas (:active) — más oscuras, texto blanco ≥11:1 */
  --color-principal-pulsado: #0F3D1C;
  --color-aviso-pulsado: #5A2B00;
  --color-error-pulsado: #6E140D;

  /* Fondos suaves para avisos y marcas (su color de texto ≥7:1 encima) */
  --color-principal-suave: #EDF5EF;
  --color-aviso-suave: #FDF2E6;
  --color-error-suave: #FDF0EE;

  /* Texto sobre colores llenos */
  --color-sobre-color: #FFFFFF;

  /* Texto secundario (direcciones, ayudas): ≥9:1 en todos los fondos */
  --color-texto-secundario: #3B4136;

  /* Bordes */
  --color-borde: #5E6558;            /* borde fino de campos y tablas (≥5:1) */
  --color-borde-fuerte: #000000;     /* borde de botones secundarios */
  --color-separador: #D5D9CF;        /* líneas decorativas, nunca como única señal */
  --color-franja: #FAFBF8;           /* filas alternas de tabla (negro encima 20,2:1) */

  /* Foco: anillo negro grueso con halo blanco, visible sobre cualquier color */
  --color-foco: #000000;
  --color-foco-halo: #FFFFFF;
  --foco-grosor: 4px;
  --foco-separacion: 3px;

  /* Tipografía */
  --fuente: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --peso-normal: 400;
  --peso-negrita: 700;

  --texto-sm: 1.0625rem;   /* 17 px — mínimo absoluto en el móvil */
  --texto-base: 1.25rem;   /* 20 px — texto normal del repartidor */
  --texto-lg: 1.5rem;      /* 24 px — etiquetas de botón */
  --texto-xl: 1.75rem;     /* 28 px — nombres de cliente */
  --texto-2xl: 2rem;       /* 32 px — títulos de pantalla, importes */
  --texto-3xl: 2.5rem;     /* 40 px — cantidad del contador, total a cobrar */

  --interlineado-ajustado: 1.15;
  --interlineado: 1.4;

  /* Espaciado (base 4 px) */
  --espacio-1: 0.25rem;   /*  4 px */
  --espacio-2: 0.5rem;    /*  8 px */
  --espacio-3: 0.75rem;   /* 12 px — separación mínima entre tocables */
  --espacio-4: 1rem;      /* 16 px */
  --espacio-5: 1.25rem;   /* 20 px */
  --espacio-6: 1.5rem;    /* 24 px */
  --espacio-8: 2rem;      /* 32 px */
  --espacio-12: 3rem;     /* 48 px */
  --espacio-16: 4rem;     /* 64 px */

  --separacion-tocables: var(--espacio-3);
  --margen-pantalla: var(--espacio-4);

  /* Radios */
  --radio-sm: 6px;
  --radio: 12px;
  --radio-lg: 16px;
  --radio-redondo: 999px;

  /* Bordes */
  --borde-fino: 2px;
  --borde-grueso: 3px;

  /* Alturas táctiles */
  --alto-boton: 4rem;               /* 64 px — mínimo de cualquier botón */
  --alto-boton-principal: 5rem;     /* 80 px — principal, a todo el ancho */
  --tam-contador: 4.5rem;           /* 72 × 72 px — botones + y − */
  --alto-campo: 4rem;               /* 64 px */
  --alto-pestanas: 4.5rem;          /* 72 px — barra inferior */
  --alto-estado: 2.75rem;           /* 44 px — indicador de envío */
  --tam-icono: 1.75rem;             /* 28 px */
  --tam-icono-grande: 3rem;         /* 48 px — confirmaciones */
  --trazo-icono: 2.75;

  /* Hueco que ocupa el pie fijo (principal + pestañas + márgenes) */
  --alto-pie: calc(var(--alto-boton-principal) + var(--alto-pestanas) + var(--espacio-3) * 2);

  /* Sombras (discretas: al sol no se ven, no deben ser la única señal) */
  --sombra-pie: 0 -2px 0 var(--color-separador);
  --sombra-flotante: 0 6px 20px rgb(0 0 0 / 0.22);

  /* Movimiento */
  --duracion-rapida: 120ms;
  --duracion: 200ms;
  --duracion-deshacer: 10s;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* Anchos */
  --ancho-movil: 36rem;
  --ancho-oficina: 80rem;
}

/* --- Perfil oficina (escritorio): más densidad, texto base de 16 px -------
   Se activa con data-perfil="oficina" en <body> (o en cualquier contenedor,
   como en la página /design). Solo redefine tokens; los colores no cambian. */

[data-perfil="oficina"] {
  --texto-sm: 0.875rem;    /* 14 px */
  --texto-base: 1rem;      /* 16 px */
  --texto-lg: 1.125rem;    /* 18 px */
  --texto-xl: 1.25rem;     /* 20 px */
  --texto-2xl: 1.5rem;     /* 24 px */
  --texto-3xl: 2rem;       /* 32 px */

  --interlineado: 1.45;

  --separacion-tocables: var(--espacio-2);
  --margen-pantalla: var(--espacio-6);

  --radio: 8px;
  --radio-lg: 10px;

  --alto-boton: 2.75rem;            /* 44 px — sigue siendo tocable */
  --alto-boton-principal: 3rem;     /* 48 px */
  --tam-contador: 2.75rem;
  --alto-campo: 2.75rem;
  --tam-icono: 1.25rem;
  --tam-icono-grande: 2rem;
  --trazo-icono: 2.25;
}