/* =====================================================================
 * assets/css/tema.css — LOS COLORES Y MEDIDAS DE LA TIENDA
 * ---------------------------------------------------------------------
 * Estaba en un <style> dentro de includes/tema.php, que carga TODA
 * pagina: la portada, cada producto, cada categoria, el carrito. Eran
 * 10 KB repetidos en cada una de ellas y que la cache no podia guardar,
 * porque la cache guarda archivos y esto era parte del HTML.
 *
 * Como archivo entra bajo la regla de un mes del .htaccess y se descarga
 * UNA vez por visitante.
 *
 * Se movio tal cual. Sigue siendo el unico sitio donde se tocan los
 * colores: cambiar --primario aqui cambia la tienda entera.
 * ===================================================================== */

:root {
  /* ---- MARCA ----------------------------------------------------
     Los dos colores que definen la tienda. Son los que cambiarian al
     instalarla para otro cliente. */
  --primario:        #1B2B6B;   /* azul: cabecera, botones, titulos */
  --primario-suave:  #2A3F9F;   /* azul mas claro: fondos de seccion, hover */
  --acento:          #FF8000;   /* naranja: precios, llamadas a la accion */
  --acento-suave:    #FF9933;

  /* ---- TEXTO ----------------------------------------------------
     De mas oscuro a mas claro. Se nombran por su USO y no por su color
     -"texto-suave" y no "gris-medio"- para que sigan teniendo sentido si
     algun dia el fondo es oscuro y los textos claros. */
  --texto:           #303133;   /* titulos y texto principal */
  --texto-suave:     #606266;   /* descripciones, texto secundario */
  --texto-tenue:     #909399;   /* pistas, notas al pie */
  --texto-apagado:   #C0C4CC;   /* deshabilitado */
  --texto-azulado:   #8890AA;   /* gris con matiz azul: pistas sobre fondo claro */
  /* OTRO GRIS AZULADO, ligeramente mas claro. Se probo unificarlo con el
     anterior y el panel cambio de tono en 100 pixeles: son parecidos pero
     no iguales. Se les da nombre a los dos en vez de decidir por el
     diseño existente. */
  --texto-azulado-c: #94A3B8;
  --texto-azulado-f: #5A6480;   /* el mismo, mas oscuro */

  /* ---- SUPERFICIES ---------------------------------------------- */
  /* EL FONDO ES MAS OSCURO QUE EL BLANCO DE LAS TARJETAS, y no por poco.
     Con el #F5F7FA anterior el contraste era de 1.073: casi nada. En una
     pantalla buena y bien calibrada se distinguia; en un portatil normal
     o con el brillo bajo, las tarjetas se fundian con el fondo y la
     pantalla parecia una sabana blanca sin estructura.

     #EBEFF5 sube el contraste a 1.154 conservando el matiz azulado de la
     marca -no es un gris neutro-. Se probaron valores mas oscuros: a
     partir de #E4EAF2 el panel empieza a verse apagado, como si estuviera
     deshabilitado. */
  --fondo:           #EBEFF5;   /* fondo de la pagina */
  --superficie:      #FFFFFF;   /* tarjetas, paneles */
  --superficie-alt:  #F8F9FB;   /* zonas de imagen, cabeceras de tabla */
  --fondo-suave:     #F0F2F5;   /* separadores de seccion */
  --fondo-azulado:   #F0F2F8;   /* fondo con matiz azul */
  --fondo-tenue:     #FAFBFF;   /* casi blanco, con matiz azul */
  --fondo-neutro:    #F9FAFB;   /* casi blanco, sin matiz */
  --fondo-marca:     #EEF1FF;   /* fondo azul muy claro, de marca */

  /* ---- BORDES --------------------------------------------------- */
  --borde:           #E4E8F0;
  --borde-suave:     #E8ECF0;
  --borde-tenue:     #AAB0C0;
  --borde-azulado:   #E8ECF4;
  --borde-claro:     #D0D5E8;

  /* ---- ESTADOS --------------------------------------------------
     Cada estado tiene DOS colores: el del texto o icono, y el del fondo
     suave que lo acompaña. Se nombran asi porque van juntos: un aviso de
     error es texto rojo sobre fondo rojo claro, y separarlos obligaria a
     recordar cual va con cual.

     Estos valores son los que la tienda ya usaba. Los que habia escrito
     antes -#16a34a y #C0392B- eran de otra paleta y convivian con estos:
     dos rojos y dos verdes distintos en el mismo sitio. Se unifican en
     los que de verdad se ven. */
  --exito:           #15803D;   /* texto de confirmacion */
  --exito-fondo:     #DCFCE7;   /* fondo del aviso de exito */
  --peligro:         #EF4444;   /* texto de error, boton de eliminar */
  /* SEGUNDO ROJO, MAS APAGADO. No es el mismo que --peligro y no debe
     unificarse: se probo y el boton "Desactivar" del panel cambio de tono
     -de rgb(211,74,43) a rgb(243,78,68)-, lo bastante para notarse al
     comparar capturas. Son dos rojos que conviven desde antes; se les da
     nombre a los dos en vez de elegir uno por nosotros. */
  --peligro-apagado: #C0392B;
  --peligro-fuerte:  #B91C1C;   /* el mismo rojo mas oscuro, para hover */
  --peligro-fondo:   #FEE2E2;   /* fondo del aviso de error */
  --peligro-tenue:   #FEF2F2;   /* fondo aun mas suave */
  /* ---- ESTADOS DE PEDIDO ----------------------------------------
     Cada estado tiene su pareja fondo + texto. Se definen aqui y no en la
     pantalla de pedidos porque los MISMOS colores se usan en tres sitios:
     el panel de pedidos, "mi cuenta" del cliente y la pagina de
     confirmacion. Tenerlos repetidos hacia que cambiar el tono de
     "enviado" obligara a acordarse de los tres.

     Los nombres dicen el ESTADO, no el color: el dia del modo oscuro,
     "pendiente" seguira siendo pendiente aunque su amarillo cambie. */
  --estado-pendiente:      #A16207;
  --estado-pendiente-bg:   #FEF9C3;
  --estado-confirmado:     #1D4ED8;
  --estado-confirmado-bg:  #DBEAFE;
  --estado-enviado:        #4338CA;
  --estado-enviado-bg:     #E0E7FF;

  /* ---- ALERTA / ATENCION -----------------------------------------
     El ambar de "esto necesita que lo mires": pedidos por atender, stock
     bajo, reclamaciones pendientes. No es un error -eso es --peligro- ni
     una confirmacion: es algo que espera una decision.

     Estaban repetidos 27 veces entre el panel y la tienda, siempre con
     los mismos valores y siempre con el mismo significado. */
  --alerta:          #B45309;   /* texto sobre fondo claro */
  --alerta-fuerte:   #D97706;   /* variante mas saturada */
  --alerta-fondo:    #FEF3C7;   /* fondo del aviso */
  --alerta-tenue:    #FFF7ED;   /* fondo mas suave, casi blanco */

  --aviso:           #F5DFA8;
  --aviso-texto:     #8A6D1F;
}

