@font-face { font-family: "Orbitron"; src: url("/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
:root {
  --fondo: #03080d; --panel: #07141f; --panel-2: rgba(10, 28, 40, .72); --borde: rgba(34, 211, 238, .16); --borde-f: rgba(34, 211, 238, .45);
  --cian: #22d3ee; --cian-f: #00e5ff; --texto: #e6f6fb; --sub: #7d9aa8; --rojo: #f87171; --rojo-f: #ef4444; --oro: #fbbf24; --verde: #4ade80;
  --hud: "Orbitron", "Segoe UI", system-ui, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --abajo: env(safe-area-inset-bottom, 0px); --arriba: env(safe-area-inset-top, 0px);
  --letra: 15.5px;
}
body.letra-grande { --letra: 18px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; }
/* Fondo: resplandor cian arriba + rejilla tenue */
body { background:
  radial-gradient(640px 420px at 50% 0%, rgba(0, 229, 255, .10), transparent 70%),
  linear-gradient(rgba(34, 211, 238, .035) 1px, transparent 1px) 0 0 / 34px 34px,
  linear-gradient(90deg, rgba(34, 211, 238, .035) 1px, transparent 1px) 0 0 / 34px 34px,
  var(--fondo); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:focus-visible, textarea:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--cian-f); outline-offset: 2px; }

.vista { height: 100dvh; display: flex; flex-direction: column; }
.centro { align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; }
.centro p { margin: 0; color: var(--sub); line-height: 1.6; max-width: 340px; }
.error { color: var(--rojo) !important; }

/* Marca y logo (el fondo negro del logo se funde con la interfaz: mezcla «screen») */
.marca { margin: 0; font-family: var(--hud); font-size: 17px; font-weight: 700; letter-spacing: .12em; color: var(--cian);
  text-shadow: 0 0 14px rgba(0, 229, 255, .4); }
.centro .marca { font-size: 24px; }
.logo { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: block;
  box-shadow: 0 0 16px rgba(0, 229, 255, .35); }
.logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); mix-blend-mode: screen; display: block; }
.logo.grande { width: 120px; height: 120px; box-shadow: 0 0 40px rgba(0, 229, 255, .3); }
.bienvenida .logo.grande { width: 92px; height: 92px; }
body[data-estado="ASLEEP"] .cab .logo, body[data-estado="OFF"] .cab .logo { opacity: .5; }

/* Cabecera */
.cab { display: flex; align-items: center; justify-content: space-between; padding: calc(8px + var(--arriba)) 14px 8px;
  border-bottom: 1px solid var(--borde); background: linear-gradient(180deg, rgba(0, 229, 255, .05), transparent); }
.cab-marca { display: flex; align-items: center; gap: 11px; }
.cab-acc { display: flex; gap: 8px; }
.estado { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: var(--sub); }
.estado b { width: 7px; height: 7px; border-radius: 50%; background: #475569; }
.estado.on b { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
.estado.espera b { background: var(--oro); }
.ico { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borde-f); background: rgba(0, 229, 255, .06); color: var(--cian);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset 0 0 12px rgba(0, 229, 255, .08); }
.ico svg { width: 19px; height: 19px; }

.panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Botones generales */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--borde-f); background: rgba(0, 229, 255, .07); color: var(--texto); font-size: 14px; font-weight: 600; cursor: pointer;
  text-decoration: none; }
.boton svg { width: 17px; height: 17px; color: var(--cian); }
.boton.primario { background: var(--cian-f); color: #021016; border-color: transparent; }
.boton.activo { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .55); }
.boton.activo svg { color: var(--rojo); }

/* ============================================================ MODO VOZ */
.voz { align-items: center; padding: 10px 18px 0; overflow: hidden; gap: 6px; }
.voz-top { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }

