/* =========================================================
   demo.css — Lo propio de la pantalla de demostración
   RUTH.il

   El resto del aspecto sale de las mismas hojas que el trámite de
   verdad (tokens, chat, vehicles, navbar). Aquí solo está:

     · el distintivo de «Demostración», para que nadie confunda esta
       pantalla con el trámite real;
     · el botón de crear cuenta de la barra superior;
     · la tarjeta del final, que sustituye a la descarga del documento;
     · el arreglo de la tabla de resumen, que venía con una clase de
       Bootstrap que la dejaba oscura también en modo claro.

   Todo usa las variables del tema, así que funciona en claro y en
   oscuro sin escribir dos veces cada color.
   ========================================================= */


/* ---------- Cabecera del chat ---------- */

.demo-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}

.demo-cab > div:first-child {
  /* Ocupa el hueco que quede, pero sin empujar al botón a otra línea
     hasta que de verdad no quepan los dos. */
  flex: 1 1 320px;
  min-width: 0;
}

.demo-cab h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* La advertencia de que esto no guarda nada.
   No va en el <p> de la cabecera porque esa regla pone el texto en
   mayúsculas con espaciado, y una frase larga así no se lee.

   Los selectores de abajo llevan el padre a propósito. Las hojas de las
   tres pantallas ponen las mayúsculas con `.chat-header p` y
   `.page-header .page-subtitle`, que pesan más que una sola clase: sin
   igualar ese peso, el aviso salía en mayúsculas y espaciado —tres
   líneas gritadas justo debajo del título— aunque aquí dijera que no. */
.chat-header .demo-aviso,
.page-header .demo-aviso,
.demo-cab .demo-aviso,
.demo-aviso {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 8px 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: normal;
}

.demo-aviso i { color: var(--accent); flex-shrink: 0; }

/* El sello. Va junto al título y no en una esquina a propósito: si
   alguien enseña esta pantalla en una pantalla grande, tiene que leerse
   desde el fondo de la sala que es una demostración. */
.demo-sello {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--magenta-border);
  background: rgba(var(--magenta-rgb), .12);
  color: var(--magenta-texto);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.demo-ejemplo {
  flex-shrink: 0;
  white-space: nowrap;
}


/* ---------- Botones ----------
   .btn-principal y .btn-suave viven en components/panel/base-ui.css,
   que es la hoja del panel y no la carga esta pantalla. Se repiten aquí
   con los mismos tokens en vez de arrastrar una hoja entera de estilos
   de tablas y paneles que aquí no pinta nada. */

.demo-cierre .btn,
.demo-ejemplo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: var(--tactil-min, 44px);
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s, filter .15s;
}

.demo-cierre .btn-principal {
  background: var(--accent);
  color: var(--bg);
}

.demo-cierre .btn-suave {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-strong);
}

.demo-cierre .btn-suave:hover {
  background: var(--bg-3);
  color: var(--text-1);
}

.demo-cierre .btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- El botón «Ver ejemplo» · MAGENTA MACIZO ----------
   Fondo magenta macizo como el círculo del icono. El texto y el
   icono en blanco para que se lean sobre el magenta en los dos temas. */
.demo-ejemplo {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #FFFFFF;
}

.demo-ejemplo i { color: #FFFFFF; }

.demo-ejemplo:hover {
  background: var(--magenta-texto);
  border-color: var(--magenta-texto);
  color: #FFFFFF;
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- LA BARRA SUPERIOR ----------
   Las tres demostraciones llevan la barra de las portadas, para que se
   pueda volver a Trámites o a Negocios desde dentro del recorrido. Todo
   su aspecto sale de components/navbar/navbar-landing.css; aquí solo
   está lo que cambia por ir en una pantalla sin el contenedor .wrap de
   la portada.

   El menú del teléfono necesita su propio hueco lateral: en la portada
   se lo pone el .wrap, y aquí la barra va suelta dentro de la cabecera.
   Se le dan los mismos 16px que navbar.css le da a la barra por debajo
   de 768px, que es el único ancho donde este menú llega a verse. */
.site-header > .mobile-menu { padding-left: 16px; padding-right: 16px; }
.site-header > .mobile-menu.is-open { padding: 18px 16px 22px; }


/* ---------- La tarjeta del final ----------
   Sustituye a la descarga del documento: enseña qué contrato saldría y
   lleva a crear la cuenta. */

.demo-cierre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  max-width: 560px;
}

.demo-cierre-cab {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.demo-cierre-cab i {
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1.2;
}

.demo-cierre-cab strong {
  display: block;
  font-size: 1rem;
  color: var(--text-1);
  margin-bottom: 2px;
}

.demo-cierre-cab span {
  font-size: .85rem;
  color: var(--text-3);
}

.demo-tabla {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px 14px;
}

.demo-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  font-size: .86rem;
  border-bottom: 1px solid var(--border);
}

.demo-fila:last-child { border-bottom: none; }

.demo-fila span { color: var(--text-3); flex-shrink: 0; }

.demo-fila b {
  color: var(--text-1);
  font-weight: 600;
  text-align: right;
}

.demo-nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--text-3);
}

