/* Sigpal 0.4.0: tema carbón con la marca roja, fondo de placa electrónica y destello al tocar. */
:root {
  --fondo: #0D1012;
  --tinta: #F1F3F4;
  --noche: #151A1D;
  --noche-2: #1B2125;
  --linea-noche: #2A3137;
  --suave: #98A3AB;
  --suave-noche: #B5BFC7;
  --borde: #262C31;
  --borde-2: #343C43;
  --blanco: #151A1D;
  --acento: #E2392B;
  --acento-claro: #E8574A;
  --ok: #3DDC97;
  --ok-fondo: rgba(61, 220, 151, .14);
  --alerta: #F0877D;
  --alerta-fondo: rgba(226, 57, 43, .16);
  --alerta-borde: rgba(226, 57, 43, .5);
  --aviso: #F2C15B;
  --aviso-fondo: rgba(242, 193, 91, .14);
  --aviso-borde: rgba(242, 193, 91, .4);
  --gris-fondo: #232A2F;
  --gris: #B5BFC7;
  --info: #8FB4FF;
  --info-fondo: rgba(143, 180, 255, .14);
  --radio: 18px;
  --panel: rgba(21, 26, 29, .9);
  --panel-lista: rgba(13, 16, 18, .68);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--tinta);
  -webkit-tap-highlight-color: transparent;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
h1, h2, h3 { font-family: 'Exo 2', Inter, system-ui, sans-serif; margin: 0; }
h2 { font-size: 18px; font-weight: 600; }
p { margin: 0; line-height: 1.5; }
a { color: var(--acento-claro); }
svg { display: block; flex-shrink: 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Fondo de placa electrónica + destello ---------- */
#fondo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--fondo); }
#fondo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
#fondo .trazos { opacity: .42; transition: opacity .9s ease-out; }
#fondo .nodos { opacity: .7; transition: opacity .9s ease-out; }
#fondo .destello {
  position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease-out;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 40%), rgba(226, 57, 43, .55) 0%, rgba(226, 57, 43, .18) 28%, rgba(226, 57, 43, 0) 60%);
}
#fondo.on .trazos, #fondo.on .nodos, #fondo.on .destello { opacity: 1; transition-duration: .08s; }

#app {
  max-width: 480px; margin: 0 auto; height: 100dvh; min-height: 100vh;
  display: flex; flex-direction: column; background: transparent; position: relative; z-index: 1; overflow: hidden;
}

