/* Panel del asistente — mismo lenguaje visual que el panel de Prospectos MDD (tema oscuro, Geist). */
@font-face { font-family: 'Geist'; src: url(fuentes/geist-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(fuentes/geist-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url(fuentes/geist-600.woff2) format('woff2'); font-weight: 600 700; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fuentes/geist-mono-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fuentes/geist-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --fondo: #101216; --superficie: #181A20; --superficie-2: #1F222A; --superficie-3: #272B35;
  --linea: rgba(222, 210, 241, 0.075); --linea-fuerte: rgba(222, 210, 241, 0.14);
  --texto: #FFFFFF; --texto-2: rgba(209, 219, 255, 0.72); --texto-3: rgba(209, 219, 255, 0.6);
  --verde: #3DD68C; --ambar: #F5B946; --rojo: #FF6B6B; --azul: #7AA2FF; --violeta: #B49CFF;
  --verde-suave: rgba(61, 214, 140, 0.12); --ambar-suave: rgba(245, 185, 70, 0.12);
  --rojo-suave: rgba(255, 107, 107, 0.12); --azul-suave: rgba(122, 162, 255, 0.12);
  --radio: 24px; --sombra: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
  --fuente: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body { font-family: var(--fuente); font-size: 14.5px; line-height: 1.5; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--azul); text-decoration: none; }
::selection { background: rgba(122, 162, 255, .35); }
:focus-visible { outline: 2px solid rgba(122, 162, 255, .7); outline-offset: 2px; border-radius: 8px; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; color: var(--texto-2); }
form { margin: 0; }

/* Estructura */
.marco { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 16px 14px; border-right: 1px solid var(--linea); background: #0D0F12; }
.marca { padding: 6px 10px 22px; }
.menu-seccion { color: var(--texto-3); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 14px 12px 6px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 999px; color: var(--texto-2); transition: background .15s, color .15s; }
.menu-item:hover { background: var(--superficie); color: var(--texto); }
.menu-item.activo { background: var(--texto); color: var(--fondo); font-weight: 600; }
.menu-item svg { width: 18px; height: 18px; flex: none; }
.lateral .pie { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 18px; background: var(--superficie); }
.iniciales { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie-3); font-weight: 600; font-size: 13px; flex: none; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: rgba(16, 18, 22, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linea); }
.barra h1 { font-size: 18px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.barra .derecha { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.contenido { padding: 24px 28px 64px; display: flex; flex-direction: column; gap: 20px; max-width: 1200px; width: 100%; }
.franja { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; font-size: 13px; background: var(--verde-suave); color: var(--verde); border: 1px solid rgba(61, 214, 140, .2); }
.franja.mal { background: var(--rojo-suave); color: var(--rojo); border-color: rgba(255, 107, 107, .2); }

/* Tarjetas y rejillas */
.tarjeta { background: var(--superficie); border-radius: var(--radio); padding: 22px; box-shadow: inset 0 0 0 1px var(--linea); }
.tarjeta h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.015em; }
.tarjeta .ayuda { color: var(--texto-3); font-size: 13px; margin: 0 0 16px; }
.rejilla { display: grid; gap: 16px; }
.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .etiqueta { color: var(--texto-3); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; }
.kpi .valor { font-family: var(--mono); font-size: 30px; font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; }
.kpi .detalle { color: var(--texto-2); font-size: 13px; }
.pista { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; margin-top: 4px; }
.pista > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7AA2FF, #B49CFF); }
.filas > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linea); }
.filas > div:last-child { border-bottom: 0; }
.filas .clave { color: var(--texto-2); }

.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tarjeta h2 .etq { margin-left: 8px; vertical-align: 2px; }
.funcion { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); }
.funcion b { font-weight: 600; letter-spacing: -0.015em; }
.funcion span { color: var(--texto-2); font-size: 13.5px; }
.funcion em { font-style: normal; color: var(--azul); font-size: 13px; margin-top: auto; padding-top: 4px; }

