/* ==========================================================================
   15 · EL CAJÓN — los formularios entran por el lado
   ==========================================================================
   Un formulario largo dentro de una ventanita centrada obliga a elegir entre
   dos males: o la caja crece hasta tapar el panel entero, o el contenido se
   apretuja y aparece una barra de desplazamiento adentro de un cuadro que ya
   flota. Ninguno de los dos se siente bien.

   El cajón resuelve las dos cosas: entra por la derecha, ocupa todo el alto,
   deja la carta a la vista detrás —se sigue viendo QUÉ se está editando y en
   qué contexto— y tiene sitio de sobra para respirar. En pantalla angosta
   sube desde abajo, que es donde el pulgar alcanza.

   Reparto deliberado: los formularios van al cajón; las DECISIONES —«¿se
   acabó?», «¿elimino?», «anota esta clave»— siguen en ventana centrada. Una
   decisión de un segundo no merece que se abra un cajón, y ponerla en el
   centro es lo que la hace ineludible.
   ========================================================================== */

/* El velo tiene que quedar por ENCIMA de la entrada. Cuando una acción cierra
   la sesión —restablecerse la clave a uno mismo, por ejemplo— el panel vuelve
   al partidor, y con el orden viejo el partidor tapaba la ventana que estaba
   mostrando la contraseña de un solo uso. Se perdía el dato justo cuando era
   irrecuperable. */
.velo   { z-index: 120; }
#avisos { z-index: 140; }

.velo--cajon {
  padding: 0; display: flex; align-items: stretch; justify-content: flex-end;
}

.cajon {
  width: min(580px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--linea);
  box-shadow: -34px 0 90px rgba(22,16,13,.42);
  animation: cajon-entra .52s var(--ease) backwards;
}
@keyframes cajon-entra { from { transform: translateX(101%); } }
.velo--saliendo .cajon { animation: cajon-sale .26s var(--ease-io) both; }
@keyframes cajon-sale { to { transform: translateX(101%); } }

/* --- Cabecera ------------------------------------------------------------- */
.cajon__cab {
  position: relative; flex: none; overflow: hidden;
  padding: 1.5rem clamp(1.3rem, 4vw, 1.9rem) 1.4rem;
  background: linear-gradient(120deg, var(--rojo), var(--rojo-osc));
  color: #fff; display: flex; align-items: flex-start; gap: 1rem;
}
.cajon__cab--naranja { background: linear-gradient(120deg, var(--naranja), #C96F0E);
                       color: var(--nori); }
.cajon__cab--nori { background: linear-gradient(120deg, var(--nori-3), var(--nori)); }
.cajon__cab::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: repeating-linear-gradient(116deg,
    rgba(255,255,255,.055) 0 2px, transparent 2px 15px);
}
.cajon__cab > * { position: relative; z-index: 2; }

/* Cuando el plato ya tiene foto, la foto ES la cabecera: se reconoce de un
   vistazo qué se está editando sin leer el nombre. */
.cajon__cab--foto::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--foto); background-size: cover; background-position: 50% 45%;
  filter: saturate(.85) blur(1px); transform: scale(1.08);
  opacity: .5;
}
.cajon__cab--foto { background: var(--nori); }
.cajon__cab--foto::after {
  inset: 0; background:
    linear-gradient(105deg, rgba(12,8,6,.92) 8%, rgba(12,8,6,.6) 62%, rgba(12,8,6,.35) 100%),
    repeating-linear-gradient(116deg, rgba(255,255,255,.05) 0 2px, transparent 2px 15px);
}

.cajon__icono {
  width: 50px; height: 50px; border-radius: 15px; flex: none;
  display: grid; place-items: center; font-size: 1.35rem;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(4px);
}
.cajon__cab h3 { font-size: 1.4rem; color: inherit; letter-spacing: -.025em;
                 overflow-wrap: anywhere; }
.cajon__cab p { margin: .2rem 0 0; font-size: .85rem; opacity: .82; line-height: 1.4; }
.cajon__x {
  position: absolute; top: .85rem; right: .85rem; z-index: 3;
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  color: inherit; font-size: 1rem;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16);
  transition: background var(--d-rapido) var(--ease), transform var(--d-rapido) var(--ease);
}
.cajon__x:hover { background: rgba(255,255,255,.28); transform: rotate(90deg); }