/* Reloj HUD compacto */
.reloj { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.reloj-hora { font-family: var(--hud); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: #f2fdff; text-shadow: 0 0 18px rgba(0, 229, 255, .45); display: inline-flex; align-items: baseline; }
.reloj-hora .sep { font-style: normal; margin: 0 2px; color: var(--cian); animation: latido 2s steps(1) infinite; }
@keyframes latido { 50% { opacity: .25; } }
.reloj-pie { display: flex; align-items: center; gap: 8px; font-family: var(--hud); font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sub); }
.reloj-pie b { width: 4px; height: 4px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 6px var(--cian); }

/* Barra de sesión (como una llamada en curso) */
.sesion { display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px; border-radius: 15px;
  border: 1px solid rgba(74, 222, 128, .4); background: rgba(34, 197, 94, .08); font-size: 13px; color: #bbf7d0; }
.sesion b { font-family: var(--hud); font-size: 12px; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: .06em; }
.sesion-punto { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulso 1.6s ease-in-out infinite; }
.sesion.mudo { border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); color: #fde68a; }
.sesion.mudo .sesion-punto { background: var(--oro); box-shadow: 0 0 8px var(--oro); animation: none; }
@keyframes pulso { 50% { opacity: .35; } }

/* Escena: lienzo de ondas + núcleo (el logo es el botón de hablar) */
.escena { position: relative; width: min(74vw, 300px, 38dvh); aspect-ratio: 1; margin: auto 0; flex-shrink: 1; min-height: 120px; display: grid; place-items: center;
  transition: width .35s ease; }
body.con-tarjeta .escena { width: min(50vw, 200px, 26dvh); }
.escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.orbe { --nivel: 0; position: relative; width: 58%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--fondo); overflow: hidden;
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 calc(30px + var(--nivel) * 50px) rgba(0, 229, 255, calc(.35 + var(--nivel) * .5));
  transform: scale(calc(1 + var(--nivel) * .08)); transition: transform .08s linear, opacity .3s; animation: respirar 4.5s ease-in-out infinite; }
.orbe img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); mix-blend-mode: screen; pointer-events: none; display: block; }
.orbe:active { transform: scale(.96); }
@keyframes respirar { 50% { box-shadow: 0 0 46px rgba(0, 229, 255, .55); } }
.orbe.activo, body[data-estado="SPEAKING"] .orbe { animation: none; }
body.mic-mudo .orbe { opacity: .6; filter: saturate(.4); }
body[data-estado="ASLEEP"] .orbe, body[data-estado="OFF"] .orbe, body[data-estado="CONECTANDO"] .orbe { opacity: .45; animation: none; }

.voz-estado { margin: 0; text-align: center; font-size: 13.5px; color: var(--sub); min-height: 18px; transition: color .2s; flex-shrink: 0; }
body.escuchando .voz-estado { color: var(--cian); }

/* Lo que JARVIS está haciendo («Consultando el clima…») */
.trabajo { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: 14px; flex-shrink: 0;
  border: 1px solid var(--borde-f); background: rgba(0, 229, 255, .07); font-size: 13px; color: var(--cian-f); }
.trabajo i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(0, 229, 255, .25); border-top-color: var(--cian-f); animation: giro .8s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* Transcripción */
.transcripcion { width: 100%; max-width: 440px; max-height: 21dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); padding-top: 10px; }
body.sin-subs .transcripcion { display: none; }
.tr-linea { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; }
.tr-quien { font-family: var(--hud); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--sub); text-align: right; padding-top: 3px; }
.tr-linea p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.tr-linea.usuario p { font-size: calc(var(--letra) - 1.5px); color: #b6cad3; }
.tr-linea.jarvis .tr-quien { color: var(--cian); }
.tr-linea.jarvis p { font-size: calc(var(--letra) + .5px); color: var(--texto); }
.transcripcion.responde .tr-linea.usuario { opacity: .7; }

/* Tarjeta bajo el núcleo */
.escenario { position: relative; width: 100%; max-width: 440px; flex-shrink: 0; }
.escenario.entra { animation: subir .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes subir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.escenario .tj { max-height: 30dvh; overflow: hidden; }
.escenario-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); color: #fff; cursor: pointer; z-index: 2; }
.escenario-x svg { width: 13px; height: 13px; }

/* Controles (dock) */
.dock { width: 100%; max-width: 440px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; padding: 8px 6px 10px; flex-shrink: 0; }
.dock-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--texto); }
.dock-btn .dock-ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--borde-f);
  background: rgba(7, 20, 31, .9); box-shadow: inset 0 0 14px rgba(0, 229, 255, .08); transition: transform .12s, background .2s, border-color .2s; }
