/* Tarjetas holográficas de Jarvis: se "proyectan" sobre el anillo cuando preguntas algo */
#holo { position: fixed; inset: 0; z-index: 8; display: none; place-items: center; padding: 7vh 3vw 9vh; pointer-events: none; }
#holo.abierto { display: grid; }
#holo .fondo { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(2, 10, 19, .35), rgba(2, 10, 19, .78)); backdrop-filter: blur(3px); pointer-events: auto; animation: velo .4s ease both; }
@keyframes velo { from { opacity: 0; } to { opacity: 1; } }
#holo .pila { position: relative; display: flex; flex-wrap: wrap; gap: 1.6vw; justify-content: center; align-items: flex-start; max-height: 100%; overflow: auto; pointer-events: auto; scrollbar-width: none; }
#holo .pila::-webkit-scrollbar { display: none; }

.tj { position: relative; width: min(54vw, 880px); max-width: 100%; padding: 2.4vh 1.8vw 2.6vh; color: var(--texto); overflow: hidden;
  background: linear-gradient(160deg, rgba(5, 32, 54, .94), rgba(2, 14, 26, .94));
  border: 1px solid rgba(63, 233, 255, .55);
  box-shadow: 0 0 50px rgba(63, 233, 255, .22), inset 0 0 70px rgba(29, 140, 255, .12);
  clip-path: polygon(0 20px, 20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px));
  animation: proyecta .6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 50% 100%; }