/* --- Cuerpo --------------------------------------------------------------- */
.cajon__cuerpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1.2rem, 4vw, 1.7rem);
}

/* Los campos van en grupos con título. Una columna de veinte campos iguales es
   una planilla; en grupos se lee como una ficha con secciones. */
.campos { margin-top: 1.6rem; }
.campos:first-child { margin-top: 0; }
.campos__t {
  display: flex; align-items: center; gap: .55em; margin-bottom: .9rem;
  font-size: .67rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-3);
}
.campos__t .ico { font-size: 1.15em; color: var(--rojo); }
.campos__t::after {
  content: ""; flex: 1; height: 1px; background: var(--linea-sutil);
}

/* --- Pie ------------------------------------------------------------------ */
.cajon__pie {
  flex: none; display: flex; gap: .55rem; align-items: center; flex-wrap: wrap;
  padding: 1rem clamp(1.2rem, 4vw, 1.7rem);
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  border-top: 1.5px solid var(--linea-sutil); background: var(--crema);
}
.cajon__pie .btn--peligro { margin-right: auto; }
.cajon__pie .btn--fuerte, .cajon__pie .btn--naranja { flex: 1 1 auto; }

/* Si hay cambios sin guardar, cerrar no los tira en silencio. */
.cajon__aviso {
  flex-basis: 100%; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .7rem .85rem; border-radius: 12px; font-size: .86rem; font-weight: 500;
  background: var(--ambar-sua); border: 1.5px solid rgba(240,144,30,.4); color: #8A5309;
  animation: vista-entra .3s var(--ease) both;
}
.cajon__aviso .ico { font-size: 1.1rem; color: var(--naranja); }
.cajon__aviso .btn { margin-left: auto; margin-right: 0; }

/* --- La vista previa ------------------------------------------------------
   Lo que se está escribiendo, pintado igual que en la carta y en la web. Es
   la diferencia entre llenar campos y ver el plato. --------------------- */
.previa {
  border-radius: var(--radio-g); padding: .85rem;
  background:
    repeating-linear-gradient(116deg, rgba(33,22,16,.022) 0 12px, transparent 12px 24px),
    var(--crema);
  border: 1.5px dashed var(--crema-3);
}
.previa__t {
  display: flex; align-items: center; gap: .5em; margin: 0 .2rem .6rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--arena);
}
.previa__t .ico { font-size: 1.2em; }
.previa .plato { animation: none; cursor: default; }
.previa .plato:hover { transform: none; }
/* En la previa el filo verde del hover no significa nada: solo distrae. */
.previa .plato:hover::after { opacity: 0; }
.previa .cat { margin: 0; animation: none; }

/* --- Campo de precio, en grande -------------------------------------------
   El precio es el dato que más cuesta si se escribe mal, así que se escribe
   en grande y se le ponen los puntos de mil solo. */
.precio-campo { position: relative; }
.precio-campo::before {
  content: "$"; position: absolute; left: 1rem; top: 50%; translate: 0 -50%;
  color: var(--rojo); font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  pointer-events: none;
}
.precio-campo .campo {
  padding: .8rem .9rem .8rem 2.4rem;
  font-family: var(--display); font-weight: 700; font-size: 1.35rem;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* --- Contraseña: fuerza y ojo -------------------------------------------- */
.clave-campo { position: relative; }
.clave-campo .campo { padding-right: 2.9rem; }
.clave-ojo {
  position: absolute; right: .5rem; top: 50%; translate: 0 -50%;
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--tinta-3); font-size: 1rem;
  transition: color var(--d-rapido) var(--ease), background var(--d-rapido) var(--ease);
}
.clave-ojo:hover { color: var(--rojo); background: var(--crema-2); }

.fuerza { margin-top: .55rem; }
.fuerza__barra {
  height: 5px; border-radius: 99px; background: var(--crema-2); overflow: hidden;
}
.fuerza__barra i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--rojo); transition: width .35s var(--ease), background .35s var(--ease);
}
.fuerza--media i { background: var(--naranja); }
.fuerza--buena i { background: var(--verde-cl); }
.fuerza__t { margin-top: .35rem; font-size: .76rem; color: var(--tinta-3); }
.fuerza__t b { color: var(--tinta-2); }

