/* ============================================================================
   LA MARCA, EN UN SOLO SITIO.

   Antes esta paleta estaba COPIADA dentro de index.html, alta.html y admin.html.
   Cambiarla en uno y olvidar los otros dos dejaba al cliente viendo la portada con
   la marca nueva y su pantalla de alta con la vieja, sin ningún error. Por eso ahora
   vive acá y las tres páginas la enlazan.

   SOLO CLARO, y es una decisión, no un olvido: se quiere un sistema que se sienta
   luminoso y de confianza, así que un celular en modo oscuro sigue viendo la marca
   igual. Por eso NO hay bloque @media (prefers-color-scheme: dark) y cada color se
   pinta explícitamente.

   LA REGLA QUE SOSTIENE TODO: el cereza NUNCA aparece en un aviso. Vive en lo que es
   nuestro —botones, títulos, la marca—. Los avisos tienen su propia familia
   (--ok, --aviso, --mal) y siempre llevan icono o palabra, así que lo que dice «para»
   es la forma, no el color. Sin esta regla, nuestro propio color acabaría significando
   «error» y el equipo dejaría de mirar los avisos de verdad.
   ============================================================================ */
:root{
  /* Fondos y letra */
  --fondo:#F5F5F7;          /* el gris de la página */
  --papel:#FFFFFF;          /* las tarjetas, encima del gris */
  --tinta:#1D1D1F;          /* la letra; negro suave, no negro puro: cansa menos */
  /* ESTOS DOS GRISES SE OSCURECIERON A PROPOSITO, y no es un capricho de diseno.
     Con los de Apple (#6E6E73 y #86868B) la letra chica se quedaba entre 3,1 y 3,6 de
     contraste sobre nuestros fondos, cuando lo minimo legible es 4,5. Eso son el codigo
     del cliente, la etiqueta de la clave y las palabras del marcador —«fallaron», «por
     cobrar»—: justo lo que hay que leer en un celular, a plena luz, en el mostrador.
     Apple los usa mas claros porque los pensó para una pantalla bajo techo.
     Si algo tiene que verse mas apagado, se baja el TAMANO o el peso, nunca el contraste. */
  --tinta-2:#5A5A5F;
  --tinta-3:#6B6B70;
  --linea:#E8E8ED;          /* separadores: decoran, no informan */
  --linea-fuerte:#D2D2D7;
  /* EL BORDE DE UN CONTROL NO ES DECORACION: es lo unico que dice que ahi hay una
     casilla, un campo o un boton. A #D2D2D7 se quedaba en 1,5 de contraste —o sea que
     el campo de texto no se veia— y hace falta 3. Por eso los controles llevan este y
     no --linea-fuerte. */
  --borde-control:#8A8A8F;

  /* Cereza: lo nuestro */
  --acento:#78182F;
  --acento-vivo:#93253F;    /* al pasar el dedo o el mouse. Es MÁS CLARO que --acento,
                               por eso NO se llama «oscuro»: el nombre de antes mentía. */
  --acento-claro:#F7EEF0;
  --sobre-acento:#FFFFFF;   /* la letra que va ENCIMA del cereza. Estaba escrita a mano
                               nueve veces; si un día el acento se aclara, se cambia acá. */

  /* Amarillo: lo que queremos que miren */
  --sol:#FFC53D;            /* el amarillo, siempre de FONDO */
  --sol-tenue:#FFF6E2;
  --sobre-sol:#4A1220;      /* la letra que va encima del amarillo */
  /* EL AMARILLO NO SE PUEDE USAR DE LETRA: sobre blanco se queda en 1,7 de contraste y
     desaparece. Cuando lo calido tiene que ser texto —«pocas unidades», el «S/» de un
     precio, un enlace del pie— se usa este, que es el mismo color llevado hasta poder
     leerse (4,9 sobre el papel). */
  --sol-texto:#966210;

  /* Los avisos, cada uno con su trabajo */
  --ok:#1D7A56;      --ok-fondo:#E8F5EF;        /* se guardó, se pagó */
  --aviso:var(--sol-texto); --aviso-fondo:#FDF3DE;  /* mira esto. Es el mismo calido de la
                            marca, por nombre y no por copia: asi no pueden separarse. */
  --mal:#B4441F;     --mal-fondo:#FCEDE6;       /* se rompió */
  --urge:#B4441F;    --urge-fondo:#FCEDE6;      /* mismo par, nombre del panel */

  /* Formas y letras */
  --radio:14px;
  --pildora:980px;   /* los botones van en píldora */
  --texto:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',
          system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  /* Sin esto, un celular en modo oscuro oscurece por su cuenta los campos, los menus y
     la barra de desplazamiento, y el texto se queda ilegible sobre un fondo que no
     pintamos nosotros. Se lo decimos de frente: esta pagina es clara. */
  color-scheme:light;

  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
}

/* Lo que comparten las tres páginas. Todo lo demás vive en cada una. */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--texto);background:var(--fondo);color:var(--tinta);
     -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
     line-height:1.47;letter-spacing:-.012em}
h1,h2,h3{line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
/* El aro del foco NO lleva border-radius propio: se lo ponia al elemento, asi que un
   boton en pildora se volvia un rectangulo redondeado justo al tocarlo con el teclado.
   Sin esa linea, el aro sigue solo la forma que ya tiene cada cosa. */
:focus-visible{outline:3px solid var(--acento);outline-offset:3px}

/* EL TEXTO DE EJEMPLO DE LOS CAMPOS. Sin esta regla se queda con el gris de fabrica del
   navegador, que anda entre 2,3 y 3,5 de contraste — por debajo del minimo que esta misma
   hoja acaba de fijar al oscurecer los grises. Y no siempre es decoracion: hay campos cuyo
   UNICO rotulo es su texto de ejemplo.
   El opacity:1 hace falta porque Firefox le aplica .54 por su cuenta y lo volveria a bajar. */
::placeholder{color:var(--tinta-3);opacity:1}

/* Chrome y Safari pintan de amarillo el campo que autorrellenan y no hay forma de cambiar
   ese fondo: se sustituye con una sombra interior del color del papel. Sin esto, el
   formulario de alta —que es donde el cliente autorrellena su nombre y su telefono— sale
   con dos campos amarillos en medio de la marca. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--tinta);
  -webkit-box-shadow:0 0 0 40px var(--papel) inset;
  caret-color:var(--tinta);
}