.dock-btn .dock-ico svg { width: 22px; height: 22px; }
.dock-btn.medio .dock-ico { width: 66px; height: 66px; }
.dock-btn.medio .dock-ico svg { width: 26px; height: 26px; }
.dock-txt { font-size: 12px; font-weight: 600; color: var(--sub); letter-spacing: .02em; }
.dock-btn:active .dock-ico { transform: scale(.93); }
.dock-btn:disabled { cursor: default; opacity: .38; }
.dock-btn.primario .dock-ico { background: radial-gradient(circle at 35% 30%, #39ecff, #0891b2); color: #021016; border-color: transparent;
  box-shadow: 0 0 22px rgba(0, 229, 255, .45); }
.dock-btn.peligro .dock-ico { background: rgba(248, 113, 113, .14); color: var(--rojo); border-color: rgba(248, 113, 113, .55); }
.dock-btn.aviso .dock-ico { background: rgba(251, 191, 36, .14); color: var(--oro); border-color: rgba(251, 191, 36, .55); }
.dock-btn.colgar .dock-ico { background: var(--rojo-f); color: #fff; border-color: transparent; box-shadow: 0 0 18px rgba(239, 68, 68, .45); }
.dock-btn.colgar .dock-txt { color: #fecaca; }
.dock-btn.primario .dock-txt, .dock-btn.peligro .dock-txt { color: var(--texto); }

/* ============================================================ MODO CHAT */
.conv { flex: 1; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.bienvenida { margin: auto 12px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.bienvenida p { margin: 0; color: var(--sub); font-size: 14px; line-height: 1.6; }
.bienvenida b { color: var(--texto); font-size: 17px; }
.msg { max-width: 86%; display: flex; flex-direction: column; gap: 4px; }
.msg.usuario { align-self: flex-end; align-items: flex-end; }
.msg.jarvis { align-self: flex-start; }
.msg.tarjeta-msg { max-width: 92%; width: 380px; }
.burbuja { padding: 12px 15px; border-radius: 16px; font-size: var(--letra); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.usuario .burbuja { background: linear-gradient(135deg, rgba(0, 229, 255, .22), rgba(0, 229, 255, .12)); border: 1px solid rgba(0, 229, 255, .4); border-bottom-right-radius: 5px; }
.msg.jarvis .burbuja { background: var(--panel-2); border: 1px solid var(--borde); border-bottom-left-radius: 5px; }
.msg.vivo .burbuja::after { content: '▍'; color: var(--cian-f); animation: parpadeo 1s infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }
.msg.error .burbuja { border-color: rgba(248, 113, 113, .5); }
.meta { display: flex; align-items: center; gap: 12px; padding: 0 4px; font-size: 11.5px; color: var(--sub); }
.msg.jarvis .meta { justify-content: flex-end; }
.copiar { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border: 0; background: none; color: var(--sub); cursor: pointer; font-size: 12px; }
.copiar svg { width: 14px; height: 14px; }
.msg.vivo .copiar { visibility: hidden; }

.atajos { display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 2px; scrollbar-width: none; }
.atajos::-webkit-scrollbar { display: none; }
.chip-atajo { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; cursor: pointer;
  border: 1px solid var(--borde); background: rgba(7, 20, 31, .85); color: var(--texto); font-size: 13px; }
.chip-atajo svg { width: 15px; height: 15px; color: var(--cian); }

.redactar { padding: 8px 14px 10px; }
.caja-texto { display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 16px; border-radius: 26px; border: 1px solid var(--borde-f);
  background: rgba(3, 12, 18, .85); box-shadow: 0 0 18px rgba(0, 229, 255, .08); }
.caja-texto:focus-within { border-color: var(--cian); box-shadow: 0 0 20px rgba(0, 229, 255, .2); }
.caja-texto textarea { flex: 1; resize: none; min-height: 42px; max-height: 140px; padding: 11px 0; border: 0; background: transparent; color: var(--texto);
  font: inherit; font-size: 16px; line-height: 1.3; outline: none; }
.caja-texto textarea:focus-visible { outline: none; }
.caja-texto textarea::placeholder { color: var(--sub); }
.enviar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #39ecff, #0891b2); color: #021016; box-shadow: 0 0 14px rgba(0, 229, 255, .45); transition: opacity .2s; }
.enviar svg { width: 19px; height: 19px; }
.enviar:disabled { opacity: .3; box-shadow: none; cursor: default; }
.enviar.parar { background: rgba(248, 113, 113, .15); color: var(--rojo); border: 1px solid rgba(248, 113, 113, .5); box-shadow: none; }

/* ============================================================ PANEL */
.tablero { overflow-y: auto; padding: 14px 14px 18px; gap: 14px; overscroll-behavior: contain; }
.bloque { border: 1px solid var(--borde); border-radius: 18px; background: rgba(7, 20, 31, .7); padding: 14px; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bloque-cab h2 { margin: 0; font-family: var(--hud); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cian); font-weight: 600; }
.pc-visor { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--borde); cursor: zoom-in; }
.pc-visor img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-visor.cargando::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 229, 255, .12), transparent);
  animation: barrido 1.1s linear infinite; }
@keyframes barrido { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.pc-vacio { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--sub);
  font-size: 13px; text-align: center; padding: 16px; }
.pc-vacio svg { width: 40px; height: 40px; color: var(--cian); opacity: .6; }
.pc-vivo { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 6px;
  background: rgba(239, 68, 68, .9); color: #fff; font-family: var(--hud); font-size: 9.5px; letter-spacing: .14em; }
.pc-vivo i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulso 1.2s infinite; }
.pc-titulo { margin: 8px 2px 0; font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 16px; }
.pc-acc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pc-acc .boton { padding: 0 8px; font-size: 13px; }
.pc-monitores { margin-top: 10px; }
.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.atajo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 82px; padding: 10px 6px; border-radius: 14px;
  border: 1px solid var(--borde); background: rgba(0, 0, 0, .25); cursor: pointer; font-size: 12.5px; font-weight: 600; text-align: center; }
.atajo svg { width: 24px; height: 24px; color: var(--cian); }
.atajo:active { background: rgba(0, 229, 255, .1); }
.recientes { display: flex; flex-direction: column; gap: 8px; }
.reciente { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(0, 0, 0, .22); cursor: pointer; }
.reciente i { grid-row: span 2; font-style: normal; font-family: var(--hud); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cian);
  border: 1px solid var(--borde-f); border-radius: 6px; padding: 4px 6px; }