/* =====================================================================
   MODO OSCURO — PREPARADO, NO ACTIVO
   ---------------------------------------------------------------------
   Para encenderlo mas adelante:

     1. Quitar los comentarios de este bloque.
     2. Añadir un boton que haga:
          document.documentElement.setAttribute('data-tema','oscuro')
        y guardar la eleccion en localStorage.

   Los valores ya estan calculados para mantener el contraste legible: el
   texto sobre fondo oscuro no puede ser el mismo gris que sobre blanco, o
   se vuelve ilegible. Por eso no basta con invertir.

   NO SE ACTIVA POR prefers-color-scheme a proposito. Una tienda que cambia
   sola de aspecto segun el sistema del visitante sorprende a quien no lo
   espera, y ademas ninguna de las fotos de producto esta pensada para
   fondo oscuro. Que sea una eleccion, no un efecto secundario.

:root[data-tema="oscuro"] {
  --primario:        #5B7BD5;
  --primario-suave:  #7B96E0;
  --acento:          #FF9933;
  --acento-suave:    #FFB366;

  --texto:           #E8EAED;
  --texto-suave:     #B4B8BF;
  --texto-tenue:     #8A8F98;
  --texto-apagado:   #5A5F68;
  --texto-azulado:   #9AA2B8;
  --texto-azulado-c: #A8B0C4;
  --texto-azulado-f: #B8BFD0;

  --fondo:           #16181D;
  --superficie:      #1E2128;
  --superficie-alt:  #252932;
  --fondo-suave:     #1A1D23;
  --fondo-azulado:   #1C2028;
  --fondo-tenue:     #1E2128;
  --fondo-neutro:    #1E2128;
  --fondo-marca:     #232A3D;

  --borde:           #2E323B;
  --borde-suave:     #363B45;
  --borde-tenue:     #4A5058;
  --borde-azulado:   #2E323B;
  --borde-claro:     #3A404A;

  --exito:           #4ADE80;
  --exito-fondo:     #14321F;
  --peligro:         #F87171;
  --peligro-apagado: #E06050;
  --peligro-fuerte:  #FCA5A5;
  --peligro-fondo:   #3A1E1E;
  --peligro-tenue:   #2A1818;
  --estado-pendiente:      #E5C87A;
  --estado-pendiente-bg:   #3A3418;
  --estado-confirmado:     #93B4FF;
  --estado-confirmado-bg:  #1C2A45;
  --estado-enviado:        #A5B4FC;
  --estado-enviado-bg:     #22243F;

  --alerta:          #E5A94A;
  --alerta-fuerte:   #F0B860;
  --alerta-fondo:    #3A3418;
  --alerta-tenue:    #2E2A14;

  --aviso:           #4A3F1F;
  --aviso-texto:     #E5C87A;
}
   ===================================================================== */