.tj.chica { width: min(34vw, 560px); }
.tj::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, rgba(63, 233, 255, .10) 50%, transparent 100%); height: 28%; animation: barrido 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes proyecta { from { opacity: 0; transform: perspective(900px) rotateX(20deg) translateY(36px) scale(.93); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes barrido { 0% { transform: translateY(-110%); } 100% { transform: translateY(420%); } }

.tj-cab { padding-right: 5.5em; display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-bottom: 1.6vh; padding-bottom: 1vh; border-bottom: 1px solid var(--linea); letter-spacing: .34em; text-transform: uppercase; font-size: clamp(10px, .85vw, 14px); color: var(--tenue); }
.tj-cab b { font-weight: 500; color: var(--cian); letter-spacing: .3em; }
.tj-cab span { font-family: var(--mono); letter-spacing: .1em; }
.tj-cerrar { all: unset; cursor: pointer; position: absolute; right: 1.1vw; top: 1.2vh; z-index: 2; font-family: var(--mono); font-size: clamp(11px, .9vw, 15px); color: var(--tenue); padding: .2em .5em; }
.tj-cerrar:hover { color: var(--cian); }
.tj-cerrar:focus-visible { outline: 2px solid var(--cian); }

.tj-grande { font-family: var(--mono); font-weight: 300; font-size: clamp(34px, 4.6vw, 80px); line-height: 1; color: var(--texto); text-shadow: 0 0 22px rgba(63, 233, 255, .5); }
.tj-grande small { font-size: .4em; color: var(--tenue); margin-right: .25em; }
.tj-sub { font-family: var(--mono); font-size: clamp(11px, 1vw, 17px); color: var(--tenue); letter-spacing: .08em; }
.tj-fila { display: flex; gap: 2vw; align-items: center; flex-wrap: wrap; }
.tj-chip { display: inline-block; padding: .25em .8em; border: 1px solid var(--linea); font-family: var(--mono); font-size: clamp(10px, .85vw, 14px); letter-spacing: .1em; color: var(--tenue); }
.tj-chip.bueno { color: var(--bueno); border-color: var(--bueno); } .tj-chip.malo { color: var(--malo); border-color: var(--malo); } .tj-chip.aviso { color: var(--aviso); border-color: var(--aviso); } .tj-chip.cian { color: var(--cian); border-color: var(--cian); }
.tj-sube { color: var(--bueno); } .tj-baja { color: var(--malo); }
.tj-lista { display: grid; gap: .6vh; }
.tj-item { display: grid; grid-template-columns: 1fr auto; gap: 1em; align-items: center; padding: .9vh 0; border-bottom: 1px dashed var(--linea); font-size: clamp(12px, 1.05vw, 18px); }
.tj-item:last-child { border-bottom: 0; }
.tj-item em { display: block; font-style: normal; font-size: .8em; color: var(--tenue); margin-top: .2vh; }
.tj-item b { font-family: var(--mono); font-weight: 400; color: var(--cian); }
.tj-barra { height: 6px; background: var(--linea); position: relative; margin-top: .6vh; }
.tj-barra i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--azul), var(--cian)); box-shadow: 0 0 10px var(--cian); animation: crece 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes crece { from { width: 0 !important; } }
.tj-cols { display: grid; grid-template-columns: 1.55fr 1fr; gap: 1.6vw; align-items: start; }
.tj svg { display: block; width: 100%; height: auto; }
.tj-leyenda { display: flex; gap: 1.2vw; flex-wrap: wrap; font-family: var(--mono); font-size: clamp(9px, .75vw, 13px); color: var(--tenue); letter-spacing: .1em; margin-top: .8vh; }
.tj-leyenda i { display: inline-block; width: 1.6em; height: 4px; margin-right: .5em; vertical-align: middle; }
.tj-acciones { display: flex; gap: 1vw; margin-top: 2vh; flex-wrap: wrap; }
.tj-boton { all: unset; cursor: pointer; padding: .7em 1.6em; border: 1px solid var(--cian); color: var(--cian); letter-spacing: .24em; text-transform: uppercase; font-size: clamp(10px, .85vw, 14px); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); transition: background .2s, color .2s; }
.tj-boton:hover { background: var(--cian); color: #021018; }
.tj-boton.peligro { border-color: var(--malo); color: var(--malo); } .tj-boton.peligro:hover { background: var(--malo); color: #021018; }
.tj-boton:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; }
.tj-boton[disabled] { opacity: .4; cursor: default; }
.tj-texto { font-size: clamp(13px, 1.2vw, 21px); line-height: 1.5; font-weight: 300; padding: 1.2vh 1vw; border-left: 2px solid var(--cian); background: rgba(63, 233, 255, .05); white-space: pre-wrap; }
.tj-burbuja { max-width: 82%; padding: .8vh 1vw; margin: .6vh 0; font-size: clamp(12px, 1.05vw, 18px); line-height: 1.4; border: 1px solid var(--linea); }
.tj-burbuja.cliente { background: rgba(63, 233, 255, .06); }
.tj-burbuja.yo { margin-left: auto; border-color: var(--cian); background: rgba(29, 140, 255, .12); }
.tj-burbuja small { display: block; font-family: var(--mono); font-size: .7em; color: var(--tenue); margin-top: .3vh; }
.pulso { animation: palpita 1.4s ease-in-out infinite; }
@keyframes palpita { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tj, .tj::before, .tj-barra i, .pulso, #holo .fondo { animation: none !important; } }
@media (max-width: 900px) { .tj, .tj.chica { width: 94vw; } .tj-cols { grid-template-columns: 1fr; } }

/* ---------- Mapa real (Leaflet con mapa oscuro) ---------- */
.tj.ancha { width: min(74vw, 1200px); }
.mapa-real { position: relative; width: 100%; background: #06121f; border: 1px solid rgba(63, 233, 255, .35); overflow: hidden; }
.mapa-real .leaflet-container { background: #06121f; font-family: var(--mono); }
/* El mapa de OpenStreetMap es claro: se invierte para dejarlo oscuro, con calles legibles */
.mapa-real .leaflet-tile-pane { filter: invert(1) hue-rotate(190deg) brightness(.9) contrast(1.1) saturate(.75); }
/* Los iconos y el trazo de Leaflet no deben heredar el estilo de los gráficos de las tarjetas */
.mapa-real svg { display: initial; width: initial; height: initial; max-width: none; }
.mapa-real .leaflet-control-attribution svg { display: inline !important; width: 12px !important; height: 8px !important; }
.mapa-real .leaflet-control-attribution { background: rgba(2, 10, 19, .75); color: var(--tenue); font-size: 9px; }
.mapa-real .leaflet-control-attribution a { color: var(--cian); }
.mapa-real .leaflet-bar a { background: rgba(2, 14, 26, .9); color: var(--cian); border-color: var(--linea); }
.mapa-real .leaflet-tooltip { background: rgba(2, 14, 26, .92); color: var(--texto); border: 1px solid var(--cian); box-shadow: none; font: 600 11px var(--mono); letter-spacing: .08em; }
.mapa-real .leaflet-tooltip::before { display: none; }
.mapa-real .etq-av { color: #fff; font: 700 11px var(--mono); letter-spacing: .08em; text-shadow: 0 0 4px #000, 0 0 8px #000, 0 0 12px #000; white-space: nowrap; pointer-events: none; }
.mapa-real .punto-pulso { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; box-shadow: 0 0 14px currentColor; animation: palpita 1.4s ease-in-out infinite; }