/* El panel de Kesury: ciudad de noche con carteles de neón (boceto aprobado el 18-10). Primero móvil (390 px). */

:root {
  --fondo: #0A0F24;
  --panel: #10162F;
  --tarjeta: #141B3A;
  --borde: #2B3566;
  --linea: #1A2142;
  --texto: #FFFFFF;
  --suave: #DDE3FF;
  --tenue: #A9B3D9;
  --rosa: #FF4FA3;
  --rosa-claro: #FFD1E8;
  --cian: #3EE6FF;
  --oro: #FFC94D;
  --naranja: #FFB13D;
  --verde: #5CFF9D;
  --rojo: #FF5A5A;
  --ventana: #FFD27A;
  --ventana-blanca: #FFE9A8;
  --apagada: #2A3358;
  --edif: #1C2449;
  --letra: 'Bricolage Grotesque', system-ui, sans-serif;
  --cartel: 'Bebas Neue', 'Bricolage Grotesque', sans-serif;
  --logo: 'Bungee', 'Bricolage Grotesque', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra);
  font-size: 15px;
  line-height: 1.45;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--rosa-claro); text-decoration: none; }
a:hover { color: var(--texto); }
h1 { font-size: 22px; margin: 4px 0 12px; }
h2 { font-size: 16px; margin: 0 0 10px; }
p { margin: 0 0 10px; }
.tenue { color: var(--tenue); font-size: 13px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vacio { padding: 12px 0; }
main { max-width: 1120px; margin: 0 auto; padding: 0 16px 32px; }
.dentro main { max-width: 720px; }
section { margin: 0 0 24px; }
:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

/* ── Barra superior ── */
.barra {
  display: flex; justify-content: space-between; align-items: center;
  max-width: 1120px; margin: 0 auto;
  padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
}
.dentro .barra { max-width: 720px; }
.logo { font-family: var(--logo); font-size: 22px; letter-spacing: 1px; color: #FFE8A3; text-shadow: 0 0 10px rgba(255, 200, 90, .6); }
.volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; }
.boton-redondo {
  position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 22px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.globo {
  position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--rosa); color: #1A0010; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px var(--rosa);
}
.saludo { color: var(--tenue); font-size: 13px; margin: -4px 0 6px; }

/* ── Animaciones (se apagan si el móvil pide menos movimiento) ── */
@keyframes parpadeo { 0%, 19%, 21%, 62%, 64%, 100% { opacity: 1 } 20%, 63% { opacity: .35 } }
@keyframes latido { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.12) } }
@keyframes brillo { 0%, 100% { opacity: .9 } 50% { opacity: .25 } }
.parpadea { animation: parpadeo 3.2s infinite; }
.late { animation: latido 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .parpadea, .late, .estrella { animation: none !important; } }