.demo-acciones {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}


/* ---------- La tabla de resumen ----------
   El archivo original la pinta con `table-dark`, la clase de Bootstrap
   que fuerza fondo oscuro. En modo claro salía un bloque negro en medio
   de una pantalla blanca. Aquí se le quitan los colores propios para
   que siga al tema, como el resto. */

.chat-wrapper .table.table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-1);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--text-1);
  --bs-table-hover-bg: var(--bg-3);
  --bs-table-hover-color: var(--text-1);
  background: var(--bg-3);
  border-radius: 10px;
  overflow: hidden;
  margin: 0;
}

.chat-wrapper .table.table-dark td,
.chat-wrapper .table.table-dark th {
  color: var(--text-1);
  border-color: var(--border);
  font-size: .85rem;
  vertical-align: middle;
}

.chat-wrapper .table.table-dark td:first-child {
  color: var(--text-3);
  white-space: nowrap;
}


/* ---------- Pantallas estrechas ---------- */

@media (max-width: 720px) {
  .demo-cab { flex-direction: column; }
  .demo-ejemplo { width: 100%; }
  .demo-acciones { flex-direction: column; }
  .demo-acciones .btn { width: 100%; }
}

/* El cierre de verdad, dentro de la tarjeta de trámite finalizado. */
.demo-cierre-final {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.demo-cierre-final p {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-3);
}

.demo-cierre-final strong { color: var(--text-2); }

.demo-cierre-final .btn,
.demo-cierre-final .demo-acciones .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: var(--tactil-min, 44px);
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, transform .15s, filter .15s;
}

.demo-cierre-final .btn-principal { background: var(--accent); color: var(--bg); }

.demo-cierre-final .btn-suave {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-strong);
}

.demo-cierre-final .btn-suave:hover { background: var(--bg-3); color: var(--text-1); }
.demo-cierre-final .btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* El aviso, cuando va en una cabecera de chat. */
.chat-header .demo-aviso {
  max-width: 62ch;
}

/* =========================================================
   Demo del chat en el celular (30/10/2026)
   La cabecera de la demo (título + sello + subtítulo + aviso + botón
   «Ver ejemplo» a todo el ancho) medía ~400 px en un teléfono de 360:
   a la conversación le quedaban 50–130 px. Aquí se compacta: el botón
   va pequeño al lado del título, el subtítulo se oculta y el aviso
   queda en una línea corta.
   ========================================================= */
@media (max-width: 720px) {
  /* Rejilla: título | botón arriba; el aviso debajo, a todo el ancho. */
  .chat-panel.full-width .demo-cab {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: start;
  }
  .chat-panel.full-width .demo-cab > div:first-child { display: contents; }
  .chat-panel.full-width .demo-cab h1 { grid-column: 1; grid-row: 1; display: block; font-size: 1.05rem; line-height: 1.3; }
  .chat-panel.full-width .demo-cab h1 .demo-sello { display: inline-block; vertical-align: middle; margin-left: 4px; }
  .chat-panel.full-width .demo-ejemplo { grid-column: 2; grid-row: 1; }
  .chat-panel.full-width .demo-cab .demo-aviso { grid-column: 1 / -1; }
  .chat-panel.full-width .demo-cab h1 .demo-sello { font-size: .6rem; }
  .chat-panel.full-width .demo-cab > div:first-child > p:not(.demo-aviso) { display: none; }
  .chat-panel.full-width .demo-cab .demo-aviso { font-size: .72rem; margin-top: 4px; }
  .chat-panel.full-width .demo-ejemplo {
    width: auto; flex: 0 0 auto; min-height: 40px; padding: 8px 12px; font-size: .8rem; white-space: nowrap;
  }
}
@media (max-width: 950px) and (max-height: 560px) {
  .chat-panel.full-width .demo-cab .demo-aviso { display: none; }
}

/* La demo usa la barra de la portada, que ocupa su propio espacio arriba
   (no flota como la de los trámites). La página es una columna del alto
   visible: la barra arriba y el chat llena lo que queda, en celular y en
   computadora. Antes se pasaba 64–73 px y había que desplazar la página
   para ver la barra de escribir. */
body:has(> .site-header + .workspace > .chat-panel.full-width) {
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
}
.site-header + .workspace:has(> .chat-panel.full-width) {
  flex: 1 1 auto; min-height: 0; height: auto; overflow: hidden; box-sizing: border-box;
  padding-top: 12px;
}
.site-header + .workspace > .chat-panel.full-width { height: 100%; min-height: 0; }

/* REGISTRO 2026-10-30 · Demo del chat: cabecera compacta en el celular y sin pasarse del alto de la pantalla en computadora. — cambio por Claude */
/* REGISTRO 2026-11-05 · Quitados los estilos de las demos de abogado y notaría (se borraron: ningún botón llevaba a ellas). — cambio por Claude */