/* =====================================================================
   EN IPHONE, ESCRIBIR EN UN CAMPO NO DEBE HACER ZOOM
   ---------------------------------------------------------------------
   EL COMPORTAMIENTO, QUE NO ES UN FALLO DE SAFARI

   Safari en iOS hace zoom automatico al enfocar un campo cuya letra mide
   MENOS DE 16px. Lo hace a proposito -da por hecho que el texto seria
   ilegible- y no se puede desactivar por campo. Al perder el foco la
   pagina se queda desplazada y hay que volver a colocarla a mano. En el
   buscador de la cabecera se nota en cada busqueda.

   LO QUE NO SE HA HECHO, Y POR QUE
   La receta que mas circula es anadir maximum-scale y user-scalable al
   meta viewport de la pagina.

   Eso quita el zoom, y de paso se lo quita a TODO EL MUNDO en toda la
   pagina: quien necesita ampliar para leer un precio o una ficha tecnica
   ya no puede. Se arregla una molestia rompiendo una ayuda de
   accesibilidad. Los cinco meta viewport del proyecto se quedan como
   estan, sin esas dos claves.

   LA SOLUCION ES QUE LA LETRA MIDA 16px, que es lo que Safari pide.

   POR QUE AQUI Y NO EN CADA FORMULARIO
   Habia 15 reglas por debajo de 16px repartidas en 11 archivos -buscador,
   login, registro, checkout, mi cuenta, reclamaciones, la cantidad de la
   ficha de producto, el boletin del pie, el panel y su acceso-. Y el
   problema es peor de lo que sugiere esa lista: un campo que NO declara
   font-size tambien hace zoom, porque el valor por defecto de Safari ya
   esta por debajo de 16px. Corregir las 15 reglas dejaria fuera todo lo
   que no declara tamaño, y el proximo formulario que alguien escriba
   volveria a traer el zoom.

   Este archivo lo cargan las CINCO cabeceras del proyecto -tienda, panel,
   y los tres accesos-, asi que es el unico sitio desde el que se alcanza
   todo.

   SOLO EN PANTALLAS TACTILES
   "hover: none y pointer: coarse" es un telefono o una tableta. En
   escritorio no se toca nada, asi que el diseño de la tienda en ordenador
   queda exactamente igual. En movil los campos crecen unos pixeles, que
   ademas se leen y se tocan mejor.

   LA ESPECIFICIDAD ESTA MEDIDA, no puesta a ojo. Las reglas que hay que
   ganar son del tipo ".search-form input" (0,1,1). Cada :not() con un
   selector de atributo dentro suma (0,1,0), asi que
   "input:not([type=checkbox]):not([type=radio])" da (0,2,1) y gana sin
   necesidad de !important, que habria dejado el tamaño imposible de
   ajustar despues.

   Las casillas y los radios se quedan fuera a proposito: no reciben texto
   escrito, no disparan el zoom, y agrandarlos descuadraria las listas
   donde van junto a su etiqueta.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]),
  select,
  textarea {
    font-size: 16px;
  }
}