/* ==========================================================================
   domco conecta — simulador de demos
   Mismos tokens que domco.net, en un archivo aparte: estas páginas cargan
   solas, sin el CSS del sitio.
   ========================================================================== */

:root{
  --ink:#0B0B0C;
  --paper:#F7F5F2;
  --paper-2:#EDE9E3;
  --paper-3:#E2DCD3;
  --copper:#C8622D;
  --copper-2:#E08A4F;
  --petroleo:#14434F;
  --petroleo-2:#1D5A6A;
  --muted:#6B6560;
  --linea:#E2DCD3;
  --fondo:#EFECE6;
  --panel:#FFFFFF;
  --burbuja-bot:#FFFFFF;
  --texto:#0B0B0C;
  --opcion:#14434F;
  --opcion-borde:#14434F;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --display:'Inter Tight','Inter',-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fondo:#121214; --panel:#17171A; --burbuja-bot:#1F1F23;
    --paper-2:#1F1F23; --paper-3:#2A2A2E;
    --linea:#2A2A2E; --muted:#9A938B; --texto:#F2EFEA;
    --opcion:#6FB3C4; --opcion-borde:#2E6B7C;
  }
}
:root[data-theme="dark"]{
  --fondo:#121214; --panel:#17171A; --burbuja-bot:#1F1F23;
  --paper-2:#1F1F23; --paper-3:#2A2A2E;
  --linea:#2A2A2E; --muted:#9A938B; --texto:#F2EFEA;
  --opcion:#6FB3C4; --opcion-borde:#2E6B7C;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0 }
body{
  background:var(--fondo); color:var(--texto);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit }

/* ---------- Cinta superior ---------- */
.cinta{
  border-bottom:1px solid var(--linea); background:var(--panel);
  position:sticky; top:0; z-index:5;
}
.cinta .dentro{
  max-width:1120px; margin-inline:auto;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.volver{
  font-family:var(--display); font-weight:600; font-size:.95rem;
  letter-spacing:-0.025em; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.volver .punto{ width:9px; height:9px; border-radius:2px; background:var(--copper); flex:none }
.volver .gris{ color:var(--muted); font-weight:500 }
.cinta .otras{ font-size:.85rem; color:var(--muted); text-decoration:none }
.cinta .otras:hover{ color:var(--copper) }

/* ---------- Envoltura ---------- */
.envoltura{
  max-width:1120px; margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.5rem);
  padding-block:clamp(1.35rem,3.5vw,2.25rem);
}

/* Encabezado en dos columnas para que la conversación quepa en la primera
   pantalla: el titular a la izquierda, la explicación a la derecha. */
.cabeza{ margin-bottom:clamp(1.25rem,3vw,1.85rem) }
@media (min-width:920px){
  .cabeza{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(1.5rem,4vw,3rem); align-items:end;
  }
  .cabeza .eyebrow{ grid-column:1 }
  .cabeza h1{ grid-column:1; margin-bottom:0 }
  .cabeza .entradilla{ grid-column:2; grid-row:2 }
  .cabeza .aviso{ grid-column:2; grid-row:3; justify-self:start; margin-top:.9rem }
}
.cabeza .eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--copper); margin:0;
}
.cabeza h1{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.6rem,1.1rem+1.7vw,2.25rem);
  letter-spacing:-0.035em; line-height:1.08;
  margin:.7rem 0 .6rem; max-width:22ch; text-wrap:balance;
}
.cabeza p{ color:var(--muted); max-width:64ch; margin:0; font-size:.98rem }
.aviso{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1rem; padding:.3rem .75rem;
  border:1px solid var(--linea); border-radius:100px;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.aviso::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--copper) }

/* ---------- Rejilla ---------- */
.tablero{ display:grid; gap:clamp(1.25rem,3vw,2rem); align-items:start }
@media (min-width:920px){ .tablero{ grid-template-columns:minmax(0,380px) minmax(0,1fr) } }

/* ---------- Teléfono ---------- */
.telefono{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  height:min(600px,74vh); min-height:440px;
  box-shadow:0 12px 34px rgba(11,11,12,.10);
}
.barra{
  background:var(--petroleo); color:#fff;
  padding:.8rem 1rem; display:flex; align-items:center; gap:.7rem; flex:none;
}
.avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--petroleo-2); display:grid; place-items:center; font-size:1.05rem;
}
.barra .quien{ font-weight:600; font-size:.95rem; letter-spacing:-0.01em }
.barra .estado{ font-size:.75rem; opacity:.72 }

