/* IMPERAX — Demostraciones
   Hereda por completo el sistema de styles.css: Obsidiana, Nieve, Platino,
   Geist y el verde de WhatsApp como único acento funcional.
   Aquí sólo vive lo específico de la consola de demostración. */

/* ---------- Cabecera de una página de demo ---------- */
.demo-hero{padding:110px 0 0; border-bottom:none;}
@media(max-width:860px){ .demo-hero{padding:80px 0 0;} }
.demo-hero h1{font-size:clamp(2.1rem,4.6vw,3.6rem); margin:32px 0 0; max-width:22ch;}
.demo-hero .lead{font-size:1.08rem; color:#96969d; max-width:680px; margin:32px 0 0; line-height:1.7;}

/* Aviso permanente de datos ficticios — sin color de alarma, sólo contraste */
.aviso-ficticio{margin-top:40px; border-left:2px solid var(--platino); padding:16px 22px;
  max-width:760px;}
.aviso-ficticio p{font-size:.95rem; color:var(--platino); line-height:1.65;}
.aviso-ficticio strong{color:var(--nieve); font-weight:500;}

/* ---------- Selector de sector ---------- */
.selector{margin-top:48px;}
.selector .rotulo{font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:#5a5a60;
  margin-bottom:16px; font-weight:500;}
.selector-opciones{display:flex; flex-wrap:wrap; gap:10px;}
.selector-opciones button{font-family:inherit; font-size:.92rem; font-weight:500; cursor:pointer;
  padding:12px 22px; min-height:46px; border-radius:100px; background:none; color:#9a9aa1;
  border:1px solid var(--linea-d);
  transition:color .3s var(--curva), border-color .3s var(--curva), background-color .3s var(--curva);}
.selector-opciones button:hover{color:var(--nieve); border-color:rgba(245,245,247,.4);}
.selector-opciones button[aria-pressed="true"]{background:var(--nieve); color:#000; border-color:var(--nieve);}

/* ---------- Consola: conversación + panel del sistema ---------- */
.consola{padding:64px 0 140px;}
@media(max-width:860px){ .consola{padding:48px 0 90px;} }
.consola-split{display:grid; grid-template-columns:1.02fr .98fr; gap:24px; align-items:start;}
@media(max-width:1040px){ .consola-split{grid-template-columns:1fr;} }

.consola .demo-hilo{min-height:440px; max-height:min(62vh,600px); overflow-y:auto; scroll-behavior:smooth;}
@media(max-width:1040px){ .consola .demo-hilo{max-height:none;} }

/* Indicador de escritura, tres puntos sobrios */
.escribiendo{align-self:flex-start; display:flex; gap:5px; padding:16px 18px; border-radius:18px;
  background:var(--velo-2); border-bottom-left-radius:6px;}
.escribiendo span{width:6px; height:6px; border-radius:50%; background:var(--platino);
  animation:puntear 1.3s ease-in-out infinite;}
.escribiendo span:nth-child(2){animation-delay:.16s;}
.escribiendo span:nth-child(3){animation-delay:.32s;}
@keyframes puntear{0%,60%,100%{opacity:.28; transform:translateY(0);}30%{opacity:1; transform:translateY(-3px);}}

/* Opciones que ofrece el asistente */
.opciones{display:flex; flex-direction:column; gap:10px; padding:0 22px 22px;
  border-top:1px solid var(--linea-d);}
.opciones-titulo{font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:#5a5a60;
  padding-top:20px; font-weight:500;}
.opciones button{font-family:inherit; font-size:.94rem; text-align:left; cursor:pointer;
  padding:14px 18px; min-height:48px; border-radius:14px; background:none; color:var(--nieve);
  border:1px solid var(--linea-d);
  transition:background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);}
.opciones button:hover{background:var(--nieve); color:#000; border-color:var(--nieve);}
.opciones button.principal{background:var(--wa); color:#fff; border-color:var(--wa); font-weight:500;}
.opciones button.principal:hover{background:#1fb757; border-color:#1fb757; color:#fff;}
.opciones:empty{display:none;}

/* =======================================================
   PANEL — "Lo que IMPERAX está haciendo"
   Cuatro bloques: flujo, agenda o inventario, ficha y destinos.
   El verde marca únicamente lo que ya se ejecutó.
   ======================================================= */
/* El panel es más alto que la pantalla: se fija arriba y desplaza por dentro,
   de modo que "Destinos conectados" siempre sea alcanzable. */
.panel{border:1px solid var(--linea-d); border-radius:26px; background:var(--velo-1);
  position:sticky; top:100px; max-height:calc(100vh - 128px); overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:rgba(245,245,247,.18) transparent;}
.panel::-webkit-scrollbar{width:4px;}
.panel::-webkit-scrollbar-track{background:transparent;}
.panel::-webkit-scrollbar-thumb{background:rgba(245,245,247,.18); border-radius:999px;}
.panel-cabecera{position:sticky; top:0; z-index:2;}
@media(max-width:1040px){ .panel{position:static; max-height:none; overflow:visible;} }

.panel-cabecera{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:20px 22px; border-bottom:1px solid var(--linea-d); background:#111112;}
.panel-cabecera h2{font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--nieve);
  font-weight:600; line-height:1.5;}
.panel-estado{flex:none; display:inline-flex; align-items:center; gap:8px; font-size:.72rem;
  letter-spacing:.1em; color:var(--platino); white-space:nowrap;}
.panel-estado::before{content:""; width:7px; height:7px; border-radius:50%; background:#3a3a40;
  transition:background-color .3s var(--curva);}
.panel-estado.activo{color:var(--nieve);}
.panel-estado.activo::before{background:var(--wa); animation:latir 1.6s ease-in-out infinite;}

.panel-bloque{padding:20px 22px; border-bottom:1px solid var(--linea-d);}
.panel-bloque:last-child{border-bottom:none;}
.panel-bloque[hidden]{display:none;}
.panel-rotulo{font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:#5a5a60;
  font-weight:500; margin-bottom:16px;}

/* --- Flujo --- */
.panel-lista{list-style:none; display:flex; flex-direction:column; gap:2px;
  max-height:236px; overflow-y:auto;}
.panel-lista li{display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:start;
  padding:11px 0; font-size:.92rem; line-height:1.5; color:var(--platino);
  opacity:0; transform:translateY(6px); animation:entrar .45s var(--curva) forwards;}
.panel-lista li::before{content:""; width:9px; height:9px; margin-top:5px; border-radius:50%;
  border:1px solid #3a3a40; justify-self:center; transition:background-color .35s var(--curva),
  border-color .35s var(--curva);}
.panel-lista li.corriendo::before{border-color:var(--platino); animation:latir 1s ease-in-out infinite;}
.panel-lista li.hecho::before{background:var(--wa); border-color:var(--wa);}
.panel-lista li b{grid-column:2; display:block; font-weight:500; color:#8b8b92; font-size:.92rem;}
.panel-lista li.hecho b{color:var(--nieve);}
.panel-lista li small{grid-column:2; display:block; margin-top:3px; font-size:.81rem; color:#5a5a60;}
.panel-lista li .ms{grid-column:3; font-size:.7rem; letter-spacing:.06em; color:#3f3f45; padding-top:2px;}
.panel-lista li.hecho .ms{color:#5a5a60;}
.panel-vacio{padding:11px 0; font-size:.92rem; color:#5a5a60; line-height:1.6;}

/* --- Agenda --- */
.agenda{display:flex; flex-direction:column; gap:8px;}
.agenda-fila{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border:1px solid var(--linea-d); border-radius:14px;
  transition:border-color .4s var(--curva), background-color .4s var(--curva), opacity .4s var(--curva);}
.agenda-hora{font-size:.92rem; color:#8b8b92;}
.agenda-estado{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#5a5a60;
  white-space:nowrap;}
.agenda.buscando .agenda-fila{animation:latir 1.1s ease-in-out infinite;}
.agenda-fila.libre{border-color:rgba(245,245,247,.2);}
.agenda-fila.libre .agenda-hora{color:var(--nieve);}
.agenda-fila.atenuado{opacity:.35;}
.agenda-fila.reservado{border-color:var(--wa); background:rgba(37,211,102,.07);}
.agenda-fila.reservado .agenda-hora{color:var(--nieve); font-weight:500;}
.agenda-fila.reservado .agenda-estado{color:var(--wa);}
/* En pantallas estrechas la hora y el estado no caben en una línea:
   se apilan en lugar de partir la hora en tres renglones. */
@media(max-width:520px){
  .agenda-fila{flex-direction:column; align-items:flex-start; gap:7px;}
  .agenda-estado{font-size:.68rem;}
}

/* --- Inventario --- */
.inventario{display:flex; flex-direction:column; gap:6px;}
.inv-cabecera,.inv-fila{display:grid; grid-template-columns:64px repeat(4,1fr); gap:6px; align-items:center;}
.inv-cabecera span{font-size:.7rem; letter-spacing:.14em; color:#5a5a60; text-align:center;}
.inv-color{font-size:.86rem; color:#8b8b92;}
.inv-celda{display:flex; align-items:center; justify-content:center; height:38px; border-radius:10px;
  border:1px solid var(--linea-d); font-size:.86rem; color:#3f3f45;
  transition:border-color .4s var(--curva), background-color .4s var(--curva), color .4s var(--curva);}
.inv-celda.hay{color:#8b8b92;}
.inv-celda.marcado{border-color:var(--wa); background:rgba(37,211,102,.1); color:var(--wa); font-weight:600;}
.inventario.buscando .inv-celda.hay{animation:latir 1.1s ease-in-out infinite;}

/* --- Ficha del contacto --- */
.ficha{display:flex; flex-direction:column;}
.ficha-fila{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid rgba(245,245,247,.06);
  opacity:0; animation:entrar .4s var(--curva) forwards;}
.ficha-fila:last-child{border-bottom:none;}
.ficha dt{font-size:.8rem; color:#5a5a60; white-space:nowrap;}
.ficha dd{font-size:.9rem; color:var(--nieve); text-align:right;}

/* --- Destinos conectados --- */
.integraciones{list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
.integraciones li{display:inline-flex; align-items:center; gap:9px; font-size:.8rem; color:#4e4e55;
  padding:9px 14px; border-radius:100px; border:1px solid var(--linea-d);
  transition:color .4s var(--curva), border-color .4s var(--curva);}
.integraciones li::before{content:""; width:6px; height:6px; border-radius:50%; background:#3a3a40;
  transition:background-color .4s var(--curva);}
.integraciones li.activo{color:var(--nieve); border-color:rgba(245,245,247,.24);}
.integraciones li.activo::before{background:var(--wa);}

/* Pie de la consola: reiniciar y sello de datos ficticios */
.consola-pie{display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap; margin-top:28px; padding-top:24px; border-top:1px solid var(--linea-d);}
.consola-pie .sello{font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#5a5a60;}
.btn-reiniciar{font-family:inherit; font-size:.92rem; font-weight:500; cursor:pointer;
  padding:13px 24px; min-height:46px; border-radius:100px; background:none; color:var(--nieve);
  border:1px solid rgba(245,245,247,.3);
  transition:background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva);}
.btn-reiniciar:hover{background:var(--nieve); color:#000; border-color:var(--nieve);}

/* ---------- Cierre: siguiente nivel ---------- */
.siguiente{padding:130px 0; border-top:1px solid var(--linea-d); border-bottom:1px solid var(--linea-d);}
@media(max-width:860px){ .siguiente{padding:90px 0;} }
.siguiente.claro{border-color:var(--linea-c);}
.siguiente h2{font-size:clamp(2rem,4.4vw,3.4rem); margin-top:26px; max-width:20ch;}
.siguiente p{margin-top:28px; font-size:1.06rem; color:#96969d; max-width:660px; line-height:1.7;}
.siguiente.claro p{color:#4c4c53;}
.siguiente .precio-linea{margin-top:30px; font-size:1.02rem; font-weight:500; letter-spacing:-.02em;
  color:var(--nieve);}
.siguiente.claro .precio-linea{color:#000;}
.siguiente .acciones{display:flex; gap:14px; flex-wrap:wrap; margin-top:44px;}

/* ---------- Demo privada: bienvenida ---------- */
.privada{padding:110px 0 140px; min-height:70vh;}
@media(max-width:860px){ .privada{padding:80px 0 90px;} }
.privada h1{font-size:clamp(2rem,4.4vw,3.2rem); margin:32px 0 0; max-width:20ch;}
.privada .lead{font-size:1.06rem; color:#96969d; max-width:640px; margin:30px 0 0; line-height:1.7;}
.privada-datos{list-style:none; margin:38px 0 0; display:flex; flex-direction:column; gap:12px;
  max-width:640px;}
.privada-datos li{display:flex; gap:12px; font-size:.98rem; color:#b4b4bb; line-height:1.55;}
.privada-datos li::before{content:"·"; color:var(--platino); flex:none;}
.consentimiento{display:flex; gap:14px; align-items:flex-start; margin:42px 0 0; max-width:640px;
  cursor:pointer;}
.consentimiento input{appearance:none; -webkit-appearance:none; flex:none; width:22px; height:22px;
  margin-top:2px; border:1px solid rgba(245,245,247,.4); border-radius:6px; cursor:pointer;
  background:none; transition:background-color .25s var(--curva), border-color .25s var(--curva);}
.consentimiento input:checked{background:var(--nieve); border-color:var(--nieve);}
.consentimiento input:checked::after{content:"✓"; display:block; text-align:center; color:#000;
  font-size:.86rem; line-height:20px;}
.consentimiento span{font-size:.96rem; color:#96969d; line-height:1.6;}
.privada .btn[disabled]{opacity:.4; pointer-events:none;}

/* ---------- Demo privada: conversación ---------- */
.chat-privado{margin-top:44px;}
.chat-privado .demo-hilo{min-height:400px; max-height:min(58vh,560px); overflow-y:auto;}
.contador{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--platino);}
.contador.bajo{color:var(--nieve);}
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-top:24px;}
.chips button{font-family:inherit; font-size:.86rem; cursor:pointer; padding:10px 16px; min-height:40px;
  border-radius:100px; background:var(--velo-1); color:#b4b4bb; border:1px solid var(--linea-d);
  transition:color .25s var(--curva), border-color .25s var(--curva);}
.chips button:hover{color:var(--nieve); border-color:rgba(245,245,247,.4);}
.chips-nota{margin-top:16px; font-size:.9rem; color:#5a5a60; line-height:1.6;}
.campo{display:flex; gap:12px; margin-top:28px; align-items:flex-end;}
.campo textarea{flex:1; font-family:inherit; font-size:1rem; line-height:1.55; color:var(--nieve);
  background:var(--velo-1); border:1px solid var(--linea-d); border-radius:18px; padding:16px 18px;
  resize:none; min-height:56px; max-height:160px;
  transition:border-color .25s var(--curva);}
.campo textarea::placeholder{color:#5a5a60;}
.campo textarea:focus{outline:none; border-color:rgba(245,245,247,.4);}
.campo .btn{flex:none;}
.estado-linea{margin-top:14px; font-size:.9rem; color:var(--platino); line-height:1.6; min-height:1.4em;}
.estado-linea.error{color:var(--nieve);}

/* ---------- Acceso inválido ---------- */
.acceso-invalido{min-height:80vh; display:flex; align-items:center; text-align:center; padding:110px 0;}
.acceso-invalido .kicker{justify-content:center;}
.acceso-invalido h1{font-size:clamp(2.1rem,5.4vw,3.8rem); margin-top:28px;}
.acceso-invalido p{color:var(--platino); font-size:1.08rem; margin:28px auto 46px; max-width:520px;
  line-height:1.7;}
.acceso-invalido .hero-cta{justify-content:center;}

@media(prefers-reduced-motion:reduce){
  .panel-lista li,.ficha-fila{opacity:1; transform:none; animation:none;}
  .panel-lista li.corriendo::before,.panel-estado.activo::before,
  .agenda.buscando .agenda-fila,.inventario.buscando .inv-celda.hay{animation:none;}
  .escribiendo span{animation:none; opacity:.6;}
  .consola .demo-hilo{scroll-behavior:auto;}
}

/* El pie usa .foot-bottom y .foot-top: sus enlaces tambien deben
   alcanzar la superficie tactil minima. */
.foot-bottom a,
.foot-top .brand,
footer .brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
}