.reciente b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reciente span { font-size: 12.5px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================ Navegación */
.nav { display: flex; gap: 6px; margin: 0 14px calc(10px + var(--abajo)); padding: 6px; border-radius: 20px; border: 1px solid var(--borde);
  background: rgba(7, 20, 31, .92); backdrop-filter: blur(8px); }
.nav-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; height: 44px; border: 1px solid transparent; border-radius: 15px;
  background: transparent; color: var(--sub); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.nav-btn svg { width: 19px; height: 19px; }
.nav-btn[aria-current="page"] { color: var(--cian); background: rgba(0, 229, 255, .1); border-color: var(--borde-f); box-shadow: inset 0 0 14px rgba(0, 229, 255, .1); }

/* ============================================================ Instalar (aviso fijo abajo) */
.instalar { position: fixed; left: 12px; right: 12px; bottom: calc(76px + var(--abajo)); z-index: 25; display: flex; align-items: center; gap: 12px;
  padding: 12px 10px 12px 12px; border-radius: 18px; border: 1px solid var(--borde-f);
  background: linear-gradient(135deg, rgba(0, 60, 75, .97), rgba(7, 20, 31, .98)); box-shadow: 0 14px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(0, 229, 255, .15);
  animation: subir .5s cubic-bezier(.16, 1, .3, 1); max-width: 520px; margin: 0 auto; }
.instalar img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.instalar-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.instalar-txt b { font-size: 15px; }
.instalar-txt span { font-size: 12.5px; color: #a9c3cd; line-height: 1.35; }
.instalar-si { height: 38px; padding: 0 18px; border-radius: 19px; border: 0; background: var(--cian-f); color: #021016; font-weight: 700; cursor: pointer; flex-shrink: 0;
  box-shadow: 0 0 16px rgba(0, 229, 255, .45); }
.instalar-no { width: 32px; height: 32px; border: 0; background: none; color: var(--sub); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.instalar-no svg { width: 16px; height: 16px; }

/* Guía de iPhone */
.guia { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .7); display: flex; align-items: flex-end; justify-content: center; padding: 14px; }
.guia-caja { position: relative; width: 100%; max-width: 420px; margin-bottom: calc(30px + var(--abajo)); padding: 22px 20px 18px; border-radius: 22px;
  background: var(--panel); border: 1px solid var(--borde-f); text-align: center; animation: subir .45s cubic-bezier(.16, 1, .3, 1); }
.guia-logo { width: 60px; height: 60px; border-radius: 14px; }
.guia h2 { margin: 10px 0 14px; font-size: 18px; }
.guia-pasos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.guia-pasos li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--borde);
  font-size: 14.5px; line-height: 1.45; }
