/* Generado por sistema-de-diseno/armar-estilos.mjs desde tokens.json y bundle.css. No editar a mano. */
:root {
  --papel: #ffffff;
  --superficie: #f5f5f7;
  --linea: #d2d2d7;
  --tinta: #1d1d1f;
  --tinta-suave: #6e6e73;
  --rojo: #d70015;
  --rojo-presionado: #a8000f;
  --ambar: #c93400;
  --sobre-color: #ffffff;
  --espacio-1: 4px;
  --espacio-2: 8px;
  --espacio-3: 12px;
  --espacio-4: 16px;
  --espacio-5: 20px;
  --espacio-6: 32px;
  --espacio-7: 48px;
  --alto-boton: 56px;
  --radio-1: 8px;
  --radio-2: 16px;
  --radio-3: 28px;
  --radio-capsula: 999px;
  --font-sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.titulo { font-family: var(--font-sans); font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.02em; }
.destacado { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 600; }
.cuerpo { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 400; }
.nota { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 400; }
.cejilla { font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; }
.codigo { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.06em; }
.grito { font-family: var(--font-sans); font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: 0.08em; }

/* Sticker de emergencia: componentes como clases CSS, sin JavaScript. Los valores vienen de tokens.css. */
body { margin: 0; font-family: var(--font-sans); background: var(--papel); color: var(--tinta); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.se-pagina { display: flex; flex-direction: column; gap: var(--espacio-6); max-width: 440px; margin: 0 auto; padding-block: var(--espacio-6) var(--espacio-7); padding-left: max(var(--espacio-5), env(safe-area-inset-left, 0px)); padding-right: max(var(--espacio-5), env(safe-area-inset-right, 0px)); box-sizing: border-box; }
.se-pila { display: flex; flex-direction: column; gap: var(--espacio-3); padding: var(--espacio-5); max-width: 440px; box-sizing: border-box; }
.se-pagina .se-pila { padding: 0; }
.se-pagina > *, .se-pila > * { margin: 0; }

/* Encabezado: cejilla, título y nota */
.se-encabezado { display: flex; flex-direction: column; gap: var(--espacio-1); }
.se-encabezado > * { margin: 0; }
.se-encabezado .titulo { text-wrap: balance; }
.se-encabezado .nota { margin-top: var(--espacio-1); color: var(--tinta-suave); }
.se-cejilla { margin: 0; text-transform: uppercase; color: var(--tinta-suave); }

/* Boton */
.se-boton { display: flex; align-items: center; justify-content: center; gap: var(--espacio-2); width: 100%; min-height: var(--alto-boton); padding: 0 var(--espacio-5); box-sizing: border-box; border: 0; border-radius: var(--radio-capsula); background: var(--superficie); color: var(--tinta); font-family: var(--font-sans); text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .1s; }
.se-boton:active { background: var(--linea); transform: scale(.98); }
.se-boton--emergencia { background: var(--rojo); color: var(--sobre-color); }
.se-boton--emergencia:active { background: var(--rojo-presionado); }
.se-boton--fuerte { background: var(--tinta); color: var(--sobre-color); }
.se-boton--fuerte:active { background: var(--tinta-suave); }
.se-boton:focus-visible, .se-campo:focus-visible, .se-enlace:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* Campo de texto */
.se-campo { display: block; width: 100%; min-height: var(--alto-boton); padding: 0 var(--espacio-4); box-sizing: border-box; border: 0; border-radius: var(--radio-2); background: var(--superficie); color: var(--tinta); font-family: var(--font-sans); }
.se-campo::placeholder { color: var(--tinta-suave); opacity: 1; }
.se-ayuda { margin: 0; padding: 0 var(--espacio-4); color: var(--tinta-suave); }

/* Icono en cuadrito: el color va en el cuadrito y el dibujo siempre en blanco */
.se-icono { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radio-1); background: var(--tinta-suave); }
.se-icono::before { content: ""; width: 20px; height: 20px; background: var(--sobre-color); -webkit-mask: var(--se-dibujo) center / contain no-repeat; mask: var(--se-dibujo) center / contain no-repeat; }
.se-icono--ambar { background: var(--ambar); }
.se-icono--alerta { --se-dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7'/%3E%3Cpath d='M12 17.5h.01' stroke-width='3.2'/%3E%3C/svg%3E"); }
.se-icono--candado { --se-dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2'/%3E%3Cpath d='M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5'/%3E%3C/svg%3E"); }
.se-icono--ubicacion { --se-dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.5-5.8 6.5-11a6.5 6.5 0 0 0-13 0c0 5.2 6.5 11 6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E"); }
.se-icono--reloj { --se-dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.se-icono--listo { --se-dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }

/* Alerta */
.se-alerta { display: flex; gap: var(--espacio-3); align-items: flex-start; padding: var(--espacio-4); border-radius: var(--radio-2); background: var(--superficie); color: var(--tinta); }
.se-alerta__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.se-alerta__texto > * { margin: 0; }
.se-alerta__texto .nota { color: var(--tinta-suave); }

/* Lista agrupada con filas */
.se-grupo { display: flex; flex-direction: column; gap: var(--espacio-2); }
.se-grupo > * { margin: 0; }
.se-grupo > .se-cejilla, .se-grupo > .se-ayuda { padding: 0 var(--espacio-4); }
.se-lista { margin: 0; padding: 0; list-style: none; border-radius: var(--radio-2); background: var(--superficie); overflow: hidden; }
.se-fila { position: relative; display: flex; align-items: center; gap: var(--espacio-3); min-height: 54px; padding: var(--espacio-3) var(--espacio-4); box-sizing: border-box; }
.se-fila + .se-fila::before { content: ""; position: absolute; top: 0; right: 0; left: calc(var(--espacio-4) + 30px + var(--espacio-3)); border-top: 0.5px solid var(--linea); }
.se-fila__texto { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.se-fila__texto > * { margin: 0; }
.se-fila__texto .nota { color: var(--tinta-suave); }

/* Aviso: mensaje corto que confirma una acción y se va solo */
.se-aviso { display: inline-flex; align-items: center; gap: var(--espacio-2); max-width: 100%; padding: var(--espacio-3) var(--espacio-5) var(--espacio-3) var(--espacio-3); box-sizing: border-box; border-radius: var(--radio-capsula); background: var(--tinta); color: var(--sobre-color); }
.se-aviso .se-icono { width: 24px; height: 24px; background: none; }
.se-aviso--flotante { position: fixed; z-index: 10; left: 50%; bottom: calc(var(--espacio-5) + env(safe-area-inset-bottom, 0px)); width: max-content; max-width: calc(100% - 2 * var(--espacio-5)); transform: translateX(-50%); animation: se-aparece .25s ease-out; }
@keyframes se-aparece { from { opacity: 0; transform: translate(-50%, 12px); } }

/* Pie y enlaces pequeños */
.se-pie { display: flex; justify-content: center; margin-top: var(--espacio-3); }
.se-enlace { color: var(--tinta-suave); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.se-volver { align-self: flex-start; color: var(--tinta); text-decoration: none; }

/* Sticker */
.se-sticker { display: flex; flex-direction: column; align-items: center; gap: var(--espacio-3); width: 280px; padding: var(--espacio-5) var(--espacio-5) var(--espacio-4); box-sizing: border-box; border-radius: var(--radio-3); background: var(--papel); color: var(--tinta); text-align: center; }
.se-sticker > * { margin: 0; }
.se-sticker__marca { padding: var(--espacio-2) var(--espacio-4); border-radius: var(--radio-capsula); background: var(--rojo); color: var(--sobre-color); }
.se-sticker__qr { display: grid; place-items: center; width: 184px; height: 184px; border-radius: var(--radio-1); background: var(--superficie); color: var(--tinta-suave); }
.se-sticker__codigo { color: var(--tinta-suave); }

@media (prefers-reduced-motion: reduce) {
  .se-boton { transition: none; }
  .se-boton:active { transform: none; }
  .se-aviso--flotante { animation: none; }
}