/* Pláticas */
.platicas { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.platicas .filas a { color: var(--texto); }
.platicas .filas a.activo b { color: var(--azul); }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; padding: 4px; }
.burbuja { max-width: 80%; padding: 10px 14px; border-radius: 18px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea); font-size: 14px; }
.burbuja small { display: block; color: var(--texto-3); font-size: 11px; margin-bottom: 2px; }
.burbuja.ellos { align-self: flex-start; border-bottom-left-radius: 6px; }
.burbuja.raffit { align-self: flex-end; background: var(--azul-suave); border-bottom-right-radius: 6px; }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font-weight: 600; background: var(--superficie-2); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); transition: transform .1s, background .15s; white-space: nowrap; }
.boton:hover { background: var(--superficie-3); }
.boton:active { transform: scale(.98); }
.boton.primario { background: var(--texto); color: var(--fondo); box-shadow: none; }
.boton.primario:hover { background: #E8ECF5; }
.boton.verde { background: #25D366; color: #06210F; box-shadow: none; }
.boton.verde:hover { background: #3BE07A; }
.boton.peligro { color: var(--rojo); }
.boton.chico { height: 30px; padding: 0 12px; font-size: 13px; }
.boton.icono { width: 38px; padding: 0; }
.boton.icono.chico { width: 30px; }
.boton svg { width: 16px; height: 16px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Formularios */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 12.5px; color: var(--texto-2); }
.campo small { color: var(--texto-3); font-size: 12px; }
.entrada { height: 40px; padding: 0 14px; border-radius: 14px; border: 0; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); outline: none; min-width: 0; width: 100%; }
.entrada:focus { box-shadow: inset 0 0 0 1px rgba(122, 162, 255, .7); }
.entrada::placeholder { color: var(--texto-3); }
.casilla { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-3); font-size: 12px; cursor: pointer; }
.casilla input { accent-color: var(--azul); }

/* Etiquetas de estado */
.etq { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--superficie-3); color: var(--texto-2); white-space: nowrap; }
.etq::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etq.verde { background: var(--verde-suave); color: var(--verde); }
.etq.ambar { background: var(--ambar-suave); color: var(--ambar); }
.etq.rojo { background: var(--rojo-suave); color: var(--rojo); }
.etq.azul { background: var(--azul-suave); color: var(--azul); }

/* Bitácora */
.bitacora { margin: 0; padding: 18px; border-radius: 18px; background: #0B0D10; box-shadow: inset 0 0 0 1px var(--linea); font: 12.5px/1.6 var(--mono); color: var(--texto-2); white-space: pre-wrap; overflow-x: auto; max-height: 70vh; }

/* Entrada */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(800px 500px at 70% 0%, rgba(122, 162, 255, .10), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(61, 214, 140, .07), transparent 60%), var(--fondo); }
.acceso .caja { width: min(420px, 100%); background: var(--superficie); border-radius: 32px; padding: 34px; box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); display: flex; flex-direction: column; gap: 16px; animation: subir .45s cubic-bezier(.2, .7, .2, 1) both; }
.acceso h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.035em; margin: 6px 0 0; }
.acceso p { color: var(--texto-2); margin: 0; font-size: 13.5px; }
.error { color: var(--rojo); font-size: 13px; }

/* Logo */
.logo { display: flex; align-items: center; gap: 11px; }
.logo svg { flex: none; }
.logo-texto b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
  background: linear-gradient(90deg, #fff 0%, #fff 40%, var(--azul) 50%, #fff 60%, #fff 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo-logo 7s ease-in-out infinite; }
.logo-texto small { display: block; color: var(--texto-3); font-weight: 500; font-size: 11.5px; margin-top: 2px; }
.logo.vertical { flex-direction: column; gap: 14px; text-align: center; }
.logo.vertical .logo-texto b { font-size: 30px; }
.logo .nodo { animation: pulso 2.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.logo .nodo:nth-of-type(2) { animation-delay: .5s; } .logo .nodo:nth-of-type(3) { animation-delay: 1s; } .logo .nodo:nth-of-type(4) { animation-delay: 1.5s; }
@keyframes brillo-logo { 0%, 60% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Movimiento */
.rejilla > .tarjeta { animation: subir .45s cubic-bezier(.2, .7, .2, 1) both; }
.rejilla > .tarjeta:nth-child(2) { animation-delay: .07s; } .rejilla > .tarjeta:nth-child(3) { animation-delay: .14s; } .rejilla > .tarjeta:nth-child(4) { animation-delay: .21s; }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Celular: el menú lateral pasa a una franja arriba */
@media (max-width: 1100px) { .r4, .r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .marco { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .marca { padding: 0 8px 0 0; } .logo-texto, .menu-seccion { display: none; }
  .menu-item { padding: 8px 12px; white-space: nowrap; }
  .lateral .pie { margin: 0 0 0 auto; padding: 4px; background: none; } .lateral .pie .quien { display: none; }
  .r2, .r3, .r4, .campos, .platicas { grid-template-columns: 1fr; }
  .contenido { padding: 16px; } .barra { padding: 12px 16px; position: static; }
}

/* Navegador remoto */
.pantalla { display: block; width: 100%; max-width: 1280px; aspect-ratio: 1280 / 800; margin: 12px 0; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--linea-fuerte); background: #0B0D10; cursor: crosshair; }