.guia-n { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--cian-f); color: #021016; font-weight: 800; font-size: 13px; }
.guia-ico { width: 18px; height: 18px; vertical-align: -3px; color: #3b82f6; margin: 0 2px; }
.guia-nota { margin: 0 0 14px; font-size: 12.5px; color: var(--sub); }
.guia .boton { width: 100%; }
.guia-flecha { position: absolute; left: 50%; bottom: -26px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid var(--cian-f); animation: flecha 1.2s ease-in-out infinite; }
@keyframes flecha { 50% { transform: translate(-50%, 6px); } }

/* Aviso flotante */
.aviso-flot { position: fixed; left: 50%; top: calc(64px + var(--arriba)); z-index: 50; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 14px; background: rgba(7, 20, 31, .97); border: 1px solid var(--borde-f); font-size: 13.5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.aviso-flot.entra { animation: bajar .3s ease; }
.aviso-flot.sale { opacity: 0; transition: opacity .3s; }
@keyframes bajar { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============================================================ Visor de tarjetas */
.visor { position: fixed; inset: 0; z-index: 35; display: flex; flex-direction: column; background: rgba(3, 8, 13, .985); }
.visor.entra { animation: subir .38s cubic-bezier(.16, 1, .3, 1); }
.visor-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(10px + var(--arriba)) 16px 10px; border-bottom: 1px solid var(--borde); }
.visor-cab h2 { margin: 0; font-family: var(--hud); font-size: 13px; letter-spacing: .12em; color: var(--cian); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-cuerpo { flex: 1; overflow-y: auto; padding: 14px 14px calc(24px + var(--abajo)); overscroll-behavior: contain; }
.visor[data-clase="noticias"] .visor-cuerpo, .visor[data-clase="perfil"] .visor-cuerpo { background: #f3ede1; padding: 0 0 calc(24px + var(--abajo)); }
.visor[data-clase="pantalla"] .visor-cuerpo { padding: 0; display: flex; flex-direction: column; }

/* ============================================================ Ajustes */
.hoja { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; }
.hoja-caja { width: 100%; max-height: 88dvh; display: flex; flex-direction: column; border-radius: 22px 22px 0 0; background: var(--panel);
  border-top: 1px solid var(--borde-f); }
.hoja-cab { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.hoja-cab h2 { margin: 0; font-family: var(--hud); font-size: 15px; letter-spacing: .12em; color: var(--cian); }
.hoja-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--borde); background: none; color: var(--sub); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.hoja-x svg { width: 18px; height: 18px; }
.hoja-cuerpo { overflow-y: auto; padding: 0 16px calc(20px + var(--abajo)); overscroll-behavior: contain; }
.hoja h3 { margin: 16px 4px 8px; font-family: var(--hud); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sub); font-weight: 600; }
.grupo { border: 1px solid var(--borde); border-radius: 14px; background: rgba(0, 0, 0, .22); overflow: hidden; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.grupo > .fila:last-child { border-bottom: 0; }
.fila.col { flex-direction: column; align-items: stretch; gap: 10px; }
.fila > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fila b { font-size: 14.5px; font-weight: 600; }
.fila small { color: var(--sub); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.fila.apagada { opacity: .45; }
button.fila { width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; cursor: pointer; font-size: 14.5px; text-align: left; }
button.fila.peligro { color: var(--rojo); justify-content: center; font-weight: 600; }
/* Interruptor */
.sw { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 26px; margin: 0; border-radius: 13px; position: relative; cursor: pointer;
  background: #1e2b35; border: 1px solid var(--borde); transition: background .2s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #8aa3b0; transition: transform .2s, background .2s; }
.sw:checked { background: rgba(0, 229, 255, .35); border-color: var(--cian); }
.sw:checked::after { transform: translateX(20px); background: #fff; box-shadow: 0 0 8px var(--cian-f); }
.sw:disabled { opacity: .5; }
/* Selector segmentado */
.segm { display: flex; gap: 4px; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, .35); border: 1px solid var(--borde); }
.segm button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--sub); cursor: pointer; font-size: 13px; font-weight: 600; }
.segm button[aria-checked="true"] { background: rgba(0, 229, 255, .16); color: var(--cian-f); box-shadow: inset 0 0 0 1px var(--borde-f); }
input[type="range"] { width: 100%; accent-color: #00e5ff; }
.chip { flex-shrink: 0; padding: 4px 10px; border-radius: 10px; font-size: 12px; border: 1px solid var(--borde); color: var(--sub); }
.chip.ok { color: var(--verde); border-color: rgba(74, 222, 128, .4); }
.chip.aviso { color: var(--oro); border-color: rgba(251, 191, 36, .4); }
.mini { flex-shrink: 0; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--cian); background: rgba(0, 229, 255, .15); color: var(--cian-f); font-weight: 600; cursor: pointer; }

/* ============================================================ TARJETAS (tarjetas.js) */
.tj-boton { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.tj { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--borde-f); background: rgba(7, 20, 31, .92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.tj-cab { display: flex; align-items: center; gap: 10px; padding: 11px 14px 0; }
.tj-etq { font-family: var(--hud); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--cian-f);
  border: 1px solid var(--borde-f); border-radius: 6px; padding: 3px 7px; }
.tj-lugar { font-size: 13px; color: #cfe7ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
.tj-sub { font-size: 12.5px; color: var(--sub); line-height: 1.4; }
.tj-mas { display: block; padding: 9px 14px 12px; font-size: 12.5px; font-weight: 600; color: var(--cian); }
.tj-fuente { margin: 14px 4px 0; font-size: 11px; color: var(--sub); text-align: center; }
.tj-ico { display: inline-block; flex-shrink: 0; }
.tj-ico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tj-enlace { color: inherit; text-decoration: none; display: block; }

/* Clima */
.tj-clima { background: linear-gradient(160deg, #0b4a6f, #0a2235 70%); border-color: rgba(125, 211, 252, .35); }
.tj-clima.cielo-soleado { background: linear-gradient(160deg, #0e7490, #0b3b56 55%, #0a2235); }
.tj-clima.cielo-nublado, .tj-clima.cielo-niebla { background: linear-gradient(160deg, #3f5566, #1d2b36 70%); }
.tj-clima.cielo-lluvia, .tj-clima.cielo-lluvia-fuerte { background: linear-gradient(160deg, #1e3a5f, #0f1d2e 70%); }
.tj-clima.cielo-tormenta { background: linear-gradient(160deg, #312e81, #111827 70%); }
.tj-clima.cielo-nieve { background: linear-gradient(160deg, #64748b, #1e293b 70%); }
.tj-clima.noche { background: linear-gradient(160deg, #1e1b4b, #0b1020 70%); }
.tj-clima-main { display: flex; align-items: center; gap: 14px; padding: 6px 16px 10px; }
.tj-clima-temp { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tj-clima-temp > b { font-family: var(--hud); font-size: 48px; font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .25); }
.tj-clima-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tj-cond { font-size: 16px; font-weight: 700; color: #fff; }
.tj-clima .tj-sub { color: #c7dbe6; }
.tj-horas { display: flex; gap: 6px; padding: 0 12px 12px; overflow-x: auto; scrollbar-width: none; }
.tj-horas::-webkit-scrollbar { display: none; }
.tj-hora { flex: 1 0 46px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border-radius: 12px; background: rgba(255, 255, 255, .08); }
.tj-hora span { font-size: 11px; color: #c7dbe6; }
.tj-hora b { font-size: 13.5px; color: #fff; }
.tj-hora small { font-size: 10.5px; color: #7dd3fc; }
.cl { display: flex; flex-direction: column; gap: 4px; max-width: 560px; margin: 0 auto; }
.tj-hero { border-radius: 20px; }
.tj-hero .tj-clima-temp > b { font-size: 64px; }
.cl-sens { padding: 0 16px 14px; margin: 0; }
.cl-mets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.cl-met { display: flex; flex-direction: column; gap: 3px; padding: 11px 10px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(7, 20, 31, .85); }
.cl-met-etq { font-family: var(--hud); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.cl-met b { font-size: 16px; }
.cl-met small { font-size: 11px; color: var(--sub); line-height: 1.3; }
.cl-tit { margin: 18px 4px 8px; font-family: var(--hud); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cian); font-weight: 600; }
.cl-horas { padding: 0; }
.cl-horas .tj-hora { background: rgba(7, 20, 31, .85); border: 1px solid var(--borde); }
.cl-dias { display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: 14px; background: rgba(7, 20, 31, .85); overflow: hidden; }
.cl-dia { display: grid; grid-template-columns: 62px 30px 38px 36px 1fr 36px; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--borde); font-size: 14px; }
.cl-dia:last-child { border-bottom: 0; }
.cl-dia-ll { font-size: 11.5px; color: #7dd3fc; }
.cl-dia-min { color: var(--sub); text-align: right; }
.cl-dia-max { text-align: right; font-weight: 700; }
.cl-barra { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.cl-barra i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #38bdf8, #fbbf24); }
.cl-recs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cl-recs li { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(7, 20, 31, .85); font-size: 14px; line-height: 1.45; }

/* Noticias: «El Diario de JARVIS» (papel, tinta, serif) */
.tj-diario, .dr { --papel: #f3ede1; --tinta: #16130f; --suave: #5b5245; --regla: #2a251e; background: var(--papel); color: var(--tinta); border-color: #d6ccb8; }
.dr-mancheta { padding: 12px 14px 0; text-align: center; }
.dr-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave);
  border-bottom: 1px solid var(--regla); padding-bottom: 5px; }
.dr-nombre { margin: 8px 0 2px; font-family: var(--serif); font-size: 27px; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.dr .dr-nombre { font-size: 34px; }
.dr-lema { font-size: 10.5px; font-style: italic; color: var(--suave); }
.dr-cinta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 5px 0; border-top: 3px double var(--regla);
  border-bottom: 1px solid var(--regla); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.dr-cinta b { background: var(--tinta); color: var(--papel); padding: 2px 8px; }
.dr-portada { padding: 12px 14px 4px; }
.dr-foto { position: relative; overflow: hidden; background: #ddd3c1; aspect-ratio: 16 / 9; border: 1px solid rgba(0, 0, 0, .25); }
.dr-foto.sin-foto { background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .05) 0 6px, transparent 6px 12px), #e2d9c7; }
.dr-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.04); }
.dr-titular { margin: 10px 0 4px; font-family: var(--serif); font-size: 21px; font-weight: 800; line-height: 1.15; }
.dr .dr-portada .dr-titular { font-size: 27px; }
.dr-antetitulo { display: inline-block; margin-top: 12px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9a1b1b; }
.dr-entradilla { margin: 4px 0 6px; font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.dr-medio { display: block; font-size: 11.5px; color: var(--suave); font-style: italic; }
.dr-portada.compacta { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: start; padding-top: 10px; }
.dr-portada.compacta .dr-foto { aspect-ratio: 1; }
.dr-portada.compacta .dr-titular { margin: 0 0 4px; font-size: 17px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tj-diario .dr-fila { padding-right: 30px; }
.escenario .tj-diario .dr-breves li:nth-child(n+3) { display: none; }
.dr-breves { margin: 8px 14px 0; padding: 8px 0 0 18px; border-top: 1px solid var(--regla); display: flex; flex-direction: column; gap: 6px; }
.dr-breves li { font-family: var(--serif); font-size: 14px; line-height: 1.3; font-weight: 700; }
.dr-breves small { display: block; font-family: system-ui, sans-serif; font-size: 11px; font-weight: 400; color: var(--suave); }
.tj-diario .tj-mas { color: #9a1b1b; }
.dr { max-width: 640px; margin: 0 auto; padding-bottom: 8px; }
.dr-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; border-top: 3px double var(--regla); margin-top: 12px; }
.dr-nota h3 { margin: 8px 0 4px; font-family: var(--serif); font-size: 15.5px; line-height: 1.2; font-weight: 800; }
.dr-nota p { margin: 0 0 6px; font-family: var(--serif); font-size: 13px; line-height: 1.45; color: #2f2a22;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dr-foto.dr-mini { aspect-ratio: 4 / 3; }
.dr-seccion { margin: 6px 14px 0; padding: 8px 0 6px; border-top: 1px solid var(--regla); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dr-lista { padding: 0 14px; }
.dr-item { padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .18); }
.dr-item b { display: block; font-family: var(--serif); font-size: 15.5px; line-height: 1.3; }
.dr .tj-fuente { color: var(--suave); }

/* Perfil */
.tj-perfil { background: linear-gradient(160deg, #142a38, #07141f); }
.pf-fila { display: flex; gap: 12px; padding: 10px 14px 0; }
.pf-foto { width: 84px; height: 104px; flex-shrink: 0; border-radius: 12px; overflow: hidden; background: #0e2230; border: 1px solid var(--borde); }
.pf-foto.sin-foto, .pf-portada.sin-foto { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px), #0e2230; }
.pf-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.pf-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-nombre { margin: 0; font-size: 18px; line-height: 1.2; }
.pf-dato { font-size: 12.5px; color: #cfe7ee; line-height: 1.35; }
.pf-dato b { color: var(--sub); font-weight: 600; }
.pf { max-width: 640px; margin: 0 auto; color: #16130f; padding: 0 16px; font-family: var(--serif); }
/* Retrato entero (sin recortar la cara), centrado sobre papel */
.pf-portada { margin: 0 -16px; height: 42dvh; display: flex; justify-content: center; overflow: hidden; background: #ddd3c1; }
.pf .pf-portada .pf-img { width: auto; max-width: 100%; height: 100%; object-fit: contain; filter: grayscale(.15) contrast(1.05); }
.pf-nombre.grande { margin: 14px 0 4px; font-size: 30px; font-weight: 800; }
.pf-subt { margin: 0 0 10px; font-size: 15px; font-style: italic; color: #5b5245; }
.pf-entradilla { margin: 0 0 12px; font-size: 17px; line-height: 1.5; border-left: 3px solid #9a1b1b; padding-left: 12px; }
.pf-ficha { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 14px; padding: 12px; border: 1px solid #2a251e; font-family: system-ui, sans-serif; font-size: 13.5px; }
.pf-ficha dt { font-weight: 700; color: #5b5245; }
.pf-ficha dd { margin: 0; }
.pf-par { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; }
.pf-sec { margin: 16px 0 6px; font-size: 18px; border-top: 1px solid #2a251e; padding-top: 10px; }
.pf .boton { margin-top: 10px; color: #16130f; border-color: #2a251e; background: transparent; }

/* Pantalla del PC */
.tj-pantalla .pt-marco { margin: 10px 12px 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid var(--borde); }
.tj-pantalla .pt-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tj-pantalla .pt-tit { display: block; padding: 8px 14px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pt-zona { flex: 1; min-height: 0; overflow: auto; background: #000; display: flex; align-items: center; justify-content: center; touch-action: pan-x pan-y pinch-zoom; }
.pt-zona .pt-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pt-zona.cerca { display: block; }
.pt-zona.cerca .pt-img { max-width: none; max-height: none; width: 250%; }
.pt-tit { margin: 10px 16px 0; font-size: 13px; color: var(--sub); }
.pt .tj-fuente { margin: 6px 0 12px; }

/* Con el aviso de instalar abierto, el contenido deja sitio para que no tape los controles */
body.con-instalar .voz, body.con-instalar .tablero, body.con-instalar .redactar { padding-bottom: var(--alto-instalar, 90px); }

@media (max-height: 640px) { .reloj { display: none; } .dock-btn .dock-ico { width: 48px; height: 48px; } .dock-btn.medio .dock-ico { width: 58px; height: 58px; } }
@media (max-height: 740px) { body.con-tarjeta .reloj { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .orbe, .reloj-hora .sep, .msg.vivo .burbuja::after, .sesion-punto, .trabajo i, .escenario.entra, .visor.entra, .instalar, .guia-caja, .guia-flecha, .pc-vivo i {
    animation: none !important; }
}