.hilo{
  flex:1; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--fondo);
}
.burbuja{
  max-width:86%; padding:.6rem .8rem; border-radius:10px;
  font-size:.92rem; line-height:1.5; white-space:pre-wrap;
  animation:entra .22s ease-out;
}
@keyframes entra{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.burbuja.bot{
  background:var(--burbuja-bot); align-self:flex-start;
  border:1px solid var(--linea); border-bottom-left-radius:3px;
}
.burbuja.yo{
  background:var(--copper); color:#fff;
  align-self:flex-end; border-bottom-right-radius:3px;
}
.burbuja b{ font-weight:600 }
.burbuja i{ opacity:.78; font-style:italic }

.escribiendo{
  align-self:flex-start; display:flex; gap:3px;
  background:var(--burbuja-bot); border:1px solid var(--linea);
  padding:.7rem .8rem; border-radius:10px; border-bottom-left-radius:3px;
}
.escribiendo span{
  width:6px; height:6px; border-radius:50%; background:var(--muted);
  animation:late 1.1s infinite;
}
.escribiendo span:nth-child(2){ animation-delay:.18s }
.escribiendo span:nth-child(3){ animation-delay:.36s }
@keyframes late{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:.9 } }

@media (prefers-reduced-motion:reduce){
  .burbuja,.bitacora li{ animation:none }
  .escribiendo span{ animation:none; opacity:.5 }
}

/* ---------- Zona de respuesta ---------- */
.responder{
  flex:none; border-top:1px solid var(--linea);
  padding:.75rem; background:var(--panel);
  display:flex; flex-direction:column; gap:.45rem;
  max-height:46%; overflow-y:auto;
}
.opcion{
  font:inherit; font-size:.9rem; font-weight:500;
  padding:.6rem .9rem; cursor:pointer;
  background:transparent; color:var(--opcion);
  border:1px solid var(--opcion-borde); border-radius:8px;
  text-align:center; transition:background .15s ease,color .15s ease;
}
.opcion:hover{ background:var(--petroleo); color:#fff; border-color:var(--petroleo) }
.opcion:focus-visible{ outline:2px solid var(--copper); outline-offset:2px }

.campo{ display:flex; gap:.45rem }
.campo input{
  flex:1; font:inherit; font-size:.92rem; min-width:0;
  padding:.6rem .8rem; border:1px solid var(--linea);
  border-radius:8px; background:var(--fondo); color:inherit;
}
.campo input:focus-visible{ outline:2px solid var(--copper); outline-offset:1px }
.campo button{
  font:inherit; font-size:.9rem; font-weight:500; cursor:pointer;
  padding:.6rem 1rem; border:0; border-radius:8px;
  background:var(--copper); color:#fff;
}
.campo button:focus-visible{ outline:2px solid var(--texto); outline-offset:2px }
.pista{ font-size:.77rem; color:var(--muted); text-align:center }

/* ---------- Panel lateral ---------- */
.lado{ display:flex; flex-direction:column; gap:1.25rem }
.caja{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:12px; padding:clamp(1.1rem,2.5vw,1.6rem);
}
.caja h2{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:-0.025em; margin:0 0 .3rem;
}
.caja .sub{ color:var(--muted); font-size:.88rem; margin:0 0 1rem }

.bitacora{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column }
.bitacora li{
  display:grid; grid-template-columns:auto 1fr; gap:.7rem;
  padding:.55rem 0; border-bottom:1px solid var(--linea);
  font-size:.88rem; line-height:1.45;
  animation:entra .3s ease-out;
}
.bitacora li:last-child{ border-bottom:0 }
.bitacora .marca-t{
  font-variant-numeric:tabular-nums; font-size:.74rem;
  color:var(--muted); padding-top:.15rem; white-space:nowrap;
}
.bitacora .vacio{
  display:block; color:var(--muted); font-size:.88rem;
  border:0; padding:.2rem 0; font-style:italic; animation:none;
}
.bitacora li.hito{ color:var(--copper); font-weight:500 }

.lectura{ font-size:.93rem; color:var(--muted) }
.lectura p{ margin:0 0 .8rem }
.lectura p:last-child{ margin-bottom:0 }
.lectura strong{ color:var(--texto); font-weight:600 }

.acciones{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem }
.btn{
  font:inherit; font-size:.88rem; font-weight:500; cursor:pointer;
  padding:.58rem 1rem; border-radius:8px; border:1px solid var(--linea);
  background:transparent; color:inherit; text-decoration:none;
  display:inline-flex; align-items:center; gap:.4rem;
}
.btn:hover{ border-color:var(--copper); color:var(--copper) }
.btn:focus-visible{ outline:2px solid var(--copper); outline-offset:2px }
.btn--cobre{ background:var(--copper); border-color:var(--copper); color:#fff }
.btn--cobre:hover{ background:#B25526; border-color:#B25526; color:#fff }

.pie{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  padding-top:1.25rem; border-top:1px solid var(--linea);
  font-size:.82rem; color:var(--muted); max-width:70ch;
}
.pie a{ color:var(--copper) }

/* ---------- Catálogo (índice de demos) ---------- */
.rejilla{
  display:grid; gap:1rem; margin-top:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.tarjeta{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:12px; padding:1.4rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.tarjeta .n{
  font-family:var(--display); font-size:.76rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--copper);
}
.tarjeta h2{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  letter-spacing:-0.025em; margin:0;
}
.tarjeta p{ margin:0; font-size:.9rem; color:var(--muted); flex:1 }
.tarjeta .btn{ align-self:flex-start; margin-top:.5rem }

/* ---------- Pestañas de la columna derecha ---------- */
.pestanas{
  display:flex; gap:.15rem; margin:0 0 1rem;
  border-bottom:1px solid var(--linea);
}
.pestanas button{
  font:inherit; font-family:var(--display); font-weight:600;
  font-size:.92rem; letter-spacing:-0.02em;
  background:transparent; border:0; cursor:pointer;
  color:var(--muted); padding:.2rem .1rem .6rem;
  margin-right:1.1rem; position:relative;
  display:inline-flex; align-items:center; gap:.4rem;
}
.pestanas button[aria-selected="true"]{ color:var(--texto) }
.pestanas button[aria-selected="true"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--copper);
}
.pestanas button:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:3px }
.punto-nuevo{ width:6px; height:6px; border-radius:50%; background:var(--copper); flex:none }

.sub-t{
  font-size:.7rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted);
  margin:1.4rem 0 .55rem;
}
.sub-t:first-child{ margin-top:.2rem }
.espera{ color:var(--muted); font-size:.9rem; font-style:italic; margin:.2rem 0 0 }

/* ---------- La ficha: el registro que se creó ---------- */
.ficha{ border:1px solid var(--linea); border-radius:10px; overflow:hidden }
.ficha-top{
  background:var(--paper-2); padding:.45rem .85rem;
  font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--linea);
}
.ficha-h{
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:-0.02em; padding:.8rem .85rem .2rem;
}
.ficha-dl{
  margin:0; padding:.35rem .85rem .85rem;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:1rem; row-gap:.35rem; font-size:.87rem;
}
.ficha-dl dt{ color:var(--muted); white-space:nowrap }
.ficha-dl dd{ margin:0; min-width:0 }

/* ---------- El aviso: una notificación, no un tablero ---------- */
.push{
  display:flex; flex-direction:column; gap:.2rem;
  background:var(--paper-2); border:1px solid var(--linea);
  border-left:3px solid var(--copper);
  border-radius:8px; padding:.7rem .85rem;
}
.push-app{
  font-size:.71rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--copper);
}
.push-txt{ font-size:.89rem; line-height:1.45 }

/* ---------- Las tres cifras ---------- */
.cifras{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.5rem;
}
.cifra{
  border:1px solid var(--linea); border-radius:8px;
  padding:.7rem .6rem; text-align:center;
}
.cifra .k{
  display:block; font-family:var(--display); font-weight:500;
  font-size:1.5rem; letter-spacing:-0.035em; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.cifra .t{
  display:block; margin-top:.2rem;
  font-size:.72rem; line-height:1.3; color:var(--muted);
}
.micro{
  font-size:.8rem; line-height:1.5; color:var(--muted);
  margin:.7rem 0 0;
}
.micro strong{ color:var(--texto); font-weight:600 }

/* ---------- Diagrama del mecanismo (catálogo) ---------- */
.diagrama{ margin:clamp(2rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.25rem) }
.diagrama svg{ display:block; width:100%; max-width:100%; height:auto }
.diagrama svg text{ font-family:var(--sans) }
.diagrama .dg-movil{ display:none }
.diagrama .solo-movil{ display:none }
.diagrama figcaption{
  margin-top:1.25rem; font-size:.9rem; line-height:1.6;
  color:var(--muted); max-width:70ch;
}
.diagrama figcaption strong{ color:var(--texto); font-weight:600 }
@media (max-width:760px){
  .diagrama .dg-escritorio{ display:none }
  .diagrama .dg-movil{ display:block }
  .diagrama .solo-movil{ display:inline }
}
/* El diagrama trae la paleta clara del sitio horneada en el SVG. En oscuro no
   se invierte —eso arruinaría el cobre, que es el único color con significado—:
   se apoya sobre su propio fondo claro, como una lámina impresa. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .diagrama svg{
    background:#F7F5F2; border-radius:12px;
    padding:clamp(.75rem,2vw,1.25rem);
  }
}
:root[data-theme="dark"] .diagrama svg{
  background:#F7F5F2; border-radius:12px;
  padding:clamp(.75rem,2vw,1.25rem);
}

.titulo-dg{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.25rem,1.05rem+.7vw,1.6rem);
  letter-spacing:-0.03em; line-height:1.15;
  margin:clamp(2rem,4vw,3rem) 0 0; max-width:26ch; text-wrap:balance;
}
.titulo-dg + .diagrama{ margin-top:1.25rem }