/* =========================================================
   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); }

/* =========================================================
   LAS DOS DEMOSTRACIONES DE EMPRESAS (abogado y notaría)
   =========================================================
   Esas dos pantallas usan las hojas de los paneles reales
   (lawyer-workspace.css y notary-workspace.css), así que aquí solo
   está lo que es propio de la demostración.
   ========================================================= */

/* El cierre cuando va suelto en la página, y no dentro de una tarjeta
   de trámite terminado como en el demo de vehículos. */
.demo-cierre-suelto {
  margin: 24px 0 8px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-2);
}

/* El distintivo de los documentos que el cliente ya entregó. En el panel
   real cada uno lleva su botón de descarga; en la demostración no hay
   documentos, así que se marca que llegaron y nada más. */
.demo-doc-marca {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-3);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

/* La cabecera del panel de notaría lleva el sello y el aviso, así que
   el título necesita alinearlos. */
.page-header h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

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

/* El distintivo va pegado a la derecha y del tamaño de su texto: sin
   esto se estira con el .file-item y parece una caja de texto vacía. */
.file-item .demo-doc-marca {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Las fechas propuestas, a lo ancho de la fila.
   La hoja del panel dice que este bloque «ocupa todo el ancho», pero no
   hay ninguna regla que lo haga: se quedaba en una columna de 150px con
   las tres fechas en `nowrap`, y se salían por encima de la columna de
   al lado. Va aquí y no en notary-workspace.css porque este marcado solo
   lo pinta la demostración; el panel real no lo usa. */
.info-grid .item-fechas {
  grid-column: 1 / -1;
}