/* ---------- Encabezado ---------- */
.cab {
  background: transparent; color: var(--tinta); display: flex; align-items: center; gap: 12px;
  padding: calc(16px + env(safe-area-inset-top)) 16px 12px 20px;
}
.cab .titulos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cab .sub { font-size: 13px; color: var(--suave-noche); font-weight: 500; }
.cab .tit { font-family: 'Exo 2', sans-serif; font-size: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-cab {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--borde-2); background: var(--noche);
  color: var(--tinta); display: flex; align-items: center; justify-content: center; padding: 0; position: relative; flex-shrink: 0;
}
.etq-rol { font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 6px; flex-shrink: 0; }
.rol-residente { background: var(--ok-fondo); color: var(--ok); }
.rol-admin { background: var(--aviso-fondo); color: var(--aviso); }
.rol-tecnico { background: var(--info-fondo); color: var(--info); }
.punto {
  position: absolute; top: 3px; right: 3px; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 4px;
  background: var(--acento); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.franja { background: var(--aviso-fondo); color: var(--aviso); padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.franja span { flex: 1; }
.franja.offline { background: var(--alerta-fondo); color: var(--alerta); }

/* ---------- Contenido ---------- */
.cuerpo { flex: 1; overflow-y: auto; padding: 8px 16px 28px; display: flex; flex-direction: column; gap: 14px; }
.cuerpo::-webkit-scrollbar { width: 0; }
.fila-tit { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.muted { color: var(--suave); font-size: 14px; }
.chico { font-size: 13px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde-2); border-radius: var(--radio); padding: 14px 16px; }
.lista { background: var(--panel-lista); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--radio); padding: 2px 16px; }
.lista > * + * { border-top: 1px solid rgba(255, 255, 255, .07); }
.item { display: flex; gap: 12px; padding: 12px 0; align-items: center; }
.item .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item .t1 { font-size: 15px; font-weight: 600; }
.item .t2 { font-size: 13px; color: var(--suave-noche); }
.hora { font-size: 13px; color: var(--suave-noche); width: 44px; flex-shrink: 0; align-self: flex-start; padding-top: 1px; }
.vacio { color: var(--suave-noche); font-size: 14px; padding: 12px 0; }

/* Acceso principal (tarjeta grande con botón circular) */
.hero {
  background: var(--panel); border: 1px solid #2A3137; border-radius: 22px; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.hero-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.eyq { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--acento-claro); }
.hero-nom { background: none; border: 0; padding: 0; text-align: left; font-family: 'Exo 2', sans-serif; font-size: 28px; font-weight: 700; color: var(--tinta); }
.hero .pastilla { margin-top: 10px; }
.btn-abrir {
  flex-shrink: 0; width: 112px; height: 112px; border-radius: 50%; border: 1.5px solid var(--acento);
  background: radial-gradient(circle at 50% 35%, rgba(226, 57, 43, .30), rgba(226, 57, 43, .05) 70%);
  color: var(--tinta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 0 30px rgba(226, 57, 43, .28), inset 0 0 16px rgba(226, 57, 43, .16);
  font-size: 13px; font-weight: 600; letter-spacing: .1em;
}
.btn-abrir svg { color: #F0877D; stroke-width: 1.9; }
.btn-abrir:active { transform: scale(.97); }

/* Equipos */
.equipo { background: var(--panel); border: 1px solid var(--borde-2); border-radius: var(--radio); padding: 12px 12px 12px 14px; display: flex; align-items: center; gap: 12px; }
.equipo .abre-det { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: none; padding: 0; text-align: left; }
.ico { width: 48px; height: 48px; border-radius: 12px; background: var(--noche-2); border: 1px solid var(--borde-2); color: var(--acento-claro); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.equipo .nom { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.pastilla { display: inline-block; font-size: 13px; font-weight: 500; padding: 3px 9px; border-radius: 999px; margin-top: 5px; }
.p-ok { background: var(--ok-fondo); color: var(--ok); }
.p-alerta { background: var(--alerta-fondo); color: var(--alerta); }
.p-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.p-gris { background: var(--gris-fondo); color: var(--gris); }

/* Botones */
.btn { height: 52px; border-radius: 14px; border: none; background: var(--acento); color: #fff; font-size: 16px; font-weight: 600; padding: 0 18px; }
.btn.acento { background: var(--acento); color: #fff; }
.btn.claro { background: transparent; color: var(--tinta); border: 1px solid var(--borde-2); }
.btn.peligro { background: transparent; color: var(--alerta); border: 1px solid var(--alerta-borde); }
.btn.peligro.confirmar { background: var(--alerta-fondo); }
.btn.verde { background: #1C8A5E; color: #fff; }
.btn.chico { height: 44px; font-size: 15px; border-radius: 12px; padding: 0 16px; }
.btn.mini { height: 40px; font-size: 14px; border-radius: 10px; padding: 0 12px; }
.btn.ancho { width: 100%; }
.btn:active:not(:disabled) { filter: brightness(1.12); }
.enlace { background: none; border: none; color: var(--acento-claro); font-size: 14px; font-weight: 600; padding: 10px 0; }
.fila-btn { display: flex; gap: 8px; }
.fila-btn > * { flex: 1; }

/* Formularios */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; color: var(--suave-noche); }
.campo input, .campo select { height: 50px; border-radius: 12px; border: 1px solid var(--borde-2); background: var(--noche); padding: 0 14px; font-size: 16px; width: 100%; color: var(--tinta); }
.campo input::placeholder { color: #6E7A83; }
.campo input:focus, .campo select:focus { outline: 2px solid var(--acento-claro); outline-offset: 1px; }
.error { color: var(--alerta); font-size: 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde-2); background: var(--noche); font-size: 14px; font-weight: 500; }
.chip.on { background: var(--acento); color: #fff; border-color: var(--acento); }
.opcion { border: 2px solid var(--borde-2); background: var(--noche); border-radius: 14px; }
.opcion.on { border-color: var(--acento); background: rgba(226, 57, 43, .12); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tipo { height: 100px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; font-size: 15px; font-weight: 600; }
.dato { background: var(--panel); border: 1px solid var(--borde-2); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dato span:first-child { font-size: 13px; color: var(--suave-noche); }
.dato span:last-child { font-size: 15px; font-weight: 600; word-break: break-all; }
.codigo { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: #0A0C0E; color: #F1F3F4; border: 1px solid var(--borde-2); border-radius: 12px; padding: 12px 14px; word-break: break-all; line-height: 1.5; }
.codigo-grande { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 28px; font-weight: 700; letter-spacing: 3px; text-align: center; }

/* Detalle */
.anillo { width: 132px; height: 132px; border-radius: 66px; border: 6px solid #3DDC97; display: flex; align-items: center; justify-content: center; font-family: 'Exo 2', sans-serif; font-size: 21px; font-weight: 700; text-align: center; padding: 0 8px; }
.centro { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 24px 18px; }

/* Barra inferior */
.nav { display: flex; background: #0A0C0E; border-top: 1px solid #1E2427; padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); gap: 2px; }
.nav button { flex: 1; min-height: 54px; border: none; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--suave); font-size: 12px; font-weight: 600; position: relative; }
.nav button.on { color: var(--acento-claro); }
.nav .punto { top: 2px; right: calc(50% - 22px); }

/* Pasos */
.pasos { display: flex; gap: 6px; }
.pasos span { flex: 1; height: 5px; border-radius: 3px; background: var(--borde-2); }
.pasos span.on { background: var(--acento); }
.etapa { display: flex; align-items: center; gap: 12px; padding: 13px 0; font-size: 15px; }
.etapa b { width: 26px; height: 26px; border-radius: 13px; background: var(--gris-fondo); display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.etapa.hecho b { background: #1C8A5E; color: #fff; }
.etapa.actual b { background: var(--acento); color: #fff; }
.led { width: 18px; height: 18px; border-radius: 9px; background: var(--acento); box-shadow: 0 0 14px var(--acento); animation: parpadeo .5s infinite alternate; }
@keyframes parpadeo { to { opacity: .25; } }

/* Login */
.oscuro { background: transparent; color: var(--tinta); flex: 1; overflow-y: auto; padding: calc(48px + env(safe-area-inset-top)) 26px 28px; display: flex; flex-direction: column; gap: 22px; }
.oscuro .campo label { color: var(--suave-noche); }
.oscuro .campo input { background: var(--noche); border-color: var(--borde-2); color: var(--tinta); }
.oscuro .muted { color: var(--suave-noche); }
.oscuro .error { color: #FDBA74; }
.marca { width: 190px; height: auto; display: block; }
.btn.borde-noche { background: transparent; border: 1px solid var(--borde-2); color: var(--tinta); font-weight: 500; }

/* Aviso flotante */
.toast { position: absolute; left: 16px; right: 16px; bottom: 96px; background: #1B2125; border: 1px solid var(--borde-2); color: var(--tinta); border-radius: 14px; padding: 14px 16px; font-size: 15px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); z-index: 10; }
.cargando { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--suave); }

/* ---- 0.4.0: ajustes, pases, llegada ---- */
.fila-menu { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; color: var(--tinta); }
.fila-menu .ico, .item .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--noche-2); border: 1px solid var(--borde); color: var(--acento-claro); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fila-menu .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
button.item { background: none; border: 0; width: 100%; text-align: left; color: var(--tinta); }
.sw { width: 52px; height: 30px; border-radius: 15px; border: 1px solid var(--borde-2); background: #232A2F; position: relative; flex-shrink: 0; padding: 0; transition: background .15s; }
.sw span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #98A3AB; transition: transform .15s, background .15s; }
.sw.on { background: var(--acento); border-color: var(--acento); }
.sw.on span { transform: translateX(22px); background: #fff; }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--borde-2); flex-shrink: 0; position: relative; }
.radio.cuadro { border-radius: 6px; }
.opc.on .radio { border-color: var(--acento); background: var(--acento); box-shadow: inset 0 0 0 4px #151A1D; }
.opc.on .radio.cuadro { box-shadow: none; }
.opc.on .radio.cuadro::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.llegada { position: absolute; inset: 0; z-index: 20; background: rgba(5, 7, 8, .72); display: flex; align-items: flex-end; padding: 16px; }
.llegada .caja { width: 100%; background: #151A1D; border: 1px solid var(--borde-2); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.item .t2 { overflow-wrap: anywhere; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }