/* ==========================================================================
   29 · LA ALARMA — la franja, el borde y el diálogo de sonido
   ==========================================================================
   La franja vive dentro de `.nav`, que ya es pegajosa: se queda a la vista en
   todas las pestañas sin medir la altura de la barra (70 px en el escritorio,
   54 en el celular).

   Cuánto grita va con el nivel, igual que el sonido (ver 22-alarma.js):
     calma  · alguien lo tiene abierto, o es del probador: crema, quieta
     n1     · oscura con la marca roja: se nota contra la barra crema y no alarma
     n2     · roja, late despacio
     n3     · roja viva, late rápido, y el borde de TODA la ventana late con ella
     pausa  · «Ya voy»: oscura, con la cuenta atrás en ámbar
     red    · el panel no responde: naranja. No es un pedido; es que no llegan.
   ========================================================================== */

#alarma[hidden] { display: none; }

.alarma {
  --al-bg: var(--nori); --al-fg: var(--crema); --al-sub: rgba(253,244,231,.72);
  background: var(--al-bg); color: var(--al-fg);
  border-top: 1.5px solid rgba(0,0,0,.08);
  animation: alarma-entra .45s var(--resorte) both;
}
@keyframes alarma-entra { from { opacity: 0; transform: translateY(-8px); } }

