/* ============================================================
   48·72 — los átomos del diseño

   Salen de diseño/la-tienda.html y diseño/el-panel.html, que son
   la especificación. Ninguna pantalla define un color ni una
   fuente por su cuenta: los pide de acá.
   ============================================================ */

:root{
  /* la marca */
  --verde:#1E5245;
  --verde-hondo:#143A31;
  --papel:#F3EDE1;

  /* los grises: piedra para lo apagado, la familia hoja para el panel */
  --piedra:#9A9287;
  --hoja:#E4E4E6;
  --hoja-linea:#C6C6CB;
  --hoja-tinta:#26262A;
  --hoja-suave:#5C5C64;

  /* Bowlby es del cliente, Archivo es del vendedor */
  --ui:"Archivo","Helvetica Neue",Arial,sans-serif;
  --cara:"Bowlby One",Impact,sans-serif;

  /* las medidas cerradas del renglón de la carta. Salen medidas de la maqueta:
     0,79 rem es el techo del ingrediente — más grande y los cuatro no entran
     en una fila */
  --tit:1.10rem;
  --grosor:.4px;
  --ing-cuerpo:.79rem;
  --aire:1rem;
  /* el renglon del resumen del checkout */
  --item:1rem;

  /* el contador: alto y ancho de cada tecla, medidos en la maqueta */
  --ancho-c:1.05rem;
  --alto-c:1.3rem;

  /* el trazo a mano: la línea del logo y de los dibujos, vuelta línea de la
     página. Van como máscara y no como imagen, así que el color lo pone quien
     las usa. linea-vertical es la misma linea girada sobre su eje */
  --trazo:url("../img/linea.svg");
  --trazo-v:url("../img/linea-vertical.svg");
  --trazo-alto:8px;

  /* el mismo trazo, macizo: recorta el relleno de lo elegido para que su
     borde y la línea sean la misma curva */
  --banda:url("../img/banda.svg");
  --caja-llena:url("../img/caja-llena.svg");

  /* y cerrado sobre sí mismo: el botón macizo y el círculo */
  --boton:url("../img/boton.svg");
  --caja:url("../img/caja.svg");
  --anillo:url("../img/anillo.svg");
  --pie:url("../img/pie.svg");
  --pastilla:url("../img/pastilla.svg");
  --pastilla-hueca:url("../img/pastilla-hueca.svg");
  --pastilla-sello:url("../img/pastilla-sello.svg");
  --pastilla-sin:url("../img/pastilla-sin.svg");
  /* el logo tambien va de mascara: la confirmacion lo pinta de papel sobre el
     verde, y el archivo es una silueta de ese mismo verde */
  --logo:url("../img/logo.png");
  --frase:url("../img/frase.svg");
  --confirmar:url("../img/confirmar.svg");
  --confirmar-hueca:url("../img/confirmar-hueca.svg");
}

/* el diseño mide en rem contra 16 px: 1.10rem de un nombre de pizza son 17,6.
   La plantilla traía html{font-size:14px} hasta los 768, que encogía cada
   medida cerrada un 12,5% en telefono, que es donde se usa la tienda */
html{font-size:16px}

body{
  margin:0;
  background:var(--papel);
  color:var(--verde);
  font-family:var(--ui);
}

/* El navegador esconde lo que tiene hidden con una regla de su propia hoja, y
   cualquier display que escribamos nosotros le gana: un .reng es un flex, asi
   que el renglon del precio seguia a la vista aunque el servidor lo mandara
   escondido. Pasa con los 27 lugares donde usamos el atributo.

   Es la unica excepcion donde el !important esta bien puesto: hidden no es un
   estilo que se pueda discutir, es un estado. */
[hidden]{display:none !important}

/* la columna mide 520 px, pero el verde de la confirmación tiene que llegar al
   borde de la ventana: si no, en una pantalla ancha queda una franja */
body.final{background:var(--verde)}

/* La barra de scroll también es del verde. En el panel hay media docena de
   zonas que scrollean —las dos columnas, el rollo de la grilla, el modal— y la
   gris del sistema es lo único gris que se ve en toda la pantalla.
   El borde del grosor del riel deja el pulgar como una barra fina y no como un
   bloque pegado a los dos bordes. */
html{scrollbar-color:var(--verde) var(--papel)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--papel)}
::-webkit-scrollbar-thumb{background:var(--verde);border:3px solid var(--papel)}

a{color:var(--verde)}

.cara{font-family:var(--cara)}

/* La pantalla de error, que no es ni la tienda ni el panel. Va sin diseno
   propio a proposito: se decidio no gastarle una pantalla. Lo unico que hace
   falta es que no parezca de otro sitio. */
.suelta{max-width:520px;margin:0 auto;padding:3rem 1.2rem;text-align:center}
.suelta h1{font-family:var(--cara);font-size:1.8rem;letter-spacing:-.03em;margin:0 0 .6rem}
.suelta p{margin:0 0 .6rem;font-size:.95rem;font-weight:600;line-height:1.45}
.suelta code{font-size:.76rem;opacity:.55;word-break:break-all}


/* ============================================================
   Los formularios

   Vivían en tienda.css hasta que el panel necesitó los mismos
   campos y el mismo botón. Son las piezas, no las pantallas:
   dónde se acomodan lo dice cada hoja.
   ============================================================ */

