/* Concepto: consola de una nave de serie B. Cielo nocturno de fondo,
   paneles de casco, haz tractor amarillo como acción principal. Un solo look oscuro. */
:root {
  --espacio: #0c0b1f;
  --casco: #16153a;
  --panel: #1e1c4a;
  --linea: #34316e;
  --tinta: #eeedff;
  --tenue: #a19ed3;
  --haz: #ffd166;
  --haz-tinta: #2b1d00;
  --ovni: #6ef0c2;
  --avist: #ff8fb8;
  --peligro: #ff6b6b;

  --f-display: "Bungee", "Arial Black", system-ui, sans-serif;
  --f-texto: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r: 18px;
  --nav-h: 68px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--espacio);
  color: var(--tinta);
  font: 400 15px/1.5 var(--f-texto);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea { font: inherit; color: var(--tinta); }
:focus-visible { outline: 2px solid var(--haz); outline-offset: 2px; }
[hidden] { display: none !important; }

#estrellas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ───── tipografía ───── */
.logo { font-family: var(--f-display); font-size: clamp(30px, 9vw, 46px); line-height: 1; margin: 0; letter-spacing: .02em; text-wrap: balance;
  background: linear-gradient(180deg, var(--haz), #ff9f5a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo.pequeno { font-size: clamp(24px, 7vw, 32px); }
.logo.mini { font-size: 18px; }
.lema { color: var(--tenue); max-width: 30ch; text-align: center; margin: 0; text-wrap: balance; }
.seccion { font-family: var(--f-display); font-weight: 400; font-size: 15px; letter-spacing: .08em; color: var(--tenue); margin: 26px 0 10px; }
.ayuda { color: var(--tenue); font-size: 13px; margin: 0 0 12px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.aviso { color: var(--avist); text-align: center; max-width: 32ch; margin: 0; }

/* ───── botones ───── */
.btn { border: 0; border-radius: 999px; padding: 14px 22px; font-weight: 600; transition: transform .12s, box-shadow .2s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-haz { background: var(--haz); color: var(--haz-tinta); box-shadow: 0 0 0 0 rgba(255, 209, 102, .5); }
.btn-haz:not(:disabled):hover { box-shadow: 0 0 24px 2px rgba(255, 209, 102, .45); }
.btn-sec { background: var(--panel); color: var(--tinta); border: 1px solid var(--linea); }
.btn-mini { padding: 9px 14px; font-size: 13px; }

/* ───── pantallas de entrada ───── */
.pantalla-completa { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px 20px; }
.acceso-nave { position: relative; width: 200px; height: 230px; }
.nave-svg { width: 200px; height: 160px; display: block; }
.haz-acceso { position: absolute; left: 50%; top: 118px; width: 150px; height: 110px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,209,102,.55), rgba(255,209,102,0)); clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  animation: parpadeo 2.4s ease-in-out infinite; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 440px; }
.tarjeta-rol { background: var(--casco); border: 2px solid var(--linea); border-radius: var(--r); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color .2s, transform .2s; }
.tarjeta-rol svg { width: 96px; height: 76px; }
.tarjeta-rol strong { font-family: var(--f-display); font-weight: 400; font-size: 14px; }
.tarjeta-rol span { color: var(--tenue); font-size: 12px; }
.tarjeta-rol[aria-pressed="true"][data-rol="ovni"] { border-color: var(--ovni); transform: translateY(-3px); }
.tarjeta-rol[aria-pressed="true"][data-rol="avistadora"] { border-color: var(--avist); transform: translateY(-3px); }

.campo { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 440px; border: 0; padding: 0; margin: 0; }
.campo > span, .campo legend { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); padding: 0; margin-bottom: 6px; }
.campo em { text-transform: none; font-style: normal; opacity: .7; }
.campo input, .campo textarea, .buscador input { background: var(--casco); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; width: 100%; resize: vertical; }
.campo input:focus, .campo textarea:focus, .buscador input:focus { border-color: var(--haz); outline: none; }

/* ───── app ───── */
#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, var(--espacio) 60%, transparent); }
.cabecera-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chip { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--linea); white-space: nowrap; }
.chip.ovni { color: var(--ovni); border-color: color-mix(in srgb, var(--ovni) 50%, transparent); }
.chip.avistadora { color: var(--avist); border-color: color-mix(in srgb, var(--avist) 50%, transparent); }
.chip-prueba { color: var(--haz); }

.vistas { flex: 1; overflow-y: auto; padding: 4px 16px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom, 0px)); }
.vista { max-width: 560px; margin: 0 auto; animation: entrar .25s ease-out; }

/* ───── radar ───── */
.radar-caja { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
#radar { width: min(78vw, 300px); height: min(78vw, 300px); border-radius: 50%;
  background: radial-gradient(circle, #13304a 0%, #0e1a33 60%, #0c0b1f 100%); box-shadow: 0 0 0 1px var(--linea), 0 0 40px rgba(110, 240, 194, .12); }
.radar-leyenda { color: var(--tenue); font-size: 12px; text-align: center; }

/* ───── tarjetas de señal ───── */
.lista { display: flex; flex-direction: column; gap: 10px; }
.senal { background: var(--casco); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; position: relative; overflow: hidden; }
.senal.entrante { border-color: var(--haz); box-shadow: 0 0 0 1px var(--haz), 0 0 22px rgba(255,209,102,.18); }
.senal.entrante::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,209,102,.12) 50%, transparent 70%); animation: barrido 2.8s linear infinite; pointer-events: none; }
.senal.caducada { opacity: .55; }
.senal-cab { display: flex; gap: 12px; align-items: flex-start; }
.senal-icono { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--panel); }
.senal-icono svg { width: 34px; height: 28px; }
.senal-texto { min-width: 0; flex: 1; }
.senal-titulo { font-weight: 700; margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.senal-meta { color: var(--tenue); font-size: 12px; margin: 2px 0 0; overflow-wrap: anywhere; }
.senal-nota { margin: 0; font-size: 13px; background: var(--panel); border-radius: 10px; padding: 8px 10px; overflow-wrap: anywhere; }
.etiqueta { display: inline-block; font-size: 10px; font-family: var(--f-display); letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; margin-bottom: 4px; }
.etiqueta.nueva { background: var(--haz); color: var(--haz-tinta); }
.etiqueta.ejemplo { background: var(--panel); color: var(--tenue); }
.estado-tripulacion { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 11px; padding: 4px 9px; border-radius: 999px; border: 1px dashed var(--linea); color: var(--tenue); }
.pill.ok.ovni { border: 1px solid var(--ovni); color: var(--ovni); }
.pill.ok.avistadora { border: 1px solid var(--avist); color: var(--avist); }
.cuenta { font-family: var(--f-mono); font-size: 12px; color: var(--haz); }
.senal-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.senal-acciones .btn { flex: 1 1 auto; }
.btn-borrar { background: transparent; border: 0; color: var(--tenue); font-size: 12px; padding: 6px; margin-left: auto; text-decoration: underline; }

.vacio { text-align: center; color: var(--tenue); padding: 22px 12px; border: 1px dashed var(--linea); border-radius: var(--r); }
.vacio strong { display: block; color: var(--tinta); margin-bottom: 4px; }

.caducadas { margin-top: 18px; }
.caducadas summary { color: var(--tenue); cursor: pointer; padding: 8px 0; }
.caducadas .lista { margin-top: 8px; }

/* ───── galaxia ───── */
.galaxia-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.stat { cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, transform .15s; background: var(--casco); border: 1px solid var(--linea); border-radius: 14px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.stat-num { font-family: var(--f-display); font-size: 26px; color: var(--haz); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-lab { font-size: 11px; color: var(--tenue); }
.mapa-marco { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--linea); }
.mapa { height: 52vh; min-height: 280px; background: #0e0d26; }
.mapa-bajo { height: 40vh; min-height: 240px; }
.filtros-mapa { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 6px; z-index: 500; flex-wrap: wrap; }
.filtro { border: 1px solid var(--linea); background: rgba(22,21,58,.88); border-radius: 999px; padding: 6px 12px; font-size: 12px; }
.filtro.activo { background: var(--haz); color: var(--haz-tinta); border-color: var(--haz); }

.leaflet-container { font-family: var(--f-texto); background: #0e0d26; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--casco); color: var(--tinta); border: 1px solid var(--linea); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-content strong { display: block; }
.leaflet-container a.leaflet-popup-close-button { color: var(--tenue); }
.leaflet-control-attribution { background: rgba(12,11,31,.7) !important; color: var(--tenue) !important; font-size: 9px; }
.leaflet-control-attribution a { color: var(--tenue) !important; }
.leaflet-bar a { background: var(--casco); color: var(--tinta); border-color: var(--linea); }
.marca-ovni { filter: drop-shadow(0 0 6px rgba(110,240,194,.8)); }
.marca-ovni svg { width: 38px; height: 30px; animation: flotar 3s ease-in-out infinite; }
.marca-pend { width: 18px; height: 18px; border-radius: 50%; background: var(--haz); box-shadow: 0 0 0 0 rgba(255,209,102,.7); animation: latido 1.8s infinite; border: 2px solid #fff3cf; }
.marca-elegida { width: 22px; height: 22px; border-radius: 50%; background: var(--avist); border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(255,143,184,.3); }

/* ───── lanzar ───── */
.buscador { display: flex; gap: 8px; margin-bottom: 10px; }
.buscador input { flex: 1; min-width: 0; }
.resultados { background: var(--casco); border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.resultados button { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--linea); padding: 10px 14px; font-size: 13px; }
.resultados button:last-child { border-bottom: 0; }
.btn-flotante { position: absolute; right: 10px; bottom: 10px; z-index: 500; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linea); background: var(--casco); display: grid; place-items: center; }
.btn-flotante svg { width: 22px; height: 22px; stroke: var(--haz); stroke-width: 2; fill: none; }
.btn-flotante svg circle:first-child { fill: var(--haz); stroke: none; }
.punto { font-size: 12px; color: var(--tenue); margin: 8px 0 14px; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.chips-caducidad { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-op { border: 1px solid var(--linea); background: var(--casco); border-radius: 999px; padding: 8px 14px; font-size: 13px; }
.chip-op.activo { background: var(--haz); color: var(--haz-tinta); border-color: var(--haz); font-weight: 600; }

/* ───── base ───── */
.rango-caja { text-align: center; background: var(--casco); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 16px 18px; margin-top: 6px; display: flex; flex-direction: column; align-items: center; }
.rango-caja .nave-svg { width: 130px; height: 104px; }
.rango-eti { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); margin: 4px 0 2px; }
.rango-nombre { font-family: var(--f-display); font-weight: 400; color: var(--haz); font-size: 22px; margin: 0 0 12px; text-wrap: balance; }
.barra { width: 100%; max-width: 280px; height: 10px; border-radius: 999px; background: var(--panel); overflow: hidden; margin-bottom: 8px; }
.barra-relleno { height: 100%; width: 0; background: linear-gradient(90deg, var(--ovni), var(--haz)); border-radius: 999px; transition: width .8s ease; }
.fila-boton { text-align: left; background: var(--casco); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; }
.fila-boton.peligro { color: var(--peligro); }
.tripulante { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 12px; background: var(--casco); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 14px; }
.tripulante svg { width: 44px; height: 36px; flex: none; }
.tripulante div { min-width: 0; }
.tripulante strong { display: block; overflow-wrap: anywhere; }
.tripulante span { font-size: 12px; color: var(--tenue); }

/* ───── navegación ───── */
.pestanas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(22, 21, 58, .94); backdrop-filter: blur(10px); border-top: 1px solid var(--linea); }
.pestana { position: relative; background: transparent; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--tenue); font-size: 11px; }
.pestana svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pestana.activa { color: var(--haz); }
.pestana-lanzar svg { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--haz); stroke: var(--haz-tinta); stroke-width: 2.6; box-shadow: 0 0 18px rgba(255,209,102,.4); }
.badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--avist); color: #3a0b20; font-size: 10px; font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 5px; animation: latido 1.8s infinite; }

/* ───── modal y toast ───── */
.modal { position: fixed; inset: 0; z-index: 2000; background: rgba(5,5,15,.7); display: grid; place-items: center; padding: 20px; }
.modal-caja { background: var(--casco); border: 1px solid var(--linea); border-radius: var(--r); padding: 20px; max-width: 380px; width: 100%; }
.modal-caja h3 { font-family: var(--f-display); font-weight: 400; margin: 0 0 8px; color: var(--haz); font-size: 18px; }
.modal-caja p { margin: 0 0 18px; color: var(--tenue); }
.modal-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2500;
  background: var(--panel); border: 1px solid var(--haz); color: var(--tinta); padding: 10px 16px; border-radius: 12px; max-width: calc(100% - 32px); font-size: 14px; animation: entrar .2s ease-out; }