.alarma__i {
  max-width: var(--max); margin: 0 auto;
  display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap;
  padding: .7rem clamp(1rem, 3vw, 1.7rem);
}
.alarma__ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.35rem;
  background: var(--rojo-vivo); color: #fff;
}
.alarma__txt { flex: 1 1 16rem; min-width: 0; display: grid; gap: .1rem; }
.alarma__txt strong { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.alarma__txt strong em { font-style: normal; font-weight: 600; opacity: .75; }
.alarma__txt span { font-size: .86rem; color: var(--al-sub); }
.alarma__txt b {
  color: var(--al-fg); font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.alarma__acc { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.alarma__b { --bg: #fff; --fg: var(--rojo); --bd: #fff; padding: .6rem 1rem; }
.alarma__b:hover { --bg: var(--crema); --bd: var(--crema); }
.alarma__b--fino {
  --bg: transparent; --fg: var(--al-fg); --bd: rgba(253,244,231,.45);
}
.alarma__b--fino:hover { --bg: rgba(253,244,231,.12); --bd: var(--al-fg); }
.alarma__pausa {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .86rem;
  color: var(--naranja-cl); font-weight: 600;
}
.alarma__pausa b { font-variant-numeric: tabular-nums; }

/* Los demás que esperan, de a uno por botón: cada uno lleva a lo suyo. */
.alarma__otros {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: 0 clamp(1rem, 3vw, 1.7rem) .7rem calc(clamp(1rem, 3vw, 1.7rem) + 42px + 1rem);
}
.alarma__otro {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .32rem .7rem; border-radius: 99px; font-size: .8rem; font-weight: 600;
  background: rgba(253,244,231,.12); color: var(--al-fg);
  border: 1px solid rgba(253,244,231,.25);
}
.alarma__otro:hover { background: rgba(253,244,231,.22); }
.alarma__otro b { font-variant-numeric: tabular-nums; }
.alarma__otro--calma { opacity: .65; }
.alarma__mas { font-size: .78rem; color: var(--al-sub); }

/* El navegador no deja sonar: es lo primero que se lee, y tocarlo lo arregla. */
.alarma__bloqueo {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .5rem 1rem; font-size: .86rem; font-weight: 500;
  background: var(--amarillo); color: var(--nori);
}
.alarma__bloqueo b { font-weight: 800; text-decoration: underline; }

/* --- Los niveles ---------------------------------------------------------- */
.alarma--calma {
  --al-bg: var(--crema-2); --al-fg: var(--tinta); --al-sub: var(--tinta-3);
}
.alarma--calma .alarma__ico { background: var(--tinta-3); }
.alarma--calma .alarma__b { --bg: var(--surface); --fg: var(--tinta); --bd: var(--linea); }
.alarma--calma .alarma__otro { background: var(--surface); border-color: var(--linea); }

.alarma--n1 .alarma__ico { animation: alarma-marca 1.6s var(--ease-io) infinite; }
@keyframes alarma-marca {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,38,45,.6); }
  60%      { box-shadow: 0 0 0 10px rgba(210,38,45,0); }
}

.alarma--n2 { --al-bg: var(--rojo); animation: alarma-entra .45s var(--resorte) both,
                                               alarma-late 1.6s var(--ease-io) .45s infinite; }
.alarma--n2 .alarma__ico, .alarma--n3 .alarma__ico { background: #fff; color: var(--rojo); }
@keyframes alarma-late { 50% { background: var(--rojo-osc); } }

.alarma--n3 { --al-bg: var(--rojo-vivo); animation: alarma-entra .45s var(--resorte) both,
                                                    alarma-late-fuerte .8s var(--ease-io) .45s infinite; }
.alarma--n3 .alarma__txt strong { font-size: 1.08rem; }
@keyframes alarma-late-fuerte { 50% { background: var(--rojo-prof); } }

.alarma--pausa .alarma__ico { background: var(--nori-3); color: var(--naranja-cl); }

.alarma--red { --al-bg: var(--naranja); --al-fg: var(--nori); --al-sub: rgba(22,16,13,.75); }
.alarma--red .alarma__ico { background: var(--nori); color: var(--naranja); }
.alarma--red .alarma__b { --bg: var(--nori); --fg: var(--crema); --bd: var(--nori); }

/* --- El borde: la vista periférica ve movimiento antes que color ----------- */
.alarma-borde {
  position: fixed; inset: 0; z-index: 130; pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
  box-shadow: inset 0 0 0 7px var(--rojo-vivo), inset 0 0 70px rgba(210,38,45,.5);
}
.alarma-borde--on { opacity: 1; animation: alarma-borde .8s var(--ease-io) infinite; }
@keyframes alarma-borde { 50% { opacity: .25; } }

/* La ficha a la que se llegó desde la franja: en 20-pedidos.css, junto a
   `.ped--entra`, que la pisaba desde aquí (mismo peso, carga después). */

/* --- El diálogo «Sonido y avisos» ----------------------------------------- */
.al-aj { display: grid; gap: 1.2rem; }
.al-aj h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: .5rem;
}
.al-aj__probar { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.al-aj__estado { display: grid; gap: .45rem; list-style: none; padding: 0; }
.al-aj__e { display: flex; align-items: flex-start; gap: .5rem; font-size: .88rem; line-height: 1.45; }
.al-aj__e .ico { flex: none; margin-top: .15em; }
.al-aj__e--ok .ico  { color: var(--verde); }
.al-aj__e--ojo .ico { color: var(--naranja); }
.al-aj__e--mal .ico { color: var(--rojo); }
.al-aj__reg {
  list-style: none; padding: 0; display: grid; gap: .3rem; max-height: 11rem; overflow-y: auto;
  font-size: .84rem;
}
.al-aj__reg li { display: flex; gap: .6rem; }
.al-aj__reg time { flex: none; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.al-aj__pasos { padding-left: 1.2rem; display: grid; gap: .4rem; font-size: .86rem; line-height: 1.5; }

/* --- Pantalla angosta ----------------------------------------------------- */
@media (max-width: 720px) {
  .alarma__i { padding: .6rem .9rem; gap: .5rem .7rem; }
  .alarma__ico { width: 36px; height: 36px; font-size: 1.15rem; border-radius: 10px; }
  .alarma__txt { flex-basis: calc(100% - 36px - .7rem); }
  .alarma__txt strong { font-size: .93rem; }
  .alarma__acc { width: 100%; }
  .alarma__acc .alarma__b--si { flex: 1; }
  /* La franja va pegada arriba: con las fichas de los demás se comía media
     pantalla del teléfono. El «y N más» del título ya dice que hay más. */
  .alarma__otros { display: none; }
}

/* Sin movimiento: el nivel se dice con el color y un borde fijo, no latiendo. */
@media (prefers-reduced-motion: reduce) {
  .alarma, .alarma__ico { animation: none !important; }
  .alarma-borde--on { animation: none; opacity: 1; }
}
.al-aj__salidas { display: grid; gap: .5rem; margin-top: .6rem; }
.al-aj__salida { display: grid; gap: .3rem; font-size: .86rem; font-weight: 600; color: var(--tinta-2); }
.al-aj__salida select { max-width: 100%; }
.al-aj__salidas .btn { justify-self: start; }
.al-aj__nota { font-size: .8rem; margin: 0; }