.campo{--aire-campo:.34rem;display:flex;flex-direction:column;gap:var(--aire-campo)}
.campo label{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.campo input{
  font-family:var(--ui);font-size:1rem;font-weight:600;color:var(--verde);
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:.5rem .1rem;outline:0;position:relative;
}
.campo input::placeholder{color:rgba(30,82,69,.42);font-weight:500}
.campo input:focus{background:rgba(30,82,69,.06)}
/* el subrayado también es el trazo. Va en el .campo y no en el input, porque
   un input no puede tener pseudo-elementos */
.campo{position:relative}
.campo::after,
.frase::before{
  content:"";position:absolute;left:0;right:0;height:var(--trazo-alto);
  background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--trazo) repeat-x left center/auto 100%;
  mask:var(--trazo) repeat-x left center/auto 100%;
}
.campo::after{bottom:calc(var(--trazo-alto) / -2)}
/* El campo de WhatsApp lleva la frase debajo, así que el final del campo ya no
   es el final del input y el subrayado se iba al pie del bloque. Se dibuja
   desde la frase hacia arriba, corrido su propio margen: así queda pegado al
   input sin depender de ninguna medida escrita a mano. */
.campo:has(.frase)::after{display:none}
.frase{
  position:relative;z-index:0;
  margin:0;font-size:.82rem;font-weight:600;line-height:1.45;
  padding:.6rem .7rem;
}
/* el fondo tampoco es un rectangulo: es la misma caja cerrada a pulso, maciza
   y al 9% de verde. Va en su propio dibujo y no en el del segmentado porque
   este bloque cambia de ancho con la pantalla: lleva preserveAspectRatio="none"
   para llenarlo estirandose, en vez de achicarse y quedar centrado */
.frase::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background-color:rgba(30,82,69,.09);pointer-events:none;
  -webkit-mask:var(--frase) center/100% 100% no-repeat;
  mask:var(--frase) center/100% 100% no-repeat;
}
/* el hueco lo pone el gap del campo, así que se descuenta de ahí y no de un
   número escrito de nuevo: si cambia el gap, la línea lo sigue */
.frase::before{top:calc(var(--aire-campo) * -1 - var(--trazo-alto) / 2)}

.confirmar{
  position:relative;z-index:0;width:100%;height:3.05rem;cursor:pointer;border:0;
  font-family:var(--ui);font-weight:800;font-size:.92rem;letter-spacing:.08em;
  text-transform:uppercase;background:transparent;color:var(--papel);
}
/* el fondo va en un pseudo detrás del texto: si la máscara fuera del botón, en
   el estado apagado —que es solo el contorno— se comería la palabra */
.confirmar::before{
  content:"";position:absolute;z-index:-1;inset:0;background-color:var(--verde);
  -webkit-mask:var(--confirmar) center/100% 100% no-repeat;
  mask:var(--confirmar) center/100% 100% no-repeat;
}
.confirmar:disabled{color:rgba(30,82,69,.42);cursor:not-allowed}
.confirmar:disabled::before{
  background-color:rgba(30,82,69,.3);
  -webkit-mask:var(--confirmar-hueca) center/100% 100% no-repeat;
  mask:var(--confirmar-hueca) center/100% 100% no-repeat;
}
.confirmar:focus-visible{outline:2px solid var(--verde);outline-offset:3px}

/* Mientras manda, el botón NO se apaga. Apagarlo con disabled lo llevaba al
   dibujo hueco de acá arriba, así que se veía más muerto que antes de llenar el
   formulario — justo en el segundo de más ansiedad, con los datos ya puestos.
   Queda macizo y lo cruza un barrido, que además dice que algo está pasando.
   El doble envío lo corta el guion y no el atributo: ver wwwroot/js/checkout.js */
.confirmar.enviando{cursor:progress}
.confirmar.enviando::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%,rgba(243,237,225,.28) 50%,transparent 65%);
  background-size:280% 100%;
  -webkit-mask:var(--confirmar) center/100% 100% no-repeat;
  mask:var(--confirmar) center/100% 100% no-repeat;
  animation:barrido 1.15s linear infinite;
}
/* continuo y sin duración fija a propósito: la espera real es el pedido al
   servidor y puede ser medio segundo o tres, así que una animación que dure lo
   suyo terminaría antes que la respuesta y volvería a dejar el botón quieto */
@keyframes barrido{
  from{background-position:180% 0}
  to{background-position:-80% 0}
}

@media (prefers-reduced-motion:reduce){
  .confirmar.enviando::after{animation:none}
}

/* el aviso de que algo no salio: mismo dibujo que la nota del WhatsApp, pero
   macizo y al reves. No hay rojo en la paleta, y no hace falta: lo que separa
   un aviso de una nota es el contraste, no el color */
.aviso{
  position:relative;z-index:0;margin:0 0 .85rem;padding:.6rem .7rem;
  font-size:.82rem;font-weight:700;line-height:1.45;color:var(--papel);text-align:center;
}
.aviso::after{
  content:"";position:absolute;z-index:-1;inset:0;
  background-color:var(--verde);pointer-events:none;
  -webkit-mask:var(--frase) center/100% 100% no-repeat;
  mask:var(--frase) center/100% 100% no-repeat;
}
/* Cae desde arriba en vez de aparecer sin más. Es lo único que explica por qué
   el pedido no salió, y apareciendo en silencio arriba del botón no se ve.
   Sin guion: al sacarle el hidden pasa de display:none a mostrarse, y ahí la
   animación arranca sola. */
.aviso{animation:caer .32s ease}
@keyframes caer{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .aviso{animation:none}
}