/* ── La ciudad ── */
.ciudad-rejilla { display: grid; gap: 0; }
.cielo { position: relative; min-height: 470px; display: flex; flex-direction: column; justify-content: flex-end; margin: 0 -16px; }
.luna { position: absolute; top: 14px; right: 34px; width: 38px; height: 38px; border-radius: 19px; background: #FFF4D6; box-shadow: 0 0 30px rgba(255, 240, 200, .45); }
.luna::after { content: ''; position: absolute; top: -6px; left: -10px; width: 34px; height: 34px; border-radius: 17px; background: var(--fondo); }
.estrellas { position: absolute; inset: 0 0 auto 0; height: 100%; pointer-events: none; }
.estrella { position: absolute; width: 2px; height: 2px; border-radius: 1px; background: #DCE3FF; animation: brillo 2.8s ease-in-out infinite; }
.estrella.e1 { animation-delay: .5s } .estrella.e2 { animation-delay: 1s } .estrella.e3 { animation-delay: 1.5s } .estrella.e4 { animation-delay: 2s }
.estrella:nth-child(1){left:48%;top:17%}.estrella:nth-child(2){left:14%;top:8%}.estrella:nth-child(3){left:44%;top:15%}.estrella:nth-child(4){left:10%;top:25%}.estrella:nth-child(5){left:57%;top:13%}.estrella:nth-child(6){left:29%;top:22%}.estrella:nth-child(7){left:63%;top:4%}.estrella:nth-child(8){left:49%;top:8%}.estrella:nth-child(9){left:65%;top:6%}.estrella:nth-child(10){left:55%;top:15%}.estrella:nth-child(11){left:19%;top:3%}.estrella:nth-child(12){left:89%;top:27%}.estrella:nth-child(13){left:14%;top:14%}.estrella:nth-child(14){left:91%;top:7%}.estrella:nth-child(15){left:42%;top:16%}.estrella:nth-child(16){left:65%;top:9%}

.skyline { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 0 6px; }
.edificio { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--texto); }
.edificio:hover { color: var(--texto); }
.edificio:hover .fachada { filter: brightness(1.2); }
.globo-edificio {
  padding: 3px 8px; border-radius: 10px; font-size: 12px; font-weight: 700;
  background: #2A3358; color: #E6EBFF;
}
.cartel {
  padding: 3px 7px 2px; border: 2px solid; border-radius: 6px;
  font-family: var(--cartel); font-size: clamp(14px, 4.3vw, 17px); line-height: 1; letter-spacing: 1px; white-space: nowrap; color: var(--texto);
}
.fachada {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start;
  width: 62px; padding: 10px 7px; border-radius: 4px 4px 0 0; background: var(--edif);
}
.v { display: block; height: 10px; border-radius: 2px; background: var(--apagada); }
.v-on { background: var(--ventana); box-shadow: 0 0 4px rgba(255, 210, 122, .5); }
.v-blanca { background: var(--ventana-blanca); box-shadow: 0 0 4px rgba(255, 233, 168, .5); }

.e-captacion .fachada { height: 226px; }
.e-captacion .cartel { border-color: var(--rosa); background: #1A0B1E; text-shadow: 0 0 3px var(--rosa); box-shadow: 0 0 12px #FF4FA380, inset 0 0 6px #FF4FA355; }
.e-captacion .globo-edificio.late { background: var(--rosa); color: #1A0010; box-shadow: 0 0 12px var(--rosa); }
.e-redes .fachada { height: 170px; }
.e-redes .cartel { border-color: var(--cian); background: #07191F; text-shadow: 0 0 3px var(--cian); box-shadow: 0 0 12px #3EE6FF80, inset 0 0 6px #3EE6FF55; }
.e-closer .fachada { height: 190px; }
.e-closer .cartel { border-color: var(--naranja); background: #1F1405; text-shadow: 0 0 3px var(--naranja); box-shadow: 0 0 12px #FFB13D80, inset 0 0 6px #FFB13D55; }
.e-webs .fachada { height: 148px; }
.e-webs .cartel { border-color: var(--verde); background: #061A0F; text-shadow: 0 0 3px var(--verde); box-shadow: 0 0 12px #5CFF9D80, inset 0 0 6px #5CFF9D55; }
.e-ceo { gap: 0; }
.e-ceo .antena { width: 2px; height: 26px; background: #C9B37A; }
.e-ceo .baliza { width: 8px; height: 8px; border-radius: 4px; background: #5A6390; margin: -30px 0 22px; }
.e-ceo .baliza.late { background: var(--rojo); box-shadow: 0 0 10px var(--rojo); }
.e-ceo .cartel { padding: 4px 10px; font-size: 24px; letter-spacing: 2px; border-color: var(--oro); background: #1D1606; text-shadow: 0 0 4px var(--oro); box-shadow: 0 0 16px rgba(255, 201, 77, .55); margin-bottom: 6px; }
.e-ceo .fachada { width: 70px; height: 340px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 8px; border-radius: 6px 6px 0 0; border-top: 3px solid var(--oro); background: #232C5C; }

.calle { height: 30px; background: #141A33; border-top: 2px solid var(--borde); display: flex; align-items: center; justify-content: center; gap: 14px; }
.calle i { width: 18px; height: 3px; background: #4A557F; border-radius: 2px; }

.hoy { background: var(--panel); border-radius: 22px 22px 0 0; margin: -8px -16px 0; padding: 18px 16px 16px; position: relative; min-height: 300px; }
.hoy-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.hoy h1 { font-size: 17px; margin: 0; }

/* ── Líneas, tarjetas y botones ── */
.linea {
  display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; min-height: 44px;
  border-radius: 14px; background: var(--linea); color: var(--texto);
}
.linea:hover { color: var(--texto); background: #202850; }
.linea.nuevo { box-shadow: inset 0 0 0 1px var(--rosa); }
.linea svg { flex-shrink: 0; color: var(--tenue); }
.linea-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linea-texto strong { font-size: 14px; font-weight: 600; }
.punto { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.punto.rosa { background: var(--rosa); box-shadow: 0 0 8px var(--rosa); }
.punto.cian { background: var(--cian); box-shadow: 0 0 8px var(--cian); }
.punto.oro { background: var(--oro); box-shadow: 0 0 8px var(--oro); }
.punto.verde { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.punto.rojo { background: var(--rojo); box-shadow: 0 0 8px var(--rojo); }

.cartel-grande {
  display: inline-block; margin: 0 0 10px; padding: 6px 14px; border: 2px solid; border-radius: 8px;
  font-family: var(--logo); font-size: 26px; font-weight: 400;
}
.cartel-grande.rosa { border-color: var(--rosa); background: #1A0B1E; color: var(--rosa-claro); text-shadow: 0 0 8px var(--rosa), 0 0 18px var(--rosa); box-shadow: 0 0 16px rgba(255, 79, 163, .5); }
.cartel-grande.oro { border-color: var(--oro); background: #1D1606; color: #FFE8A3; text-shadow: 0 0 8px var(--oro); box-shadow: 0 0 16px rgba(255, 201, 77, .5); }
.cartel-grande.cian { border-color: var(--cian); background: #07191F; color: #CFF8FF; text-shadow: 0 0 8px var(--cian); box-shadow: 0 0 16px rgba(62, 230, 255, .45); }
.cartel-grande.verde { border-color: var(--verde); background: #061A0F; color: #CFFFE2; text-shadow: 0 0 8px var(--verde); box-shadow: 0 0 16px rgba(92, 255, 157, .45); }
.cartel-grande.naranja { border-color: var(--naranja); background: #1F1405; color: #FFE3BD; text-shadow: 0 0 8px var(--naranja); box-shadow: 0 0 16px rgba(255, 177, 61, .45); }
.franja { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--linea); font-size: 13px; color: var(--suave); }
.franja svg { color: var(--ventana); flex-shrink: 0; }
.cabeza-edificio { margin-bottom: 20px; }

.buscar { display: flex; gap: 8px; margin: 0 0 12px; }
input, select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--texto);
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; min-height: 44px;
}
textarea { resize: vertical; line-height: 1.45; }
label { display: block; font-size: 13px; color: var(--tenue); margin: 10px 0 4px; }

.embudo { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.paso { flex-shrink: 0; min-width: 84px; padding: 10px 12px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 2px; color: var(--texto); }
.cifra { font-family: var(--logo); font-size: 20px; color: var(--suave); }
.cifra.rosa { color: #FF8CC4; } .cifra.oro { color: var(--ventana); } .cifra.verde { color: #7DFFB2; }

.titulo-seccion { display: flex; justify-content: space-between; align-items: baseline; }
.tarjeta { border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta.aprobada { border-color: #1F6B45; }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tarjeta-cabeza > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nombre { font-size: 15px; font-weight: 700; color: var(--texto); }
.nota { flex-shrink: 0; padding: 4px 8px; border-radius: 8px; background: #2A1030; color: var(--rosa-claro); font-size: 12px; font-weight: 700; }
.fallo { font-size: 13px; color: var(--suave); padding: 10px 12px; border-radius: 12px; background: var(--linea); margin: 0; }
.mensaje summary { cursor: pointer; font-size: 13px; color: var(--rosa-claro); min-height: 32px; display: flex; align-items: center; }
.texto-mensaje { white-space: pre-wrap; font-size: 14px; margin: 6px 0 0; overflow-wrap: anywhere; }
.caja { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; padding: 14px; }
.caja.oro { border-color: #6B5520; }
.hecho { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; background: #0E2A1C; color: #BFFFD8; font-size: 14px; font-weight: 600; margin: 0; }
.aviso-seccion { padding: 10px 12px; border-radius: 12px; background: #2A2008; color: #FFE8A3; font-size: 13px; }

.botones { display: flex; flex-wrap: wrap; gap: 8px; }
.en-linea { display: contents; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 12px; border: 0; cursor: pointer;
  font-family: var(--letra); font-size: 14px; font-weight: 700; text-align: center; color: var(--texto); background: var(--linea);
}
.boton.principal { flex: 1; background: var(--rosa); color: #1A0010; box-shadow: 0 0 14px rgba(255, 79, 163, .45); }
.boton.principal:hover { color: #1A0010; filter: brightness(1.08); }
.boton.secundario { border: 1px solid var(--borde); background: transparent; color: var(--texto); font-weight: 600; }
.boton.verde { flex: 1; background: var(--verde); color: #04210F; }
.boton.fantasma { background: transparent; color: var(--tenue); font-weight: 600; }
.boton.contorno-rosa { border: 1px dashed var(--rosa); background: transparent; color: var(--rosa-claro); font-weight: 600; min-height: 48px; }
.boton.ancho, .ancho { width: 100%; }
form .boton.ancho { margin-top: 12px; }
.editar .botones { margin-top: 12px; }
.editar textarea + .boton { margin-top: 8px; }
.contesto .boton { margin-top: 12px; }

.chip { display: inline-block; padding: 3px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; background: #2A3358; color: #E6EBFF; white-space: nowrap; }
.chip.rosa { background: #3A1430; color: var(--rosa-claro); }
.chip.oro { background: #3A2C08; color: #FFE8A3; }
.chip.verde { background: #0E2A1C; color: #BFFFD8; }
.chip.gris { background: #1E2440; color: var(--tenue); }

.toast { display: flex; align-items: center; gap: 8px; max-width: 688px; margin: 0 auto 12px; padding: 10px 14px; border-radius: 12px; background: #0E2A1C; color: #BFFFD8; font-weight: 600; font-size: 14px; }
.toast.error { background: #3A0E14; color: #FFC7CC; }
@media (min-width: 721px) { .toast { margin: 0 auto 12px; } }
.dentro .toast { margin-left: 16px; margin-right: 16px; }
@media (min-width: 752px) { .dentro .toast { margin-left: auto; margin-right: auto; } }

/* ── Ficha ── */
.ficha-cabeza { margin-bottom: 20px; }
.ficha-cabeza h1 { margin-bottom: 2px; }
.siguiente { font-size: 14px; }
.contacto { margin-top: 8px; }
.contacto .boton { flex: 0 1 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datos { margin: 0; }
.dato { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.dato dt { font-size: 12px; color: var(--tenue); margin-bottom: 2px; }
.dato dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.accion { border-radius: 14px; background: var(--linea); margin-bottom: 8px; }
.accion summary { cursor: pointer; padding: 12px 14px; min-height: 44px; font-weight: 600; }
.accion form, .dentro-detalle { padding: 0 14px 14px; }
.dentro-detalle .linea { background: var(--tarjeta); }
.burbuja { padding: 10px 12px; border-radius: 14px; margin-bottom: 8px; max-width: 92%; }
.burbuja.sale { background: #2A1030; margin-left: auto; }
.burbuja.entra { background: var(--linea); }
.eventos { list-style: none; margin: 0; padding: 0; }
.eventos li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0 8px 14px; border-left: 2px solid var(--borde); font-size: 14px; }
.pie { margin-top: 24px; }
.filtros { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.filtro { flex-shrink: 0; padding: 8px 12px; border-radius: 18px; background: var(--linea); color: var(--suave); font-size: 13px; min-height: 36px; display: inline-flex; align-items: center; }
.filtro.activo { background: var(--rosa); color: #1A0010; font-weight: 700; }
.linea .chip { flex-shrink: 0; }

/* ── CEO ── */
.tiras { display: grid; gap: 10px; }
.tira { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 14px; background: var(--linea); color: var(--texto); }
.tira .cifra { min-width: 40px; text-align: center; }
.lista { padding-left: 20px; }
.lista li { margin-bottom: 6px; }
.iphone { margin-top: 12px; }
.iphone summary { cursor: pointer; color: var(--rosa-claro); min-height: 44px; display: flex; align-items: center; }
.iphone ol { padding-left: 20px; }

/* ── Ordenador ── */
@media (min-width: 900px) {
  .ciudad-rejilla { grid-template-columns: minmax(440px, 520px) 1fr; gap: 32px; align-items: end; }
  .cielo { margin: 0; min-height: 520px; border-radius: 22px 22px 0 0; }
  .hoy { margin: 0; border-radius: 22px; align-self: stretch; }
  .skyline { gap: 14px; }
  .fachada { width: 72px; }
  .e-ceo .fachada { width: 82px; }
}

/* ── Entrada ── */
.codigo { font-family: var(--logo); font-size: 28px; letter-spacing: 6px; text-align: center; }
.codigo-grande { font-family: var(--logo); font-size: 44px; letter-spacing: 6px; text-align: center; color: var(--rosa-claro); text-shadow: 0 0 10px var(--rosa); margin: 4px 0 8px; }
.entrada main { max-width: 420px; }

/* ── Lo tuyo hoy ── */
.lo-tuyo { font-size: 18px; margin: 4px 0 12px; }
.etiqueta { display: inline-block; align-self: flex-start; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px; }
.etiqueta.rosa { background: #3A1430; color: var(--rosa-claro); }
.etiqueta.oro { background: #3A2C08; color: #FFE8A3; }
.burbuja-previa { background: var(--linea); border-radius: 12px; padding: 10px 12px; margin: 0; }
.tarjeta.llamada { border-color: #6B5520; }
.chuleta summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; color: #FFE8A3; }
.chuleta-texto { font-size: 15px; line-height: 1.5; }
.chuleta-texto h3, .chuleta-texto h4, .chuleta-texto h5 { margin: 14px 0 6px; font-size: 15px; }
.chuleta-texto blockquote { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: var(--linea); color: var(--suave); }
.chuleta-texto hr { border: 0; border-top: 1px solid var(--borde); margin: 12px 0; }
.chuleta-texto ul { padding-left: 20px; margin: 4px 0 8px; }
.enlace-pequeno { font-size: 13px; color: var(--tenue); }
.vacio-grande { padding: 24px 16px; text-align: center; color: var(--suave); background: var(--linea); border-radius: 16px; }
.mandados { margin-top: 20px; }
.contesto-grande { margin-top: 16px; }
.ver-todo { margin-top: 12px; }

/* ── Pilares ── */
.pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 16px; }
.pilar { display: flex; flex-direction: column; gap: 6px; padding: 20px 16px; border-radius: 16px; background: var(--tarjeta); border: 1px solid var(--borde); color: var(--texto); min-height: 120px; justify-content: center; }
.pilar .cifra { font-size: 34px; }
.pilar strong { font-size: 16px; }

/* ── Ficha completa (tablas como tarjetas) ── */
.md-tabla { display: grid; gap: 8px; margin: 8px 0 12px; }
.md-fila { background: var(--linea); border-radius: 12px; padding: 10px 12px; }
.md-fila p { margin: 0 0 4px; overflow-wrap: anywhere; }
.md-fila p:last-child { margin: 0; }
.ficha-completa { overflow-wrap: anywhere; }
.ver-ficha { margin-top: 10px; }