.requisitos { display: grid; gap: .3rem; margin-top: .7rem; }
.requisito {
  display: flex; align-items: center; gap: .5em;
  font-size: .8rem; color: var(--tinta-3);
  transition: color var(--d-rapido) var(--ease);
}
.requisito .ico { font-size: .95rem; color: var(--crema-3);
                  transition: color var(--d-rapido) var(--ease); }
.requisito--ok { color: var(--verde); }
.requisito--ok .ico { color: var(--verde-cl); }

/* --- Angosto: el cajón sube desde abajo, y se arrastra para cerrarlo ------
   Acá el cajón deja de ser cajón y es una hoja de las de iOS. El asa de arriba
   llevaba desde el principio prometiendo que se arrastraba y no lo hacía: era
   un adorno, y para cerrar había que ir a buscar la equis de la esquina. */
@media (max-width: 720px) {
  .velo--cajon { align-items: flex-end; justify-content: center; }
  .cajon {
    width: 100%; height: auto;
    /* No 94vh: en el celular `vh` mide la pantalla entera, teclado incluido, y
       con el teclado arriba el pie —Guardar y Cancelar— quedaba debajo de las
       teclas. `--visible` mide lo que se ve de verdad. Y con el alto en `auto`
       un formulario corto abre una hoja corta, que es como se comporta una
       hoja de verdad. */
    max-height: calc(var(--visible, 100dvh) - 1.4rem);
    border-left: 0; border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 70px rgba(22,16,13,.45);
    /* `backwards` y no `both`: con `both` la animación se queda dueña del
       `transform` para siempre y el arrastre no movía nada. */
    animation: cajon-sube .5s var(--ease) backwards;
    /* Vuelve a su sitio con resorte cuando el arrastre se queda corto. */
    transition: transform .38s var(--resorte);
  }
  @keyframes cajon-sube { from { transform: translateY(101%); } }
  .velo--saliendo .cajon { animation: cajon-baja .26s var(--ease-io) both; }
  /* Sin `from`: la salida arranca justo donde el dedo soltó la hoja, así que
     cerrar se siente la continuación del gesto y no otro movimiento aparte. */
  @keyframes cajon-baja { to { transform: translateY(101%); } }
  /* Mientras el dedo está encima no hay transición: la hoja va pegada al dedo,
     no persiguiéndolo. */
  .cajon--agarrado { transition: none; }

  /* La cabecera entera es el asa —90 px de alto contra los 5 de la rayita— y
     `touch-action: none` es lo que hace que el gesto vertical llegue hasta acá
     en vez de írsele al navegador. */
  .cajon__cab {
    border-radius: 24px 24px 0 0; padding: 1.7rem 1.25rem 1.4rem;
    touch-action: none; -webkit-user-select: none; user-select: none;
  }
  .cajon__asa {
    position: absolute; top: .55rem; left: 50%; translate: -50% 0; z-index: 3;
    width: 42px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.45);
    transition: width var(--d-rapido) var(--ease), background var(--d-rapido) var(--ease);
  }
  /* Se ensancha al agarrarla: confirma que el gesto entró antes de que la hoja
     alcance a moverse. Es el medio segundo que separa «responde» de «no sé si
     lo tomó». */
  .cajon--agarrado .cajon__asa { width: 58px; background: rgba(255,255,255,.9); }

  /* Fuera la equis. El asa ya cierra, y dos formas de hacer lo mismo en una
     cabecera de este tamaño es una de más. En el escritorio se queda: allá el
     cajón entra por el lado y no hay nada que arrastrar. */
  .cajon__x { display: none; }

  .cajon__pie .btn { flex: 1 1 auto; justify-content: center; }
  .cajon__pie .btn--peligro { flex-basis: 100%; margin-right: 0; order: 3; }
}
@media (min-width: 721px) { .cajon__asa { display: none; } }

/* Quien pidió menos movimiento no quiere una hoja con resorte. El arrastre
   sigue funcionando; lo que se apaga es el rebote al soltarla. */
@media (prefers-reduced-motion: reduce) {
  .cajon { transition: none !important; }
}