/* ───── ABDUCCIÓN ───── */
.abduccion { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center;
  background: radial-gradient(ellipse at 50% 30%, #2a2470 0%, #0c0b1f 70%); }
.abd-escena { position: relative; width: 240px; height: 300px; }
.abd-nave { position: absolute; left: 50%; top: 0; width: 220px; height: 176px; transform: translate(-50%, -260px); animation: abd-llega 1.1s cubic-bezier(.2,.9,.3,1.2) forwards; }
.abd-nave .luces circle { animation: luces .5s steps(2) infinite; }
.abd-haz { position: absolute; left: 50%; top: 128px; width: 200px; height: 160px; transform: translateX(-50%) scaleY(0); transform-origin: top;
  background: linear-gradient(180deg, rgba(255,209,102,.85), rgba(255,209,102,.08)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  animation: abd-haz .5s 1.1s ease-out forwards, parpadeo 1.2s 1.6s ease-in-out infinite; }
.abd-figura { position: absolute; left: 50%; bottom: 14px; width: 40px; height: 70px; transform: translateX(-50%); animation: abd-sube 1.6s 1.6s ease-in forwards; }
.abd-suelo { position: absolute; left: 10%; right: 10%; bottom: 8px; height: 10px; border-radius: 50%; background: rgba(255,209,102,.35); filter: blur(4px); opacity: 0; animation: aparecer .4s 1.3s forwards; }
.abd-eti { font-family: var(--f-mono); font-size: 12px; color: var(--ovni); letter-spacing: .2em; text-transform: uppercase; margin: 0; opacity: 0; animation: aparecer .4s 2.9s forwards; }
.abd-titulo { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 8vw, 40px); margin: 0; color: var(--haz); opacity: 0; animation: abd-titulo .6s 3s cubic-bezier(.2,.9,.3,1.4) forwards; text-wrap: balance; }
.abd-lugar { color: var(--tenue); margin: 0; opacity: 0; animation: aparecer .4s 3.3s forwards; }
.abd-rango { font-family: var(--f-display); color: var(--ovni); margin: 6px 0 0; opacity: 0; animation: abd-titulo .6s 3.6s forwards; }
.abduccion .btn { margin-top: 12px; opacity: 0; animation: aparecer .4s 3.8s forwards; }

@keyframes abd-llega { to { transform: translate(-50%, 0); } }
@keyframes abd-haz { to { transform: translateX(-50%) scaleY(1); } }
@keyframes abd-sube { 0% { transform: translate(-50%, 0) rotate(0); } 60% { opacity: 1; } 100% { transform: translate(-50%, -150px) rotate(360deg) scale(.3); opacity: 0; } }
@keyframes abd-titulo { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes aparecer { to { opacity: 1; } }
@keyframes luces { 50% { opacity: .3; } }
@keyframes parpadeo { 50% { opacity: .55; } }
@keyframes flotar { 50% { transform: translateY(-6px); } }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(255,209,102,.6); } 70% { box-shadow: 0 0 0 12px rgba(255,209,102,0); } 100% { box-shadow: 0 0 0 0 rgba(255,209,102,0); } }
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes entrar { from { opacity: 0; transform: translateY(6px); } }
.flotar { animation: flotar 3.2s ease-in-out infinite; }

@media (max-width: 360px) { .roles { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .abd-nave { transform: translate(-50%, 0); }
  .abd-haz { transform: translateX(-50%) scaleY(1); }
}

.acceso-form { width: 100%; max-width: 360px; align-items: center; gap: 12px; }
.acceso-form .btn-haz { width: 100%; }
.logo { max-width: 12ch; text-align: center; }
.logo.mini { max-width: none; font-size: 15px; white-space: nowrap; }

.tiles-nocturnas { filter: invert(1) hue-rotate(200deg) brightness(.85) contrast(.95) saturate(.55); }
.btn-gmaps { text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.leaflet-control-layers { background: var(--casco) !important; color: var(--tinta); border: 1px solid var(--linea) !important; border-radius: 12px !important; }
.leaflet-control-layers-expanded { padding: 8px 12px; }
.leaflet-control-layers-toggle { filter: invert(1); }
.filtros-mapa { right: 64px; }

.chincheta { background: none; border: 0; filter: drop-shadow(0 4px 4px rgba(0,0,0,.45)); }
.chincheta svg { display: block; transition: transform .15s; transform-origin: 50% 100%; }
.chincheta.arrastrando svg { transform: translateY(-10px) scale(1.12); }
.chincheta.cae svg { animation: cae-pin .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes cae-pin { from { transform: translateY(-36px); } to { transform: none; } }

.modo-senal { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--casco); border: 1px solid var(--linea); border-radius: 999px; margin: 6px 0 4px; }
.modo-op { border: 0; background: transparent; border-radius: 999px; padding: 9px 10px; font-size: 13px; color: var(--tenue); }
.modo-op.activo { background: var(--haz); color: var(--haz-tinta); font-weight: 600; }
.campo input[type="date"] { color-scheme: dark; }

/* ───── Expediente Área 51 ───── */
.abd-botones { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 12px; opacity: 0; animation: aparecer .4s 3.8s forwards; }
.abduccion .abd-botones .btn { margin-top: 0; opacity: 1; animation: none; }
.dossier { --papel: #e9dfc6; --papel-osc: #d8cba9; --tinta-p: #2b2418; --rojo-sello: #b3261e;
  position: relative; width: 100%; max-width: 400px; max-height: calc(100% - 20px); overflow-y: auto;
  background: var(--papel); color: var(--tinta-p); border-radius: 4px 14px 14px 14px; padding: 22px 18px 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55); font-family: var(--f-mono); }
.dossier::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0 22px, rgba(43,36,24,.06) 22px 23px); }
.dossier-pestana { position: absolute; top: -14px; left: 0; background: var(--papel-osc); color: var(--tinta-p); font-size: 11px; font-weight: 600; padding: 3px 14px 6px; border-radius: 6px 6px 0 0; letter-spacing: .1em; }
.dossier-cab { position: relative; border-bottom: 2px dashed rgba(43,36,24,.4); padding-bottom: 10px; margin-bottom: 12px; }
.dossier-org { margin: 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.dossier-titulo { margin: 4px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 20px; color: var(--tinta-p); }
.sello { display: inline-block; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .08em; border: 2.5px solid currentColor; padding: 2px 8px; border-radius: 4px; }
.sello-ts { position: absolute; right: -2px; top: 26px; color: var(--rojo-sello); font-size: 13px; transform: rotate(-12deg); opacity: .85; }
.sello-ok { color: #2f6b2a; font-size: 11px; transform: rotate(-2deg); }
.dossier-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; font-size: 12.5px; }
.dossier-datos dt { text-transform: uppercase; font-size: 10px; letter-spacing: .08em; opacity: .65; padding-top: 2px; }
.dossier-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.exp-vacio { text-align: center; border: 2px dashed rgba(43,36,24,.35); border-radius: 10px; padding: 14px; }
.exp-vacio p { margin: 0 0 12px; font-size: 12.5px; }
.exp-subir { cursor: pointer; display: inline-block; }
.polaroid { position: relative; margin: 6px auto 10px; background: #fbf8f1; padding: 10px 10px 12px; width: 92%; transform: rotate(-2.2deg); box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.polaroid figcaption { font-size: 11px; text-align: center; margin-top: 8px; color: #4b4232; }
.clip { position: absolute; top: -12px; left: 50%; width: 26px; height: 40px; margin-left: -13px; border: 3px solid #8d939c; border-radius: 12px; border-bottom-color: transparent; }
.foto-clasificada { position: relative; display: block; width: 100%; padding: 0; border: 0; background: #111; overflow: hidden; cursor: pointer; }
.foto-clasificada img { display: block; width: 100%; max-height: 52vh; object-fit: cover; filter: blur(22px) grayscale(.6) contrast(1.1); transform: scale(1.1); transition: filter .5s, transform .5s; }
.foto-clasificada.desclasificada img { filter: sepia(.25) contrast(1.05) saturate(.9); transform: none; }
.franja-censura { position: absolute; left: -10%; right: -10%; top: 50%; transform: translateY(-50%) rotate(-6deg); background: #111; color: #f2e9d3; font-family: var(--f-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 0; transition: opacity .4s; }
.foto-clasificada.desclasificada .franja-censura { opacity: 0; }
.exp-acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-acciones label { cursor: pointer; }
.dossier .btn-borrar { color: var(--rojo-sello); }
.dossier .btn-sec { background: var(--papel-osc); color: var(--tinta-p); border-color: rgba(43,36,24,.3); }
.exp-estado { font-size: 12px; text-align: center; margin: 10px 0 0; color: #5a4a2a; }
.exp-cerrar { width: 100%; margin-top: 14px; }
.btn-exp { flex-basis: 100%; }

/* ───── aviso de señal entrante ───── */
.alerta { position: fixed; inset: 0; z-index: 2800; display: grid; place-items: center; padding: 20px; background: rgba(5,5,15,.72); animation: entrar .25s ease-out; }
.alerta-caja { width: 100%; max-width: 340px; text-align: center; background: var(--casco); border: 1px solid var(--avist); border-radius: 22px; padding: 26px 20px 20px; box-shadow: 0 0 40px rgba(255,143,184,.25); }
.alerta-retrato { position: relative; width: 170px; height: 170px; margin: 0 auto 14px; }
.alerta-retrato img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--avist); position: relative; z-index: 1; animation: asoma .6s cubic-bezier(.2,1.4,.4,1); }
.alerta-retrato svg { width: 100%; height: 100%; position: relative; z-index: 1; animation: flotar 3s ease-in-out infinite; }
.alerta-onda { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--avist); animation: onda 1.8s ease-out infinite; }
.alerta-onda.d2 { animation-delay: .9s; }
.alerta-eti { font-family: var(--f-display); color: var(--avist); font-size: 24px; margin: 0 0 6px; }
.alerta-texto { margin: 0 0 6px; color: var(--tinta); text-wrap: balance; }
.alerta-op { margin: 0 0 16px; color: var(--haz); font-size: 13px; }
.alerta-botones { display: flex; gap: 10px; }
.alerta-botones .btn { flex: 1; }
@keyframes onda { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }
@keyframes asoma { from { transform: scale(.4) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───── marcadores del mapa ───── */
.marca-ella { width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--avist); overflow: hidden; box-shadow: 0 0 0 0 rgba(255,143,184,.7); animation: latido-rosa 1.8s infinite; background: var(--casco); }
.marca-ella img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marca-nave-pend { width: 42px; height: 34px; filter: drop-shadow(0 0 6px rgba(255,209,102,.9)); }
.marca-nave-pend svg { width: 100%; height: 100%; animation: flotar 2.4s ease-in-out infinite; }
@keyframes latido-rosa { 0% { box-shadow: 0 0 0 0 rgba(255,143,184,.7); } 70% { box-shadow: 0 0 0 14px rgba(255,143,184,0); } 100% { box-shadow: 0 0 0 0 rgba(255,143,184,0); } }

/* ───── ficha interactiva ───── */
.ficha { background: var(--panel); border-radius: 14px; padding: 10px 12px; display: grid; gap: 10px; }
.ficha-trans { display: flex; align-items: center; gap: 10px; }
.trans-ult { margin: 0; font-size: 13px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vacio-t { color: var(--tenue); }
.trans-quien { font-weight: 700; }
.trans-quien.ovni { color: var(--ovni); }
.trans-quien.avistadora { color: var(--avist); }
.trans-hace { color: var(--tenue); font-size: 11px; white-space: nowrap; }
.energia-cab { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); margin-bottom: 6px; }
.energia-barra { display: flex; height: 12px; border-radius: 999px; background: var(--casco); overflow: hidden; border: 1px solid var(--linea); }
.energia-n { background: var(--ovni); transition: width .6s; }
.energia-a { background: var(--avist); transition: width .6s; }
.energia-barra.llena { box-shadow: 0 0 14px rgba(255,209,102,.6); border-color: var(--haz); }
.energia-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--tenue); }
.energia-ok { margin: 6px 0 0; font-size: 12px; color: var(--haz); }

/* ───── transmisor ───── */
.trans-lista { display: grid; gap: 8px; margin-bottom: 14px; }
.trans-op { text-align: left; background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 11px 14px; font-size: 14px; }
.trans-op:hover, .trans-op:focus-visible { border-color: var(--haz); }


.stat:hover, .stat:focus-visible { border-color: var(--haz); }
.stat:active { transform: scale(.97); }
.energia-total { background: linear-gradient(90deg, var(--ovni), var(--haz) 60%, var(--avist)); transition: width .6s; }
.ficha-hora { margin: 0; font-size: 13px; color: var(--tenue); }
.ficha-hora strong { color: var(--haz); }
/* misiones */
.misiones-caja, .zonas-caja { max-height: calc(100% - 20px); overflow-y: auto; }
.mis-op { color: var(--haz) !important; margin: -4px 0 12px !important; font-size: 13px; }
.mis-lista { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.mis-item { background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; }
.mis-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mis-pts { color: var(--haz); font-size: 11px; white-space: nowrap; }
.mis-desc { margin: 4px 0 8px !important; font-size: 12.5px; }
.mis-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mis-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mis-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px dashed var(--linea); color: var(--tenue); }
.mis-chip.ok { border-style: solid; border-color: var(--haz); color: var(--haz); }
.mis-chip.ok.ovni { border-color: var(--ovni); color: var(--ovni); }
.mis-chip.ok.avistadora { border-color: var(--avist); color: var(--avist); }
.mis-hora { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.mis-hora input { flex: 1; min-width: 0; background: var(--casco); border: 1px solid var(--linea); border-radius: 10px; padding: 7px 10px; color-scheme: dark; }
.mis-estado { color: var(--haz) !important; font-size: 13px; margin: 0 0 10px !important; }
/* zonas */
.zonas-lista { display: grid; gap: 8px; margin: 12px 0; }
.zona { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; }
.zona:hover, .zona:focus-visible { border-color: var(--haz); }
.zona svg { width: 44px; height: 35px; flex: none; }
.zona-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.zona-txt span { color: var(--tenue); font-size: 12px; }
.zona-n { font-family: var(--f-display); color: var(--haz); font-size: 22px; }

/* ───── perfil ───── */
.perfil { text-align: center; background: var(--casco); border: 1px solid var(--linea); border-radius: var(--r); padding: 16px 16px 18px; margin: 6px 0 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.perfil-ella { border-color: color-mix(in srgb, var(--avist) 55%, var(--linea)); background: radial-gradient(ellipse at 50% 0%, rgba(255,143,184,.14), transparent 60%), var(--casco); }
.perfil-nave { border-color: color-mix(in srgb, var(--ovni) 45%, var(--linea)); background: radial-gradient(ellipse at 50% 0%, rgba(110,240,194,.12), transparent 60%), var(--casco); }
.perfil-lugar { margin: 0; font-family: var(--f-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.perfil-avatar { width: 168px; height: 168px; display: grid; place-items: center; margin: 4px 0; }
.perfil-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--avist); box-shadow: 0 0 30px rgba(255,143,184,.3); }
.perfil-avatar svg { width: 100%; height: 80%; animation: flotar 3.2s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(110,240,194,.35)); }
.perfil-nombre { margin: 2px 0 0; font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--tinta); text-wrap: balance; }
.perfil-titulo { margin: 0 0 6px; color: var(--tenue); font-size: 13px; }
.perfil-ella .perfil-titulo { color: var(--avist); }
.perfil-nave .perfil-titulo { color: var(--ovni); }
.perfil-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; width: 100%; margin-top: 10px; }
.perfil-stats button { border: 1px solid transparent; text-align: center; align-items: center; background: var(--panel); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; }
.perfil-stats strong { font-family: var(--f-display); font-weight: 400; color: var(--haz); font-size: 22px; font-variant-numeric: tabular-nums; }
.perfil-stats span { font-size: 11px; color: var(--tenue); }
.perfil-modal-caja { max-height: calc(100% - 20px); overflow-y: auto; }
.perfil-modal-caja .perfil { margin-top: 0; }
/* ───── uniforme ───── */
.unif-ops { display: grid; gap: 6px; margin-top: 8px; width: 100%; }
.unif-op { display: grid; grid-template-columns: 1fr auto; text-align: left; gap: 0 8px; background: var(--casco); border: 1px solid var(--linea); border-radius: 12px; padding: 8px 12px; }
.unif-op strong { font-size: 13px; }
.unif-op span { grid-column: 1; font-size: 11.5px; color: var(--tenue); }
.unif-op em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--f-mono); color: var(--haz); font-size: 12px; }
.unif-op.activo { border-color: var(--avist); background: color-mix(in srgb, var(--avist) 14%, var(--casco)); }

/* ───── campana de alertas ───── */
.cabecera-der { display: flex; align-items: center; gap: 8px; }
.btn-campana { position: relative; width: 46px; height: 46px; border-radius: 50%; background: var(--casco); border: 1px solid var(--linea); display: grid; place-items: center; }
.btn-campana svg { width: 21px; height: 21px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.btn-campana.con-alertas { border-color: var(--avist); }
.btn-campana.con-alertas svg { stroke: var(--avist); animation: campanita 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
.badge-campana { top: -4px; right: -4px; left: auto; }
@keyframes campanita { 0%, 60%, 100% { transform: rotate(0); } 65% { transform: rotate(14deg); } 72% { transform: rotate(-12deg); } 79% { transform: rotate(8deg); } 86% { transform: rotate(-4deg); } }
.alertas-caja { max-height: calc(100% - 20px); overflow-y: auto; }
.alertas-lista { display: grid; gap: 8px; margin: 12px 0; }
.alerta-item { display: flex; gap: 12px; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; position: relative; }
.alerta-item.nueva { border-color: var(--avist); }
.alerta-item.nueva::after { content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--avist); }
.alerta-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--casco); overflow: hidden; font-size: 18px; }
.alerta-ico img { width: 100%; height: 100%; object-fit: cover; }
.alerta-ico svg { width: 34px; height: 28px; }
.alerta-cuerpo { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.alerta-linea { font-size: 13.5px; overflow-wrap: anywhere; }
.alerta-linea strong.ovni { color: var(--ovni); }
.alerta-linea strong.avistadora { color: var(--avist); }
.alerta-meta { font-size: 11.5px; color: var(--tenue); }

/* ───── carga del rayo: hito pequeño ───── */
.carga-mini { position: fixed; inset: 0; z-index: 3200; display: grid; place-items: center; pointer-events: none; }
.carga-mini-caja { background: rgba(22,21,58,.94); border: 1px solid var(--haz); border-radius: 26px; padding: 20px 26px 18px; text-align: center; box-shadow: 0 0 50px rgba(255,209,102,.35); max-width: 300px; }
.carga-mini.entra .carga-mini-caja { animation: mini-entra .45s cubic-bezier(.2,1.5,.4,1) both; }
.carga-mini.sale .carga-mini-caja { animation: mini-sale .35s ease-in both; }
.carga-anillo { position: relative; width: 132px; height: 132px; margin: 0 auto 6px; }
.carga-anillo > svg:first-child { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo-fondo { fill: none; stroke: var(--linea); stroke-width: 9; }
.anillo-arco { fill: none; stroke: var(--haz); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,209,102,.8)); }
.carga-nave { position: absolute; left: 50%; top: 50%; width: 78px; height: 62px; transform: translate(-50%, -50%); animation: zumbido .12s linear infinite alternate; }
.carga-chispas i { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--haz); opacity: 0; animation: chispa 1s ease-out .3s 2; }
.carga-chispas i:nth-child(1) { --dx: -58px; --dy: -30px; } .carga-chispas i:nth-child(2) { --dx: 60px; --dy: -24px; background: var(--ovni); }
.carga-chispas i:nth-child(3) { --dx: -40px; --dy: 52px; background: var(--avist); } .carga-chispas i:nth-child(4) { --dx: 48px; --dy: 48px; }
.carga-chispas i:nth-child(5) { --dx: 0; --dy: -66px; background: var(--avist); } .carga-chispas i:nth-child(6) { --dx: 0; --dy: 64px; background: var(--ovni); }
.carga-eti { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.carga-pct { margin: 0; font-family: var(--f-display); font-size: 40px; color: var(--haz); line-height: 1.1; }
.carga-txt { margin: 4px 0 0; color: var(--tinta); font-size: 13px; text-wrap: balance; }
@keyframes mini-entra { from { transform: scale(.5) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mini-sale { to { transform: scale(.85) translateY(-20px); opacity: 0; } }
@keyframes zumbido { from { transform: translate(-50%, -50%) translateX(-1px); } to { transform: translate(-50%, -50%) translateX(1px); } }
@keyframes chispa { 0% { transform: translate(-50%, -50%); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; } }

/* ───── carga del rayo: 100% ───── */
.carga-max { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #3a2f8a 0%, #12103a 55%, #07061a 100%); animation: fondo-pulso 1.6s ease-in-out infinite alternate; }
#carga-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cmx-escena { position: relative; width: 260px; height: 290px; }
.cmx-nave { position: absolute; left: 50%; top: 0; width: 230px; height: 184px; transform: translateX(-50%); animation: cmx-baja 1s cubic-bezier(.2,1.3,.4,1) both, cmx-tiembla .09s linear 1s infinite alternate; z-index: 2; }
.cmx-haz { position: absolute; left: 50%; top: 132px; width: 260px; height: 170px; transform: translateX(-50%) scaleY(0); transform-origin: top;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #fff6c8, #ffd166 30%, #ff8fb8 65%, rgba(110,240,194,.15));
  animation: cmx-haz .6s .9s ease-out forwards, cmx-arcoiris 1.2s 1.5s linear infinite; }
.cmx-onda { position: absolute; left: 50%; top: 92px; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 4px solid var(--haz); opacity: 0; animation: cmx-onda 1.8s 1s ease-out infinite; }
.cmx-onda.o2 { animation-delay: 1.6s; border-color: var(--avist); } .cmx-onda.o3 { animation-delay: 2.2s; border-color: var(--ovni); }
.cmx-eti { margin: 0; font-family: var(--f-mono); color: var(--ovni); letter-spacing: .22em; text-transform: uppercase; font-size: 12px; opacity: 0; animation: aparecer .4s 1.4s forwards; }
.cmx-titulo { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 9vw, 44px); line-height: 1.05; text-wrap: balance;
  background: linear-gradient(90deg, var(--haz), var(--avist), var(--ovni), var(--haz)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: abd-titulo .7s 1.5s cubic-bezier(.2,1.6,.4,1) forwards, cmx-brillo 3s 2.2s linear infinite; }
.cmx-op { margin: 0; color: var(--haz); font-family: var(--f-mono); opacity: 0; animation: aparecer .4s 1.9s forwards; }
.cmx-sub { margin: 0 0 8px; color: var(--tenue); max-width: 30ch; opacity: 0; animation: aparecer .4s 2.1s forwards; }
.carga-max .btn { position: relative; z-index: 2; opacity: 0; animation: aparecer .4s 2.4s forwards; }
@keyframes cmx-baja { from { transform: translateX(-50%) translateY(-320px) rotate(-12deg); } to { transform: translateX(-50%); } }
@keyframes cmx-tiembla { from { margin-left: -2px; } to { margin-left: 2px; } }
@keyframes cmx-haz { to { transform: translateX(-50%) scaleY(1); } }
@keyframes cmx-arcoiris { 0% { filter: hue-rotate(0); } 100% { filter: hue-rotate(360deg); } }
@keyframes cmx-onda { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes cmx-brillo { to { background-position: 300% 0; } }
@keyframes fondo-pulso { from { filter: brightness(1); } to { filter: brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { .cmx-haz { transform: translateX(-50%) scaleY(1); } }

/* ───── antena de transmisiones ───── */
.btn-campana .antena { width: 30px; height: 30px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: none; transform: none; }
.antena .ant-plato { fill: color-mix(in srgb, var(--ovni) 25%, transparent); }
.antena .ant-punta { fill: var(--haz); stroke: none; }
.antena .ant-onda { opacity: .25; }
.btn-campana.con-alertas .antena { stroke: var(--avist); animation: none; }
.btn-campana.con-alertas .antena .ant-plato { fill: color-mix(in srgb, var(--avist) 30%, transparent); }
.btn-campana.con-alertas .ant-onda { animation: ant-onda 1.4s ease-in-out infinite; }
.btn-campana.con-alertas .ant-onda.o2 { animation-delay: .35s; }
@keyframes ant-onda { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.alerta-cta { font-style: normal; color: var(--haz); font-weight: 600; }
/* ───── aportes y títulos ───── */
.aportes { margin: 6px 0 0; font-size: 12px; color: var(--tenue); }
.ap-n { color: var(--ovni); } .ap-a { color: var(--avist); }
.ap-lider { color: var(--haz); white-space: nowrap; }
.perfil-rango { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--panel); border-radius: 14px; padding: 10px 12px; margin: 4px 0 6px; }
.pr-eti { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.pr-nombre { font-family: var(--f-display); font-weight: 400; color: var(--haz); font-size: 17px; }
.perfil-rango .barra { margin: 0; }
.pr-sig { font-size: 11.5px; color: var(--tenue); }
.titulo-caja { border-color: var(--avist); box-shadow: 0 0 50px rgba(255,143,184,.35); }
.medalla { width: 96px; height: 96px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 46px;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd166 45%, #c98a1c); box-shadow: 0 0 0 6px rgba(255,209,102,.25), 0 0 30px rgba(255,209,102,.6);
  animation: medalla 1s cubic-bezier(.2,1.5,.4,1) both; }
.tn-nombre { margin: 0; font-family: var(--f-display); font-size: 24px; color: var(--avist); text-wrap: balance; }
@keyframes medalla { 0% { transform: scale(.2) rotate(-180deg); } 100% { transform: none; } }

.cabecera { padding: 10px 12px; }
.cabecera-titulo { flex-wrap: wrap; row-gap: 2px; }
.cabecera .logo.mini { font-size: 15px; }
.btn-campana .antena { stroke-width: 2.2; }
.antena .ant-plato { fill: color-mix(in srgb, var(--ovni) 35%, transparent); }

/* ───── haz de recompensa personal ───── */
.haz-caja { background: var(--casco); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px; margin: 0 0 6px; display: grid; gap: 8px; }
.haz-caja.ovni { border-color: color-mix(in srgb, var(--ovni) 45%, var(--linea)); }
.haz-caja.avistadora { border-color: color-mix(in srgb, var(--avist) 55%, var(--linea)); }
.haz-barra { height: 16px; }
.haz-caja.avistadora .energia-total { background: linear-gradient(90deg, #7a0f2e, #d6345f 55%, var(--haz)); }
.haz-caja.ovni .energia-total { background: linear-gradient(90deg, #1d6b2c, var(--ovni) 55%, var(--haz)); }
.haz-premio { margin: 0; font-size: 13px; color: var(--tenue); }
.haz-premio strong { color: var(--haz); }
.haz-otro, .haz-espera { margin: 0; font-size: 12.5px; color: var(--tenue); }
.vale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: color-mix(in srgb, var(--haz) 12%, var(--panel)); border: 1px dashed var(--haz); border-radius: 14px; padding: 10px 12px; }
.vale-ico { font-size: 26px; }
.vale-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.vale-txt span { font-size: 12px; color: var(--tenue); }
.vale-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.favores { display: grid; gap: 8px; }
.favor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; text-align: left; background: var(--casco); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 14px; }
.favor:hover, .favor:focus-visible { border-color: var(--haz); }
.favor-txt { display: flex; flex-direction: column; min-width: 0; }
.favor-txt span { font-size: 12px; color: var(--tenue); }
.favor em { font-style: normal; font-family: var(--f-mono); color: var(--haz); }
.favor-libre { border-style: dashed; }
.pendiente { background: var(--casco); border: 1px solid var(--avist); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; }
.pendiente p { margin: 0; font-size: 13.5px; }
.conf-botones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.conf-caja { background: var(--casco); border: 1px solid var(--avist); border-radius: 12px; padding: 8px 10px; margin: 8px 0; }
.conf-caja p { margin: 0 0 6px !important; font-size: 13px; color: var(--tinta) !important; }
.unif-op:disabled { opacity: .5; }
.carga-avatar { position: absolute; left: 50%; top: 50%; width: 82px; height: 82px; border-radius: 50%; object-fit: cover; transform: translate(-50%, -50%); border: 3px solid var(--avist); }

/* ───── brindis terrícola ───── */
.brindis { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; overflow: hidden;
  background: linear-gradient(180deg, #070618 0%, #16133f 45%, #3b2459 78%, #5a2d4f 100%); }
.br-cielo { position: absolute; inset: 0; pointer-events: none; }
.br-cielo i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .2; animation: titila 2.2s ease-in-out infinite; }
.br-cielo i:nth-child(3) { left: 8%; top: 12%; } .br-cielo i:nth-child(4) { left: 22%; top: 6%; animation-delay: .4s; } .br-cielo i:nth-child(5) { left: 35%; top: 18%; animation-delay: .9s; }
.br-cielo i:nth-child(6) { left: 52%; top: 9%; animation-delay: 1.3s; } .br-cielo i:nth-child(7) { left: 66%; top: 20%; animation-delay: .2s; } .br-cielo i:nth-child(8) { left: 80%; top: 30%; animation-delay: .7s; }
.br-cielo i:nth-child(9) { left: 90%; top: 14%; animation-delay: 1.1s; } .br-cielo i:nth-child(10) { left: 14%; top: 34%; animation-delay: 1.6s; } .br-cielo i:nth-child(11) { left: 44%; top: 32%; animation-delay: .5s; }
.br-cielo i:nth-child(12) { left: 72%; top: 4%; animation-delay: 1.9s; } .br-cielo i:nth-child(13) { left: 28%; top: 40%; animation-delay: .3s; } .br-cielo i:nth-child(14) { left: 94%; top: 42%; animation-delay: 1.2s; }
.br-luna { position: absolute; right: 12%; top: 7%; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f3e6b8 60%, #d9c98e); box-shadow: 0 0 40px rgba(255,240,190,.5); animation: aparecer 1s forwards; opacity: 0; }
.br-fugaz { position: absolute; left: -20%; top: 16%; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(18deg); opacity: 0; animation: fugaz 1.1s 2.2s ease-out forwards; }
.br-montes { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 28%; }
.br-escena { position: relative; width: min(84vw, 320px); }
.br-copas { width: 100%; height: auto; overflow: visible; }
.br-liq { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: llenar 1.6s .5s cubic-bezier(.3,.8,.3,1) forwards; }
.br-liq-birra { animation-delay: .9s; }
.br-espuma { opacity: 0; transform-box: fill-box; transform-origin: bottom; animation: espuma .5s 2.3s cubic-bezier(.2,1.5,.4,1) forwards; }
.br-burbujas circle { fill: rgba(255,255,255,.75); animation: burbuja 1.4s 1.2s ease-in infinite; }
.br-burbujas circle:nth-child(2) { animation-delay: 1.5s; } .br-burbujas circle:nth-child(3) { animation-delay: 1.8s; } .br-burbujas circle:nth-child(4) { animation-delay: 2.1s; } .br-burbujas circle:nth-child(5) { animation-delay: 1.35s; }
.br-copa { transform-box: fill-box; transform-origin: 50% 100%; animation: brinda-izq .5s 2.8s ease-in-out forwards; }
.br-jarra { transform-box: fill-box; transform-origin: 50% 100%; animation: brinda-der .5s 2.8s ease-in-out forwards; }
.br-chispa { opacity: 0; transform-box: fill-box; transform-origin: center; animation: chispazo .7s 3.2s ease-out forwards; }
.br-estrellas { position: absolute; left: 50%; top: 22%; width: 0; height: 0; }
.br-estrellas i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--haz); box-shadow: 0 0 8px var(--haz); opacity: 0; animation: sube-estrella 1.8s 3.3s ease-out forwards; }
.br-estrellas i:nth-child(1) { --dx: -110px; } .br-estrellas i:nth-child(2) { --dx: -70px; animation-delay: 3.4s; } .br-estrellas i:nth-child(3) { --dx: -30px; animation-delay: 3.5s; } .br-estrellas i:nth-child(4) { --dx: 10px; animation-delay: 3.35s; }
.br-estrellas i:nth-child(5) { --dx: 50px; animation-delay: 3.45s; } .br-estrellas i:nth-child(6) { --dx: 90px; animation-delay: 3.55s; } .br-estrellas i:nth-child(7) { --dx: 130px; animation-delay: 3.4s; } .br-estrellas i:nth-child(8) { --dx: -150px; animation-delay: 3.6s; }
.br-eti { position: relative; margin: 0; font-family: var(--f-mono); color: var(--avist); letter-spacing: .22em; text-transform: uppercase; font-size: 12px; opacity: 0; animation: aparecer .4s 3.4s forwards; }
.br-titulo { position: relative; margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 8vw, 40px); line-height: 1.05; color: var(--haz); text-wrap: balance; opacity: 0; animation: abd-titulo .7s 3.5s cubic-bezier(.2,1.6,.4,1) forwards; text-shadow: 0 0 24px rgba(255,209,102,.4); }
.br-sub { position: relative; margin: 0 0 8px; color: var(--tinta); max-width: 30ch; opacity: 0; animation: aparecer .4s 3.9s forwards; }
.brindis .btn { position: relative; opacity: 0; animation: aparecer .4s 4.2s forwards; }
@keyframes llenar { to { transform: scaleY(1); } }
@keyframes espuma { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
@keyframes burbuja { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-100px); opacity: 0; } }
@keyframes brinda-izq { 0% { transform: none; } 60% { transform: translateX(26px) rotate(14deg); } 100% { transform: translateX(18px) rotate(9deg); } }
@keyframes brinda-der { 0% { transform: none; } 60% { transform: translateX(-26px) rotate(-14deg); } 100% { transform: translateX(-18px) rotate(-9deg); } }
@keyframes chispazo { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.6) rotate(20deg); } 100% { opacity: 0; transform: scale(2.2) rotate(45deg); } }
@keyframes sube-estrella { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--dx), -260px) scale(1.2); } }
@keyframes fugaz { 0% { opacity: 0; transform: translateX(0) rotate(18deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(150vw) rotate(18deg); } }
@keyframes titila { 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .br-liq { transform: scaleY(1); } .br-espuma { opacity: 1; } }

/* ───── intento de abducción fallido (en el móvil de ella) ───── */
.fallida { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #2a2470 0%, #0c0b1f 72%); }
.fa-escena { position: relative; width: 300px; max-width: 100%; height: 330px; }
.fa-nave-w { position: absolute; left: 50%; top: 10px; width: 170px; height: 136px; margin-left: -85px; transform: translate(-260px, -200px) rotate(-20deg);
  animation: fa-llega 1.2s cubic-bezier(.2,1.1,.4,1) forwards, fa-huye 1.3s 3.7s cubic-bezier(.5,0,.8,.4) forwards; }
.fa-nave { width: 100%; height: 100%; animation: fa-tiembla .08s 2.6s 9 alternate linear; }
.fa-haz { position: absolute; left: 50%; top: 118px; width: 190px; height: 190px; transform: translateX(-50%) scaleY(0); transform-origin: top;
  background: linear-gradient(180deg, rgba(255,209,102,.85), rgba(255,209,102,.06)); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  animation: fa-haz-on .4s 1.2s ease-out forwards, fa-parpadeo .9s 2.5s steps(6) forwards; }
.fa-ella { position: absolute; left: 50%; bottom: 16px; width: 52px; height: 91px; margin-left: -26px; z-index: 2; overflow: visible;
  animation: fa-sube 1s 1.6s ease-in-out forwards, fa-cae .7s 3.3s cubic-bezier(.5,0,.6,1.6) forwards; }
.fa-suelo { position: absolute; left: 20%; right: 20%; bottom: 10px; height: 12px; border-radius: 50%; background: rgba(255,209,102,.3); filter: blur(4px); }
.fa-chispa { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 10px #ffd166; opacity: 0; animation: fa-chispa .5s 2.7s ease-out 3; }
.fa-chispa.c1 { left: 20%; top: 60%; --dx: -30px; --dy: -20px; } .fa-chispa.c2 { left: 75%; top: 55%; --dx: 34px; --dy: -24px; animation-delay: 2.9s; } .fa-chispa.c3 { left: 50%; top: 75%; --dx: 4px; --dy: 30px; animation-delay: 3.1s; background: #ff8fb8; }
.fa-humo { position: absolute; left: 40%; top: 55%; width: 26px; height: 26px; border-radius: 50%; background: rgba(160,160,180,.7); opacity: 0; animation: fa-humo 1.2s 3.4s ease-out infinite; }
.fa-humo.h2 { animation-delay: 3.7s; left: 30%; } .fa-humo.h3 { animation-delay: 4s; left: 22%; }
.fa-aviso { position: absolute; left: 50%; bottom: 120px; margin-left: 40px; font-family: var(--f-display); font-size: 34px; color: var(--avist); opacity: 0; animation: fa-aviso .5s 3.4s cubic-bezier(.2,1.6,.4,1) forwards; }
.fa-eti { margin: 0; font-family: var(--f-mono); color: var(--avist); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; opacity: 0; animation: aparecer .4s 4.3s forwards; }
.fa-titulo { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 9vw, 42px); color: var(--haz); opacity: 0; animation: abd-titulo .7s 4.4s cubic-bezier(.2,1.6,.4,1) forwards; text-wrap: balance; }
.fa-sub { margin: 0 0 8px; color: var(--tinta); max-width: 32ch; opacity: 0; animation: aparecer .4s 4.8s forwards; }
.fallida .btn { opacity: 0; animation: aparecer .4s 5.1s forwards; }
@keyframes fa-llega { to { transform: translate(0, 0) rotate(0); } }
@keyframes fa-huye { 0% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(30px, 12px) rotate(14deg); } 55% { transform: translate(-20px, -10px) rotate(-18deg); } 100% { transform: translate(340px, -260px) rotate(40deg); } }
@keyframes fa-tiembla { from { transform: translateX(-4px) rotate(-2deg); } to { transform: translateX(4px) rotate(2deg); } }
@keyframes fa-haz-on { to { transform: translateX(-50%) scaleY(1); } }
@keyframes fa-parpadeo { 0% { opacity: 1; } 20% { opacity: .2; } 35% { opacity: .9; } 55% { opacity: .1; } 70% { opacity: .6; } 100% { opacity: 0; } }
@keyframes fa-sube { to { transform: translateY(-110px) rotate(-12deg) scale(.9); } }
@keyframes fa-cae { from { transform: translateY(-110px) rotate(-12deg) scale(.9); } to { transform: none; } }
@keyframes fa-chispa { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
@keyframes fa-humo { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: translate(-40px, -20px) scale(1.8); } }
@keyframes fa-aviso { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1) rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .fa-nave-w { transform: none; } }

/* ───── v1.2: multas, ofrendas, datos ───── */
.perfil-stats button { position: relative; transition: border-color .15s, transform .15s; }
.perfil-stats button:hover, .perfil-stats button:focus-visible { border-color: var(--haz); }
.perfil-stats button:active { transform: scale(.97); }
.perfil-stats button::after { content: "›"; position: absolute; right: 8px; top: 6px; color: var(--linea); font-size: 16px; }
.mis-chip.multa { border: 1px solid var(--peligro); color: var(--peligro); }
.btn-multa { color: var(--peligro); }
.mis-nota { list-style: none; font-size: 12px; color: var(--tenue); padding: 4px 2px; }
.haz-aviso { justify-self: start; background: transparent; border: 1px solid var(--avist); color: var(--avist); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; }

.of-cab { background: var(--casco); border: 1px solid var(--linea); border-radius: var(--r); padding: 14px; display: grid; gap: 10px; margin-top: 6px; }
.of-cab.ovni { border-color: color-mix(in srgb, var(--ovni) 45%, var(--linea)); }
.of-cab.avistadora { border-color: color-mix(in srgb, var(--avist) 55%, var(--linea)); }
.of-cab.ovni .energia-total { background: linear-gradient(90deg, #1d6b2c, var(--ovni) 55%, var(--haz)); }
.of-cab.avistadora .energia-total { background: linear-gradient(90deg, #7a0f2e, #d6345f 55%, var(--haz)); }
.of-cab-txt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.of-cab-txt strong { font-family: var(--f-display); font-weight: 400; color: var(--haz); font-size: 26px; line-height: 1; }
.of-cab-txt span { color: var(--tenue); font-size: 13px; }
.of-eti { margin: 0; width: 100%; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.of-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.of-fila { display: flex; align-items: center; gap: 12px; background: var(--casco); border: 1px solid var(--linea); border-radius: 12px; padding: 8px 12px; }
.of-n { font-family: var(--f-mono); font-weight: 600; min-width: 38px; text-align: center; color: var(--haz); }
.of-fila.no .of-n { color: var(--peligro); }
.of-fila.pendiente .of-n { color: var(--tenue); }
.of-t { display: flex; flex-direction: column; min-width: 0; }
.of-t strong { font-weight: 500; font-size: 13.5px; }
.of-t span { font-size: 11.5px; color: var(--tenue); }
.of-fila.no .of-t strong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--peligro) 70%, transparent); }

.dato-cont { display: grid; gap: 10px; margin: 6px 0 12px; }
.dato-kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.dato-kv div { background: var(--panel); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; }
.dato-kv strong { font-family: var(--f-display); font-weight: 400; color: var(--haz); font-size: 22px; font-variant-numeric: tabular-nums; }
.dato-kv strong small { font-family: var(--f-texto); font-size: 12px; color: var(--tenue); }
.dato-kv span { font-size: 11.5px; color: var(--tenue); }
.modal-caja p.dato-frase { margin: 0; color: var(--tinta); font-size: 13.5px; }
.dato-frase strong { color: var(--haz); font-weight: 500; }
.dato-sub { margin: 6px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); font-weight: 500; }
.dato-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dato-barras li { display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px; font-size: 12.5px; }
.dato-barras.barras-anchas li { grid-template-columns: 1fr; gap: 3px; }
.dato-barras.barras-anchas .db-n { position: absolute; right: 0; }
.dato-barras.barras-anchas li { position: relative; padding-right: 34px; }
.db-et { color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-bar { height: 10px; background: var(--panel); border-radius: 999px; overflow: hidden; }
.db-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ovni), var(--haz)); border-radius: 999px; min-width: 4px; }
.db-bar i.neg { background: var(--peligro); }
.db-n { font-family: var(--f-mono); text-align: right; }
.dato-lista { display: grid; gap: 6px; }
.dato-fila { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel); border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; }
.dato-fila:hover, .dato-fila:focus-visible { border-color: var(--haz); }
.df-t { display: flex; flex-direction: column; min-width: 0; }
.df-t strong { font-weight: 500; font-size: 13.5px; }
.df-t span { font-size: 11.5px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.senal.resalta { animation: resalta 1.6s ease-out; }
@keyframes resalta { 0%, 30% { box-shadow: 0 0 0 3px var(--haz), 0 0 28px rgba(255,209,102,.5); } 100% { box-shadow: 0 0 0 0 transparent; } }
#radar { cursor: default; }
.pop-btn { margin-top: 6px; background: var(--haz); color: var(--haz-tinta); border: 0; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
@media (max-width: 360px) { .pestana { font-size: 10px; } }

/* ───── buzón de sugerencias ───── */
.buzon-zona { display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: var(--r); border: 1px solid #5a3a1c;
  background: radial-gradient(120% 90% at 20% 10%, rgba(201,138,75,.16), transparent 60%), linear-gradient(180deg, #221a2c, #1b1530); margin-bottom: 8px; }
.buzon { position: relative; background: none; border: 0; padding: 0; width: 128px; height: 147px; }
.buzon-svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); transition: transform .2s; }
.buzon:active .buzon-svg { transform: scale(.96) rotate(-1deg); }
.bz-bandera { transform-box: view-box; transform-origin: 161px 150px; transform: rotate(90deg); transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.buzon.con-carta .bz-bandera, .env-buzon.arriba .bz-bandera { transform: rotate(0deg); }
.buzon.con-carta .buzon-svg { animation: bz-llama 3.2s ease-in-out infinite; }
@keyframes bz-llama { 0%, 82%, 100% { transform: rotate(0); } 86% { transform: rotate(-3deg); } 90% { transform: rotate(3deg); } 94% { transform: rotate(-1.5deg); } }
.buzon-badge { position: absolute; top: 18px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--avist); color: #3a0b20; font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 3px #1b1530; }
.buzon-lado { display: grid; gap: 8px; justify-items: start; }
.buzon-txt { margin: 0; font-size: 13px; color: var(--tenue); }
.buzon-txt strong { color: var(--avist); font-weight: 600; }

/* papel de carta */
.carta-papel { position: relative; width: 100%; max-width: 380px; max-height: calc(100% - 20px); overflow-y: auto; padding: 20px 18px 16px 34px; border-radius: 6px; color: #3a2a1a;
  background: linear-gradient(90deg, transparent 24px, rgba(214,52,47,.45) 24px, rgba(214,52,47,.45) 26px, transparent 26px), #f6ecd6;
  box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 40px rgba(160,110,50,.18); animation: carta-entra .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes carta-entra { from { transform: translateY(30px) rotate(-3deg); opacity: 0; } }
.carta-cab { margin: 0 0 8px; font-family: "Caveat", "Segoe Script", cursive; font-size: 26px; font-weight: 700; color: #6b2d1a; }
.carta-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.carta-tipo { border: 1px solid #b89a6a; background: transparent; color: #6b4a2a; border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.carta-tipo.activo { background: #6b2d1a; color: #f6ecd6; border-color: #6b2d1a; }
.carta-papel textarea { width: 100%; border: 0; resize: vertical; outline: none; background: repeating-linear-gradient(transparent 0 29px, rgba(70,110,160,.35) 29px 30px); line-height: 30px; padding: 0 2px;
  font-family: "Caveat", "Segoe Script", cursive; font-size: 23px; color: #1f2a55; min-height: 180px; }
.carta-papel textarea::placeholder { color: rgba(60,60,90,.45); }
.carta-firma { margin: 6px 0 12px; text-align: right; font-family: "Caveat", cursive; font-size: 22px; color: #6b2d1a; }
.carta-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.carta-papel .btn-sec { color: #6b4a2a; border-color: #b89a6a; background: transparent; }

/* lista de cartas */
.cartas-pest { margin: 4px 0 10px; }
.cartas-lista { display: grid; gap: 10px; margin-bottom: 12px; }
.carta-item { background: #f6ecd6; color: #3a2a1a; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.carta-sobre { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; text-align: left; padding: 10px 12px; color: inherit; }
.carta-sobre svg { width: 54px; height: 36px; flex: none; }
.carta-sobre .cs-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.carta-sobre .cs-t strong { font-size: 14px; }
.carta-sobre .cs-t span { font-size: 12px; color: #7a6248; }
.carta-item.nueva .carta-sobre svg { animation: bz-llama 2.4s ease-in-out infinite; }
.carta-nueva-eti { background: #b3202a; color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.carta-cuerpo { display: none; padding: 4px 16px 12px 30px; background: linear-gradient(90deg, transparent 18px, rgba(214,52,47,.4) 18px, rgba(214,52,47,.4) 20px, transparent 20px); }
.carta-item.abierta .carta-cuerpo { display: block; animation: carta-abre .3s ease-out; }
@keyframes carta-abre { from { opacity: 0; transform: translateY(-6px); } }
.carta-cuerpo p { margin: 0; font-family: "Caveat", cursive; font-size: 22px; line-height: 1.25; color: #1f2a55; white-space: pre-wrap; }
.carta-cuerpo .cc-firma { text-align: right; color: #6b2d1a; margin-top: 4px; }
.carta-acc { display: flex; gap: 12px; justify-content: flex-end; margin-top: 8px; }
.carta-acc button { background: none; border: 0; color: #6b2d1a; font-size: 12.5px; text-decoration: underline; padding: 4px; }
.carta-estado { font-size: 11.5px; color: #2d7a3a; font-weight: 600; }
.carta-estado.sin { color: #8a6a3a; }

/* animación de envío */
.envio { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 70%, rgba(201,138,75,.22), transparent 70%), rgba(8,7,20,.94); animation: entrar .25s ease-out; }
.env-escena { position: relative; width: 260px; height: 470px; flex: none; }
.env-buzon { position: absolute; left: 0; top: 190px; width: 260px; height: 299px; }
.env-papel { position: absolute; left: 50%; top: 10px; width: 190px; height: 200px; margin-left: -95px; padding: 14px 14px 10px 26px; text-align: left; color: #1f2a55; border-radius: 4px; overflow: hidden; z-index: 3;
  background: linear-gradient(90deg, transparent 16px, rgba(214,52,47,.45) 16px, rgba(214,52,47,.45) 18px, transparent 18px), repeating-linear-gradient(#f6ecd6 0 23px, rgba(70,110,160,.3) 23px 24px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45); transform-origin: 50% 0; animation: env-papel 1.25s ease-in-out forwards; }
.env-papel p { margin: 0; font-family: "Caveat", cursive; font-size: 19px; line-height: 24px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.env-firma { position: absolute; right: 12px; bottom: 6px; font-family: "Caveat", cursive; font-size: 18px; color: #6b2d1a; }
@keyframes env-papel { 0% { transform: translateY(-40px) rotate(-4deg); opacity: 0; } 18% { transform: none; opacity: 1; } 55% { transform: scaleY(1); } 80% { transform: translateY(30px) scaleY(.48) scaleX(.82); opacity: 1; } 100% { transform: translateY(40px) scaleY(.42) scaleX(.8); opacity: 0; } }
.env-sobre { position: absolute; left: 50%; top: 60px; width: 150px; height: 100px; margin-left: -75px; z-index: 4; opacity: 0; animation: env-sobre 2.4s ease-in-out .95s forwards; }
@keyframes env-sobre {
  0% { opacity: 0; transform: scale(.8); clip-path: inset(0 0 0 0); }
  12% { opacity: 1; transform: scale(1.06) rotate(-3deg); }
  22% { transform: scale(1) rotate(0); }
  40% { transform: translateY(-14px) rotate(4deg); }
  70% { transform: translateY(179px) scale(.6) rotate(0); clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: translateY(239px) scale(.6); clip-path: inset(0 0 100% 0); }
}
.env-buzon.tiembla { animation: env-tiembla .5s ease-in-out; }
@keyframes env-tiembla { 20% { transform: rotate(-3deg) translateY(2px); } 45% { transform: rotate(3deg); } 70% { transform: rotate(-1.5deg); } }
.env-chispas i { position: absolute; left: 50%; top: 320px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--haz); opacity: 0; }
.env-chispas.salta i { animation: env-chispa .9s ease-out forwards; }
.env-chispas i:nth-child(1) { --dx: -80px; --dy: -60px; } .env-chispas i:nth-child(2) { --dx: 80px; --dy: -70px; background: var(--avist); }
.env-chispas i:nth-child(3) { --dx: -100px; --dy: 10px; background: var(--ovni); } .env-chispas i:nth-child(4) { --dx: 100px; --dy: 0; }
.env-chispas i:nth-child(5) { --dx: -30px; --dy: -110px; background: var(--avist); } .env-chispas i:nth-child(6) { --dx: 40px; --dy: -100px; background: var(--ovni); }
@keyframes env-chispa { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.env-titulo, .env-sub, #env-cerrar { opacity: 0; animation: aparecer .4s 3.6s forwards; }
.env-titulo { margin: 0; font-family: var(--f-display); font-size: 22px; color: var(--haz); }
.env-sub { margin: 0 0 8px; color: var(--tenue); font-size: 14px; max-width: 300px; }
@media (max-height: 700px) { .env-escena { transform: scale(.82); margin: -40px 0; } }

/* ───── protocolo de contacto ───── */
.mini-ayuda { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 3px; }
.pendiente.debo { border-color: var(--ovni); }
.pendiente.espera { border-color: var(--linea); border-style: dashed; }
.pendiente .conf-botones .mini-ayuda { margin: 0; flex: 1 1 100%; }
.contacto-modo { margin-bottom: 8px; }
.contacto-modo .modo-op { font-size: 13px; }
.favor em { white-space: nowrap; }
.of-fila.rechazada, .of-fila.retirada { opacity: .6; }
.of-fila.ok .of-n { color: var(--ovni); }

/* ───── rango en acción ───── */
.rango-caja { cursor: pointer; transition: border-color .2s, transform .15s; }
.rango-caja:hover, .rango-caja:focus-visible { border-color: var(--haz); }
.rango-caja:active { transform: scale(.98); }
.rango-toca { margin: 6px 0 0; font-size: 11.5px; color: var(--haz); opacity: .8; letter-spacing: .04em; }
.rango-anim { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; text-align: center; overflow: hidden;
  background: radial-gradient(80% 55% at 50% 45%, #2a2470, #08071a 75%); animation: entrar .25s ease-out; }
.ra-eti { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); }
.ra-nombre { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 24px; color: var(--haz); animation: ra-titulo .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes ra-titulo { from { transform: scale(.4); opacity: 0; } }
.ra-frase { margin: 4px 0 0; max-width: 320px; font-size: 15px; }
.ra-sig { margin: 0 0 10px; font-size: 12.5px; color: var(--tenue); }
.ra-escena { position: relative; width: 300px; height: 250px; flex: none; cursor: pointer; }
.ra-caja { position: absolute; width: 110px; height: 88px; left: 95px; top: 80px; }
.ra-nave { width: 100%; height: 100%; display: block; overflow: visible; }

/* 0 · cadetes: saltitos con la L entre conos */
.ra-suelo { position: absolute; left: 0; right: 0; bottom: 30px; height: 2px; background: repeating-linear-gradient(90deg, var(--tenue) 0 14px, transparent 14px 26px); opacity: .5; }
.ra-cono { position: absolute; bottom: 32px; width: 0; height: 0; border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 26px solid #ff8a3d; }
.ra-cono::after { content: ""; position: absolute; left: -7px; top: 10px; width: 14px; height: 5px; background: #fff; }
.ra-cono.c1 { left: 40px; } .ra-cono.c2 { left: 140px; } .ra-cono.c3 { left: 240px; }
.ra-salta { width: 80px; height: 64px; top: 140px; left: -90px; animation: ra-salta 3.6s ease-in-out infinite; }
@keyframes ra-salta {
  0% { transform: translate(0, 0); } 10% { transform: translate(60px, -60px) rotate(-8deg); } 20% { transform: translate(110px, 0) rotate(4deg); }
  33% { transform: translate(160px, -55px) rotate(-6deg); } 45% { transform: translate(210px, 0) rotate(5deg); }
  58% { transform: translate(260px, -50px) rotate(-6deg); } 70% { transform: translate(320px, 0); } 100% { transform: translate(480px, -20px); } }
.ra-L { position: absolute; right: -6px; top: 18px; width: 20px; height: 20px; background: #fff; border: 2px solid #d6342f; color: #d6342f; font: 700 13px/16px var(--f-texto); text-align: center; border-radius: 3px; }

/* 1 · pilotos de pruebas: tumbos, choque y mareo */
.ra-tumbos { animation: ra-tumbos 3.4s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes ra-tumbos {
  0% { transform: translate(-170px, -40px) rotate(10deg); }
  12% { transform: translate(-90px, 30px) rotate(-25deg); }
  24% { transform: translate(-30px, -50px) rotate(30deg); }
  36% { transform: translate(30px, 20px) rotate(-200deg); }
  44% { transform: translate(70px, -30px) rotate(-360deg); }
  50% { transform: translate(92px, -52px) rotate(-370deg); }
  54% { transform: translate(70px, -20px) rotate(-340deg) scale(.95); }
  70% { transform: translate(10px, 50px) rotate(-385deg); }
  80%, 92% { transform: translate(0, 62px) rotate(-372deg); }
  86% { transform: translate(0, 62px) rotate(-348deg); }
  100% { transform: translate(0, 62px) rotate(-360deg); } }
.ra-golpe { position: absolute; right: 22px; top: 10px; font-size: 46px; color: var(--haz); text-shadow: 0 0 18px rgba(255,209,102,.8); animation: ra-golpe 3.4s infinite; }
@keyframes ra-golpe { 0%, 48% { transform: none; } 51% { transform: translate(8px, -6px) rotate(20deg) scale(1.3); } 56% { transform: translate(-4px, 3px) rotate(-12deg); } 62%, 100% { transform: none; } }
.ra-pum { position: absolute; right: 52px; top: 40px; font: 400 18px var(--f-display); color: var(--avist); opacity: 0; animation: ra-pum 3.4s infinite; }
@keyframes ra-pum { 0%, 49% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.2) rotate(-8deg); } 64% { opacity: 1; transform: scale(1) rotate(-8deg); } 70%, 100% { opacity: 0; } }
.ra-humo i { position: absolute; left: 150px; top: 190px; width: 22px; height: 22px; border-radius: 50%; background: rgba(200,200,220,.5); opacity: 0; animation: ra-humo 3.4s infinite; }
.ra-humo i:nth-child(2) { animation-delay: .15s; left: 130px; } .ra-humo i:nth-child(3) { animation-delay: .3s; left: 165px; } .ra-humo i:nth-child(4) { animation-delay: .45s; left: 142px; }
@keyframes ra-humo { 0%, 72% { opacity: 0; transform: none; } 76% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: translateY(-60px) scale(2.2); } }
.ra-mareo { position: absolute; left: 150px; top: 112px; width: 0; height: 0; opacity: 0; animation: ra-mareo-vis 3.4s infinite; }
.ra-mareo i { position: absolute; color: var(--haz); font-style: normal; font-size: 16px; animation: ra-orbita 1s linear infinite; }
.ra-mareo i:nth-child(2) { animation-delay: -.33s; color: var(--avist); } .ra-mareo i:nth-child(3) { animation-delay: -.66s; color: var(--ovni); }
@keyframes ra-orbita { from { transform: rotate(0) translateX(34px) rotate(0) scaleY(.9); } to { transform: rotate(360deg) translateX(34px) rotate(-360deg) scaleY(.9); } }
@keyframes ra-mareo-vis { 0%, 78% { opacity: 0; } 82%, 98% { opacity: 1; } 100% { opacity: 0; } }

/* 2 · exploradores de cráteres */
.ra-luna { position: absolute; left: -40px; right: -40px; bottom: -150px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 40% 20%, #cfcde0, #8e8ca8 60%, #5d5b78); }
.ra-luna i { position: absolute; border-radius: 50%; background: rgba(60,58,90,.35); box-shadow: inset 3px 3px 0 rgba(0,0,0,.15); }
.ra-luna i:nth-child(1) { left: 60px; top: 22px; width: 40px; height: 14px; } .ra-luna i:nth-child(2) { left: 230px; top: 30px; width: 54px; height: 16px; }
.ra-luna i:nth-child(3) { left: 150px; top: 50px; width: 26px; height: 9px; } .ra-luna i:nth-child(4) { left: 300px; top: 14px; width: 30px; height: 10px; }
.ra-alunizaje { top: 104px; animation: ra-aluniza 3.2s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes ra-aluniza { 0% { transform: translateY(-190px); } 40% { transform: translateY(0); } 48% { transform: translateY(-26px); } 56% { transform: translateY(0); } 61% { transform: translateY(-8px); } 66%, 100% { transform: translateY(0); } }
.ra-polvo i { position: absolute; top: 186px; width: 16px; height: 10px; border-radius: 50%; background: #cfcde0; opacity: 0; animation: ra-polvo 3.2s infinite; }
.ra-polvo i:nth-child(1) { left: 100px; --dx: -40px; } .ra-polvo i:nth-child(2) { left: 184px; --dx: 40px; } .ra-polvo i:nth-child(3) { left: 142px; --dx: 0px; }
@keyframes ra-polvo { 0%, 38% { opacity: 0; } 42% { opacity: .9; transform: none; } 70%, 100% { opacity: 0; transform: translate(var(--dx), -22px) scale(2); } }
.ra-bandera { position: absolute; left: 222px; top: 196px; width: 3px; height: 0; background: #ddd; animation: ra-mastil 3.2s infinite; }
.ra-bandera span { position: absolute; left: 3px; top: 0; padding: 2px 6px; background: var(--avist); color: #fff; font-size: 11px; border-radius: 0 3px 3px 0; opacity: 0; animation: ra-tela 3.2s infinite; }
@keyframes ra-mastil { 0%, 62% { height: 0; top: 196px; } 74%, 100% { height: 46px; top: 150px; } }
@keyframes ra-tela { 0%, 72% { opacity: 0; transform: scaleX(0); transform-origin: left; } 80%, 100% { opacity: 1; transform: scaleX(1) skewY(-4deg); } }

/* 3 · comandantes de flota */
.ra-lider { top: 50px; animation: flotar 3s ease-in-out infinite; }
.ra-escolta { width: 56px; height: 45px; left: var(--x); top: var(--y); opacity: 0; animation: ra-escolta 3.6s ease-out infinite; }
.ra-escolta.e1 { --x: 40px; --y: 120px; --sx: -240px; --sy: 0px; } .ra-escolta.e2 { --x: 204px; --y: 120px; --sx: 240px; --sy: 0px; animation-delay: .2s; }
.ra-escolta.e3 { --x: -6px; --y: 175px; --sx: -240px; --sy: 60px; animation-delay: .4s; } .ra-escolta.e4 { --x: 250px; --y: 175px; --sx: 240px; --sy: 60px; animation-delay: .6s; }
@keyframes ra-escolta { 0% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 15% { opacity: 1; } 45%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }

/* 4 · almirantes galácticos */
.ra-saludo { animation: ra-saludo 2.4s ease-in-out infinite; }
@keyframes ra-saludo { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg) translateY(-6px); } 40% { transform: rotate(-14deg) translateY(-6px); } 55% { transform: rotate(0); } }
.ra-medalla { position: absolute; left: 50%; top: 66px; margin-left: -12px; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c4, #e5a920); color: #8a5a00; font-size: 15px; line-height: 24px; box-shadow: 0 0 12px rgba(255,209,102,.8); animation: latido 1.2s infinite; }
.ra-fuego { position: absolute; width: 0; height: 0; }
.ra-fuego.f1 { left: 50px; top: 50px; } .ra-fuego.f2 { left: 250px; top: 40px; } .ra-fuego.f3 { left: 150px; top: 20px; }
.ra-fuego i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--haz); opacity: 0; animation: ra-chispa 2.4s ease-out infinite; }
.ra-fuego.f1 i { background: var(--avist); } .ra-fuego.f2 i { background: var(--ovni); animation-delay: .6s; } .ra-fuego.f3 i { animation-delay: 1.2s; }
@keyframes ra-chispa { 0% { opacity: 1; transform: rotate(var(--a)) translateX(0); } 60% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(46px); } }

/* 5 · leyendas: hiperespacio */
.ra-warp i { position: absolute; right: 0; top: var(--y); height: 2px; width: var(--w); background: linear-gradient(90deg, transparent, #b8f5ff); border-radius: 2px; opacity: 0; animation: ra-warp .7s linear var(--d) infinite; }
@keyframes ra-warp { 0% { opacity: 0; transform: translateX(40px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(-340px); } }
.ra-hiper { animation: ra-hiper 3.4s ease-in-out infinite; }
@keyframes ra-hiper { 0%, 100% { transform: none; } 30% { transform: translateX(-10px) rotate(-3deg); } 34% { transform: translateX(6px); } 38% { transform: translateX(-6px); } 50% { transform: translateX(260px) scaleX(2.2) scaleY(.6); opacity: 0; } 51% { transform: translateX(-280px) scaleX(2.2) scaleY(.6); opacity: 0; } 70% { transform: none; opacity: 1; } }

/* 6 · mito del universo conocido */
.ra-rayos { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255,209,102,.22) 0 8deg, transparent 8deg 22deg); animation: ra-gira 12s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); }
@keyframes ra-gira { to { transform: rotate(360deg); } }
.ra-corazon { position: absolute; inset: 0; }
.ra-corazon i { position: absolute; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--avist), 0 0 4px #fff; opacity: 0; animation: ra-astro 3s ease-out var(--d) infinite; }
@keyframes ra-astro { 0% { opacity: 0; transform: scale(0); } 15%, 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
.ra-mito { width: 150px; height: 120px; left: 75px; top: 70px; animation: ra-mito 3s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(255,209,102,.7)); }
@keyframes ra-mito { 0%, 100% { transform: scale(.9); } 50% { transform: scale(1.06) translateY(-6px); } }
.ra-escena * { pointer-events: none; }
.ra-escena.r2 { overflow: hidden; border-radius: 0 0 40px 40px; }

/* ───── antena: avisos y pestañas ───── */
.avisos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 8px 0 10px; padding: 10px 12px; border-radius: 14px; border: 1px dashed var(--haz); background: rgba(255,209,102,.06); }
.avisos-barra.ok { border-style: solid; border-color: color-mix(in srgb, var(--ovni) 60%, var(--linea)); background: rgba(110,240,194,.06); }
.avisos-barra.mal { border-color: var(--peligro); background: rgba(255,107,107,.06); }
.avisos-ico { font-size: 18px; }
.avisos-estado { flex: 1 1 160px; font-size: 13px; color: var(--tinta); }
.avisos-disc { flex: 1 1 100%; display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--tenue); }
.avisos-disc input { accent-color: var(--ovni); width: 16px; height: 16px; }
.alertas-pest { margin-bottom: 4px; }
.alertas-pest span { font-size: 12px; opacity: .8; }
.fila-toggle { display: flex; justify-content: space-between; align-items: center; }
.tg { min-width: 42px; text-align: center; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--linea); color: var(--tenue); }
.tg.on { background: var(--ovni); border-color: var(--ovni); color: #062a1e; }

/* ───── novedades ───── */
.novedades-caja { border-color: var(--haz); box-shadow: 0 0 0 1px rgba(255,209,102,.25), 0 20px 50px rgba(0,0,0,.5); animation: carta-entra .4s cubic-bezier(.2,1.3,.4,1); }
.nov-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.nov-nave { width: 64px; height: 52px; flex: none; animation: flotar 3s ease-in-out infinite; }
.nov-cab h3 { margin: 0; }
.nov-eti { margin: 0 0 2px !important; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ovni) !important; }
.nov-ver { margin: 2px 0 0 !important; font-size: 12px; color: var(--tenue); }
.nov-lista { display: grid; gap: 8px; margin: 8px 0 14px; }
.nov-sub { margin: 6px 0 0 !important; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.nov-item { display: flex; gap: 12px; align-items: flex-start; background: var(--panel); border-radius: 12px; padding: 10px 12px; animation: nov-entra .4s ease-out both; }
.nov-item > span:last-child { display: flex; flex-direction: column; }
.nov-item strong { font-weight: 600; font-size: 14px; }
.nov-item span span { font-size: 12.5px; color: var(--tenue); }
.nov-ico { font-size: 22px; line-height: 1.2; }
@keyframes nov-entra { from { opacity: 0; transform: translateX(-10px); } }

/* ───── rango de la avistadora ───── */
.rango-caja .solo-ella { display: none; }
.rango-caja.de-ella .solo-nave { display: none; }
.rango-caja.de-ella .solo-ella { display: block; }
.rango-caja.de-ella { border-color: color-mix(in srgb, var(--avist) 55%, var(--linea)); }
.rango-caja.de-ella .rango-nombre { color: var(--avist); }
.rango-ella { position: relative; width: 120px; height: 104px; margin: 0 auto 4px; }
.rango-ella img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--avist); box-shadow: 0 0 22px rgba(255,143,184,.35); display: block; margin: 0 auto; animation: flotar 3.4s ease-in-out infinite; }
.rango-ella svg { position: absolute; right: -2px; bottom: -4px; width: 30px; height: 52px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); animation: ra-saluda 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ra-saluda { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } }

.ra-ella { position: absolute; width: 50px; height: 88px; left: 125px; top: 132px; overflow: visible; transform-origin: 50% 100%; }
/* 0 · mirona de azotea */
.ra-azotea { position: absolute; left: 20px; right: 20px; top: 218px; height: 14px; background: repeating-linear-gradient(90deg, #5a4a6e 0 26px, #4a3c5c 26px 28px); border-radius: 3px; }
.ra-mira { animation: ra-mira 2.6s ease-in-out infinite; }
@keyframes ra-mira { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-3px); } }
.ra-pasa { width: 70px; height: 56px; top: 92px; animation: ra-pasa 4s linear infinite; }
@keyframes ra-pasa { 0% { transform: translateX(-200px); } 100% { transform: translateX(240px); } }
.ra-duda { position: absolute; left: 170px; top: 104px; font: 400 26px var(--f-display); color: var(--avist); opacity: 0; animation: ra-duda 4s infinite; }
@keyframes ra-duda { 0%, 60% { opacity: 0; transform: scale(.4); } 68%, 92% { opacity: 1; transform: scale(1) rotate(10deg); } 100% { opacity: 0; } }
/* 1 · aprendiz: tropiezo */
.ra-tropieza { animation: ra-tropieza 3.2s ease-in-out infinite; }
@keyframes ra-tropieza {
  0% { transform: translateX(-120px) rotate(0); } 12% { transform: translateX(-90px) rotate(5deg) translateY(-4px); } 24% { transform: translateX(-60px) rotate(-5deg); }
  36% { transform: translateX(-30px) rotate(6deg) translateY(-4px); } 46% { transform: translateX(-10px) rotate(-4deg); }
  54% { transform: translateX(6px) rotate(85deg); } 60% { transform: translateX(12px) translateY(6px) rotate(92deg); }
  78% { transform: translateX(12px) translateY(6px) rotate(88deg); } 90% { transform: translateX(10px) rotate(-6deg); } 100% { transform: translateX(10px) rotate(0); } }
.ra-mareo-ella { left: 182px; top: 196px; animation-name: ra-mareo-ella; animation-duration: 3.2s; }
@keyframes ra-mareo-ella { 0%, 56% { opacity: 0; } 60%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
.ra-ups { right: 40px; top: 120px; animation-duration: 3.2s; animation-name: ra-ups; }
@keyframes ra-ups { 0%, 52% { opacity: 0; transform: scale(.4); } 58% { opacity: 1; transform: scale(1.2) rotate(-8deg); } 76% { opacity: 1; transform: scale(1) rotate(-8deg); } 82%, 100% { opacity: 0; } }
/* 2 · exploradora: colina y estrella fugaz */
.ra-colina { position: absolute; left: -30px; right: -30px; bottom: -110px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 50% 10%, #3e5a4a, #233a2e 70%); }
.ra-senala { top: 112px; animation: ra-senala 3s ease-in-out infinite; }
@keyframes ra-senala { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-12deg) translateY(-6px); } }
.ra-fugaz { position: absolute; left: 260px; top: 20px; width: 90px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-25deg); opacity: 0; animation: ra-fugaz 3s ease-in infinite; }
.ra-fugaz.f2 { animation-delay: 1.5s; top: 50px; left: 230px; }
@keyframes ra-fugaz { 0% { opacity: 0; transform: translate(0, 0) rotate(-25deg); } 10% { opacity: 1; } 45% { opacity: 0; transform: translate(-230px, 100px) rotate(-25deg); } 100% { opacity: 0; } }
/* 3 · comandante: las naves en cola */
.ra-escolta.cola { width: 50px; height: 40px; }
.ra-escolta.cola.e1 { --x: 30px; --y: 40px; } .ra-escolta.cola.e2 { --x: 220px; --y: 40px; } .ra-escolta.cola.e3 { --x: 70px; --y: 90px; } .ra-escolta.cola.e4 { --x: 180px; --y: 90px; }
.ra-manda { animation: ra-senala 1.6s ease-in-out infinite; }
/* 4 · almirante: medalla */
.ra-medalla-ella { left: 150px; top: 170px; margin-left: -12px; }
/* 5 · leyenda: flashes y fotos */
.ra-flash { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9), transparent 60%); opacity: 0; animation: ra-flash 2.4s infinite; }
@keyframes ra-flash { 0%, 8%, 100% { opacity: 0; } 4% { opacity: 1; } 50% { opacity: 0; } 54% { opacity: .8; } 60% { opacity: 0; } }
.ra-foto { position: absolute; left: 130px; top: 140px; width: 54px; height: 62px; padding: 4px 4px 14px; background: #f4f1e8; border-radius: 3px; box-shadow: 0 6px 14px rgba(0,0,0,.4); opacity: 0; animation: ra-foto 2.4s ease-out infinite; }
.ra-foto svg { width: 100%; height: 100%; background: #1b1840; display: block; }
.ra-foto.p1 { --dx: -100px; --dy: -110px; --r: -18deg; } .ra-foto.p2 { --dx: 0px; --dy: -130px; --r: 6deg; animation-delay: .8s; } .ra-foto.p3 { --dx: 100px; --dy: -100px; --r: 16deg; animation-delay: 1.6s; }
@keyframes ra-foto { 0% { opacity: 0; transform: scale(.3); } 15% { opacity: 1; } 70% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) - 20px)) rotate(var(--r)); } }
/* 6 · mito de la Tierra */
.ra-mito-ella { width: 64px; height: 112px; left: 118px; top: 118px; filter: drop-shadow(0 0 16px rgba(255,143,184,.8)); animation: ra-mito 3s ease-in-out infinite; }
.ra-escena.e2 { overflow: hidden; border-radius: 0 0 40px 40px; }

/* ───── estadísticas de los haces ───── */
.of-cab[data-haz-stats] { cursor: pointer; transition: border-color .2s, transform .15s; }
.of-cab[data-haz-stats]:hover { border-color: var(--haz); }
.of-cab[data-haz-stats]:active { transform: scale(.98); }
.of-toca { font-size: 11.5px; color: var(--haz); opacity: .85; }
.haz-bloque { background: var(--panel); border-radius: 14px; padding: 12px; display: grid; gap: 8px; border-left: 4px solid var(--ovni); }
.haz-bloque.avistadora { border-left-color: var(--avist); }
.hb-cab { display: flex; flex-direction: column; }
.hb-cab strong { font-size: 15px; }
.hb-cab span { font-size: 12px; color: var(--tenue); }
.hb-apilada { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--casco); gap: 2px; }
.hb-apilada i { display: block; height: 100%; }
.hb-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; }
.hb-cats li { display: flex; align-items: center; gap: 6px; color: var(--tenue); }
.hb-cats strong { margin-left: auto; font-family: var(--f-mono); color: var(--tinta); font-weight: 600; }
.hb-pt { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.modal-caja p.hb-tot { margin: 0; font-size: 11.5px; }
.haz-grafica { width: 100%; height: auto; display: block; background: var(--casco); border-radius: 12px; }
.haz-ejes { display: flex; justify-content: space-between; font-size: 11px; color: var(--tenue); margin-top: -4px; }
.haz-leyenda { display: flex; gap: 16px; font-size: 12.5px; }
.haz-leyenda span { display: flex; align-items: center; gap: 6px; }
.haz-leyenda i { width: 16px; height: 3px; border-radius: 2px; background: var(--ovni); }
.haz-leyenda i.avistadora { background: var(--avist); }

/* ───── Radio Andrómeda ───── */
.radio-zona { margin: 14px 0 4px; padding: 14px; border-radius: var(--r); border: 1px solid #4a3a6e; background: radial-gradient(120% 100% at 0% 0%, rgba(124,198,255,.12), transparent 60%), var(--casco); display: grid; gap: 10px; }
.rz-cab { display: flex; gap: 12px; align-items: center; }
.rz-ico { width: 66px; height: 51px; flex: none; animation: ra-saluda 3s ease-in-out infinite; transform-origin: 50% 100%; }
.rz-tit { margin: 0 0 2px; }
.rz-cab .ayuda { margin: 0; }
.rz-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.rz-ult { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rz-ult button, .rl-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: var(--panel); border: 1px solid transparent; border-radius: 12px; padding: 8px 10px; }
.rz-ult button:hover, .rl-item:hover { border-color: #7cc6ff; }
.rz-ult span { font-size: 11px; color: var(--tenue); white-space: nowrap; }
.rz-ult strong { flex: 1; min-width: 0; font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rz-ult em, .rl-item em { font-style: normal; font-size: 11.5px; color: #7cc6ff; white-space: nowrap; }
.radio-lista { display: grid; gap: 8px; margin: 10px 0; }
.rl-ico { font-size: 20px; }
.rl-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rl-t strong { font-weight: 500; font-size: 14px; }
.rl-t span { font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-item.suya { border-left: 3px solid var(--avist); } .rl-item.mia { border-left: 3px solid var(--ovni); }
.radio-frases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.radio-prev { margin-top: 8px; }
.rr-iframe { width: 100%; border: 0; border-radius: 12px; display: block; background: #111; }

.radio-recibe { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; text-align: center; overflow-y: auto;
  background: radial-gradient(80% 50% at 50% 35%, #2b2552, #08071a 75%); animation: entrar .25s ease-out; }
.rr-eti { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #7cc6ff; }
.rr-radio { position: relative; width: 240px; height: 186px; flex: none; margin-top: 46px; }
.radio-svg { width: 100%; height: 100%; overflow: visible; animation: rr-vibra .12s linear 0s 18 alternate, rr-llega .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes rr-llega { from { transform: scale(.6) translateY(40px); opacity: 0; } }
@keyframes rr-vibra { from { transform: translateX(-1.5px) rotate(-.6deg); } to { transform: translateX(1.5px) rotate(.6deg); } }
.radio-aguja { animation: rr-aguja 2.3s cubic-bezier(.5,0,.4,1) forwards; transform-box: fill-box; }
@keyframes rr-aguja { 0% { transform: translateX(0); } 30% { transform: translateX(52px); } 50% { transform: translateX(8px); } 70% { transform: translateX(40px); } 85% { transform: translateX(22px); } 100% { transform: translateX(26px); } }
.radio-perilla { transform-box: fill-box; transform-origin: 50% 100%; animation: rr-perilla 2.3s ease-in-out forwards; }
@keyframes rr-perilla { 30% { transform: rotate(120deg); } 50% { transform: rotate(20deg); } 100% { transform: rotate(80deg); } }
.radio-punta { animation: rr-punta .5s steps(2) infinite; }
@keyframes rr-punta { 50% { fill: #fff6cc; } }
.rr-ondas { position: absolute; left: 196px; top: 4px; }
.rr-ondas i { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border: 2px solid #7cc6ff; border-radius: 50%; opacity: 0; animation: rr-onda 1.6s ease-out infinite; }
.rr-ondas i:nth-child(2) { animation-delay: .5s; } .rr-ondas i:nth-child(3) { animation-delay: 1s; }
@keyframes rr-onda { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.4); } }
.rr-sintonia { margin: 0; font-family: var(--f-mono); font-size: 13px; color: var(--haz); animation: latido-txt 1s infinite; }
@keyframes latido-txt { 50% { opacity: .55; } }
.rr-contenido { width: 100%; max-width: 380px; display: grid; gap: 10px; opacity: 0; animation: aparecer .5s 2.3s forwards; }
.radio-recibe.sin-intro .rr-contenido { animation-delay: 0s; }
.radio-recibe.sin-intro .radio-svg, .radio-recibe.sin-intro .radio-aguja, .radio-recibe.sin-intro .radio-perilla { animation-duration: .01s; }
.rr-de { margin: 0; font-size: 16px; }
.rr-de strong { color: var(--avist); }
.rr-dedi { margin: 0; font-family: "Caveat", cursive; font-size: 24px; color: var(--haz); }
.rr-player { display: grid; gap: 8px; justify-items: center; }
.rr-abrir { justify-self: center; }
.rr-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.haz-caja[data-haz-stats] { cursor: pointer; transition: border-color .2s, transform .15s; }
.haz-caja[data-haz-stats]:hover { border-color: var(--haz); }
.haz-caja[data-haz-stats]:active { transform: scale(.99); }
.haz-stats-ico { font-size: 12px; }
.perfil-rango[data-haz-stats] { cursor: pointer; transition: transform .15s, box-shadow .2s; }
.perfil-rango[data-haz-stats]:active { transform: scale(.98); }
.perfil-rango[data-haz-stats]:hover { box-shadow: 0 0 0 1px var(--haz); }
.hb-titulo { display: grid; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--linea); }
.hb-titulo span { font-size: 13px; color: var(--haz); }
.hb-titulo em { font-style: normal; font-size: 11.5px; color: var(--tenue); }

/* ───── Rastros y Jimmi ───── */
.pestana span { white-space: nowrap; }
@media (max-width: 400px) { .pestana { font-size: 10px; } .pestana svg { width: 22px; height: 22px; } }
.rastros-cab { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--casco); border: 1px solid var(--linea); margin: 6px 0 10px; }
.rastros-cab.avistadora { border-color: color-mix(in srgb, var(--avist) 50%, var(--linea)); }
.rastros-cab .ayuda { margin: 2px 0 8px; }
.rc-tit { margin: 0; }
.rc-ico { width: 64px; height: 51px; flex: none; animation: flotar 3s ease-in-out infinite; }
.jimmi-foto { border-radius: 50%; object-fit: cover; border: 3px solid #c99a5b; }
.rc-jimmi { width: 64px; height: 64px; flex: none; animation: ra-saluda 2.6s ease-in-out infinite; }
#mapa-rastros { height: 300px; }
.marca-zona { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, rgba(255,143,184,.35), transparent 70%); animation: latido-rosa 1.8s infinite; }
.marca-zona svg { width: 34px; height: 27px; opacity: .85; }
.marca-zona span { position: absolute; right: 2px; top: -2px; background: var(--avist); color: #3a0b20; font: 700 12px/18px var(--f-texto); width: 18px; height: 18px; border-radius: 50%; text-align: center; }
.marca-prueba { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--casco); border: 2px solid #c99a5b; font-size: 17px; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.marca-prueba.ok { border-color: var(--ovni); }
.rastro-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--casco); border: 1px solid var(--linea); border-radius: 14px; padding: 8px 10px; }
.rastro-item.buscar { border-color: color-mix(in srgb, var(--avist) 55%, var(--linea)); }
.rastro-item img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }
.ri-ico { width: 52px; height: 52px; display: grid; place-items: center; font-size: 24px; background: var(--panel); border-radius: 10px; flex: none; }
.ri-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ri-t strong { font-weight: 500; font-size: 14px; }
.ri-t span { font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ri-btns { display: flex; gap: 6px; flex: none; }
.rastro-gps { margin: 0 0 10px; font-size: 13px; color: var(--tenue); }
.rastro-gps.ok { color: var(--ovni); } .rastro-gps.mal { color: var(--peligro); }
.rastro-foto { display: grid; place-items: center; min-height: 120px; border: 2px dashed var(--linea); border-radius: 14px; cursor: pointer; overflow: hidden; color: var(--tenue); text-align: center; padding: 10px; }
.rastro-foto img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 10px; }

/* Jimmi animado */
.jimmi { overflow: visible; }
.jm-cola { transform-box: fill-box; transform-origin: 0% 90%; animation: jm-cola .35s ease-in-out infinite alternate; }
@keyframes jm-cola { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.jm-lengua { transform-box: fill-box; transform-origin: 50% 0; animation: jm-jadeo .4s ease-in-out infinite alternate; }
@keyframes jm-jadeo { to { transform: scaleY(1.25); } }
.jm-cabeza { transform-box: fill-box; transform-origin: 50% 90%; }
.olfatea .jm-cabeza { animation: jm-olfatea .5s ease-in-out infinite; }
@keyframes jm-olfatea { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-8deg) translateY(10px); } }
.caliente .jm-cabeza { animation: jm-salta .45s ease-in-out infinite; } .caliente .jm-cola { animation-duration: .15s; }
@keyframes jm-salta { 50% { transform: translateY(-6px) rotate(4deg); } }
.frio .jm-cola { animation-duration: 1.2s; } .frio .jm-lengua { animation: none; }
.triste .jm-cola { animation: none; transform: rotate(30deg); } .triste .jm-cabeza { transform: rotate(-6deg) translateY(6px); }
.jimmi-pista-caja { max-width: 360px; }
.jp-fila { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.jp-perro { width: 110px; flex: none; }
.jp-svg { width: 110px; height: 100px; }
.jp-bocadillo { position: relative; background: #f6ecd6; color: #2b1f12; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.jp-bocadillo::before { content: ""; position: absolute; left: -8px; top: 22px; border: 8px solid transparent; border-right-color: #f6ecd6; border-left: 0; }
.jp-bocadillo strong { font-family: var(--f-display); font-weight: 400; font-size: 16px; color: #6b2d1a; }
.jp-bocadillo span { font-size: 13px; }

/* escena de hallazgo */
.hallazgo { position: fixed; inset: 0; z-index: 3300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 18px; text-align: center; overflow-y: auto;
  background: radial-gradient(80% 50% at 50% 35%, #2b3a2c, #08071a 75%); animation: entrar .25s ease-out; }
.hz-eti { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #c99a5b; }
.hz-escena { position: relative; width: 300px; height: 200px; flex: none; overflow: hidden; }
.hz-suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; background: linear-gradient(#5a4128, #3a2a1a); border-radius: 50% 50% 0 0 / 20px 20px 0 0; }
.hz-monticulo { position: absolute; left: 182px; bottom: 34px; width: 70px; height: 22px; background: #6b4c2e; border-radius: 50% 50% 0 0; animation: hz-cava 3.6s forwards; }
@keyframes hz-cava { 0%, 60% { transform: none; } 85%, 100% { transform: scaleY(.3) translateY(10px); opacity: .7; } }
.hz-capsula { position: absolute; left: 192px; bottom: 30px; width: 54px; height: 44px; opacity: 0; filter: drop-shadow(0 0 14px rgba(255,209,102,.9)); animation: hz-sale .8s 3.1s cubic-bezier(.2,1.6,.4,1) forwards; }
.hz-capsula svg { width: 100%; height: 100%; }
@keyframes hz-sale { from { opacity: 0; transform: translateY(30px) scale(.5) rotate(-20deg); } to { opacity: 1; transform: translateY(-46px) scale(1.1) rotate(0); } }
.hz-jimmi { position: absolute; left: 0; bottom: 18px; width: 120px; height: 110px; animation: hz-corre 1.2s ease-out forwards; }
@keyframes hz-corre { from { transform: translateX(-150px); } to { transform: translateX(80px); } }
.hz-jimmi .jm-pata.p1 { animation: hz-pata .18s linear 7 alternate; } .hz-jimmi .jm-pata.p2 { animation: hz-pata .18s linear .09s 7 alternate; }
@keyframes hz-pata { to { transform: translateY(-5px) rotate(10deg); } }
.hz-jimmi .jm-cabeza { animation: jm-olfatea .5s ease-in-out 1.2s 4, jm-salta .4s ease-in-out 3.3s infinite; }
.hz-olfato i { position: absolute; left: 150px; bottom: 60px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #f6ecd6; opacity: 0; animation: hz-snif .5s ease-out infinite; }
.hz-olfato { animation: hz-oculta 3.2s steps(1) forwards; }
.hz-olfato i:nth-child(2) { animation-delay: .17s; left: 158px; } .hz-olfato i:nth-child(3) { animation-delay: .34s; left: 166px; }
@keyframes hz-snif { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -16px) scale(1.4); } }
@keyframes hz-oculta { 0%, 37% { visibility: hidden; } 38%, 99% { visibility: visible; } 100% { visibility: hidden; } }
.hz-tierra i { position: absolute; left: 200px; bottom: 44px; width: 8px; height: 8px; border-radius: 50%; background: #8a6440; opacity: 0; animation: hz-tierra .5s ease-out 2.2s 2; }
.hz-tierra i:nth-child(2) { --dx: -30px; animation-delay: 2.3s; } .hz-tierra i:nth-child(3) { --dx: 25px; animation-delay: 2.4s; } .hz-tierra i:nth-child(4) { --dx: -15px; animation-delay: 2.55s; } .hz-tierra i:nth-child(5) { --dx: 35px; animation-delay: 2.65s; } .hz-tierra i:nth-child(6) { --dx: -40px; animation-delay: 2.75s; }
@keyframes hz-tierra { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--dx, 15px), -40px); } }
.hz-guau { position: absolute; left: 70px; top: 30px; font: 400 22px var(--f-display); color: var(--haz); opacity: 0; animation: hz-guau .6s 3.3s cubic-bezier(.2,1.6,.4,1) forwards; }
@keyframes hz-guau { from { opacity: 0; transform: scale(.3) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(-8deg); } }
.hz-contenido { display: grid; gap: 8px; justify-items: center; width: 100%; max-width: 360px; opacity: 0; animation: aparecer .5s 3.8s forwards; }
.hallazgo.sin-intro .hz-escena { display: none; }
.hallazgo.sin-intro .hz-contenido { animation-delay: 0s; }
.hz-titulo { margin: 0; font-family: var(--f-display); font-size: 20px; color: var(--haz); }
.hz-foto img { width: 100%; max-width: 320px; max-height: 300px; object-fit: cover; border-radius: 6px; border: 8px solid #f4f1e8; border-bottom-width: 26px; box-shadow: 0 10px 26px rgba(0,0,0,.5); transform: rotate(-2deg); }
.hz-sinfoto { font-size: 60px; }
.hz-pista { margin: 0; font-family: "Caveat", cursive; font-size: 22px; color: #f6ecd6; }
.hz-puntos { margin: 0; font-size: 13px; color: var(--ovni); }

/* ── Jimmi: caricatura, ficha y rango ── */
.jimmi-cara { display: block; border-radius: 50%; object-fit: cover; border: 3px solid #c99a5b; }
.rc-jimmi { width: 64px; height: 64px; }
.jimmi-ficha { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; padding: 12px 14px; border-radius: var(--r); background: linear-gradient(135deg, color-mix(in srgb, #c99a5b 18%, var(--casco)), var(--casco)); border: 1px solid color-mix(in srgb, #c99a5b 55%, var(--linea)); cursor: pointer; }
.jimmi-ficha:active { transform: scale(.98); }
.jf-cara { width: 62px; height: 62px; flex: none; animation: ra-saluda 2.6s ease-in-out infinite; }
.jf-t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.jf-eti { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #c99a5b; }
.jf-t strong { font-family: var(--f-display); font-weight: 400; font-size: 18px; }
.jf-barra { margin: 2px 0; } .jf-barra .barra-relleno { background: linear-gradient(90deg, #c99a5b, #f3d9a4); }
.jf-sig { font-size: 12px; color: var(--tenue); }
.jf-ico { font-size: 20px; opacity: .7; }
.rc-jrango { margin: 0 0 8px; padding: 6px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, #c99a5b 60%, var(--linea)); background: color-mix(in srgb, #c99a5b 14%, transparent); color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.rc-jrango strong { color: #f3d9a4; font-weight: 500; }
.jr-escena { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: linear-gradient(#1b2a4a, #2d3f63 70%); margin-bottom: 10px; }
.jr-suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: #3e5b3a; }
.jr-perro { position: absolute; left: 50%; bottom: 14px; width: 120px; height: 110px; transform: translateX(-50%); }
.jr-escena.n0 .jr-perro { animation: jr-gira 1.6s linear infinite; transform-origin: 50% 80%; }
@keyframes jr-gira { from { transform: translateX(-50%) rotate(0); } to { transform: translateX(-50%) rotate(360deg); } }
.jr-huellas { position: absolute; left: 6%; right: 6%; bottom: 8px; display: flex; justify-content: space-between; }
.jr-huellas i { font-style: normal; font-size: 13px; opacity: 0; animation: jr-huella 2.4s calc(var(--k) * .3s) infinite; }
.jr-escena.n0 .jr-huellas { display: none; }
@keyframes jr-huella { 10%, 60% { opacity: .85; } 100% { opacity: 0; } }
.jr-olfato { position: absolute; left: 50%; bottom: 40px; width: calc(60px + var(--r) * 220px); aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(243,217,164,.6); transform: translate(-50%, 50%); animation: jr-onda 2s ease-out infinite; }
@keyframes jr-onda { from { opacity: .9; transform: translate(-50%, 50%) scale(.3); } to { opacity: 0; transform: translate(-50%, 50%) scale(1); } }
.jr-nave { position: absolute; top: 10px; left: 0; width: 100%; display: flex; justify-content: center; gap: 4px; }
.jr-nave svg { width: 54px; height: 43px; animation: flotar 2.4s ease-in-out infinite; }
.jr-frase { margin: 0 0 6px; font-family: "Caveat", cursive; font-size: 20px; text-align: center; color: #f3d9a4; }
.jr-lista { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.jr-fila { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--linea); opacity: .65; }
.jr-fila.hecho { opacity: .85; } .jr-fila.actual { opacity: 1; border-color: #c99a5b; background: color-mix(in srgb, #c99a5b 14%, transparent); }
.jr-fila span:last-child { display: flex; flex-direction: column; }
.jr-fila small { font-size: 12px; color: var(--tenue); }
.jr-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel); font-size: 12px; }
.confuso .jm-cabeza { animation: jr-duda 1.4s ease-in-out infinite; }
@keyframes jr-duda { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
/* rastro de olor (dirección) */
.jp-olor { position: relative; width: 150px; height: 150px; margin: 0 auto 12px; border-radius: 50%; background: radial-gradient(circle, rgba(201,154,91,.18), transparent 70%); border: 1px dashed rgba(201,154,91,.5); }
.jp-n { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--tenue); }
.jp-olor-rot { position: absolute; inset: 0; transform: rotate(var(--g)); }
.jp-olor-rot i { position: absolute; left: 50%; top: calc(72% - var(--k) * 12%); font-style: normal; font-size: 15px; transform: translateX(calc(-50% + var(--x))); opacity: 0; animation: jr-huella 1.8s calc(var(--k) * .25s) infinite; }
.jp-olor-rot b { position: absolute; left: 50%; top: 4%; transform: translateX(-50%) rotate(-90deg); color: #f3d9a4; font-size: 20px; }
/* plazos */
.rp-tit { margin: 12px 0 6px; font-size: 13px; }
.rastro-plazos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rp-op { display: flex; gap: 6px; align-items: flex-start; padding: 8px; border-radius: 12px; border: 1px solid var(--linea); cursor: pointer; }
.rp-op:has(input:checked) { border-color: #c99a5b; background: color-mix(in srgb, #c99a5b 14%, transparent); }
.rp-op.off { opacity: .45; cursor: not-allowed; }
.rp-op span { display: flex; flex-direction: column; } .rp-op strong { font-weight: 500; font-size: 13px; } .rp-op small { font-size: 11px; color: var(--tenue); }
.ri-plazo { font-style: normal; font-size: 12px; color: #f3d9a4; } .ri-plazo.urge { color: var(--peligro); }
.ri-mal { color: var(--peligro); }
.rastro-item.cad { border-color: color-mix(in srgb, #c99a5b 45%, var(--linea)); }
.marca-prueba.cad { border-color: #8a8a8a; }
.hz-sube { margin: 0; padding: 6px 12px; border-radius: 999px; background: rgba(243,217,164,.18); color: #f3d9a4; font-weight: 500; }