/* Estilos de la web de Glantek y de la zona de clientes.
   Colores sacados del logo (triángulos rojo y granate, rombo grafito). */

:root {
  --papel: #ffffff;
  --niebla: #f3f3f4;
  --linea: #dcdcdf;
  --grafito: #2a2a2d;
  --acero: #66666b;
  --rojo: #c81e2c;
  --rojo-hover: #a8151f;
  --granate: #7a2a2f;
  --rombo-claro: #77777c;
  --rombo-oscuro: #2a2a2d;
  --ok: #1f7a4d;
  --ok-fondo: #e6f3ec;
  --error: #b3261e;
  --error-fondo: #fbe9e8;
  --placa: #ffffff;           /* fondo de los logos de clientes: siempre blanco */
  --radio: 2px;
  --ancho: 1120px;
  --fuente: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #18181a;
    --niebla: #222225;
    --linea: #38383c;
    --grafito: #ececee;
    --acero: #a3a3a9;
    --rojo: #e2464c;
    --rojo-hover: #f0646a;
    --granate: #a9474e;
    --rombo-claro: #9a9aa0;
    --rombo-oscuro: #4a4a4f;
    --ok: #6fcf9a;
    --ok-fondo: #1c3127;
    --error: #ff8a80;
    --error-fondo: #3a1f1d;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--grafito);
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}

a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--rojo); }

:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

img { max-width: 100%; display: block; }

h1, h2, h3 { font-weight: 500; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; }
p { margin: 0; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .contenedor { padding: 0 16px; } }

/* --- Cabecera -------------------------------------------------------------- */

.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.marca { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.marca img { width: 34px; height: 34px; }
.marca span { font-size: 1.35rem; font-weight: 500; letter-spacing: 0.04em; }
.marca small { display: block; font-size: 0.72rem; color: var(--acero); letter-spacing: 0.06em; margin-top: -4px; }
.marca:hover { color: inherit; }

.enlace-menu { color: var(--acero); font-size: 0.95rem; text-decoration: none; padding: 8px 4px; }
.enlace-menu:hover { color: var(--rojo); text-decoration: underline; }

/* --- Botones y formularios ---------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--rojo); border-radius: var(--radio);
  background: var(--rojo); color: #fff;
  font: inherit; font-weight: 500; font-size: 1rem; text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--rojo-hover); border-color: var(--rojo-hover); color: #fff; }
.boton.secundario { background: transparent; color: var(--grafito); border-color: var(--linea); }
.boton.secundario:hover { border-color: var(--grafito); color: var(--grafito); }
.boton.pequeno { min-height: 36px; padding: 0 14px; font-size: 0.92rem; }
.boton.peligro { background: transparent; color: var(--error); border-color: var(--linea); }
.boton.peligro:hover { border-color: var(--error); }

label { display: block; font-size: 0.92rem; color: var(--acero); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=email], input[type=file], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: 1rem; color: var(--grafito);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--grafito); }
.campo { margin-bottom: 18px; }
.ayuda { font-size: 0.85rem; color: var(--acero); margin-top: 6px; }
.casilla { display: flex; gap: 10px; align-items: flex-start; color: var(--grafito); font-size: 1rem; }
.casilla input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--rojo); }

.aviso { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 24px; border-left: 3px solid; }
.aviso.ok { background: var(--ok-fondo); border-color: var(--ok); }
.aviso.error { background: var(--error-fondo); border-color: var(--error); }

/* --- Portada --------------------------------------------------------------- */

.portada { position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.portada .contenedor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
  min-height: min(78vh, 680px); gap: 32px; }
.portada h1 { max-width: 13ch; }
.portada .entradilla { font-size: 1.2rem; color: var(--acero); max-width: 46ch; margin-top: 24px; }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 36px; }
.portada .acciones a.correo { color: var(--acero); }

/* La "K" del logo, a lo grande */
.geometria { position: relative; height: 100%; min-height: 420px; }
.geometria svg { position: absolute; top: 50%; left: 0; width: 135%; height: auto; transform: translateY(-50%); }
.geometria .t-rojo { fill: var(--rojo); }
.geometria .t-granate { fill: var(--granate); }
.geometria .rombo-claro { stop-color: var(--rombo-claro); }
.geometria .rombo-oscuro { stop-color: var(--rombo-oscuro); }
/* El rombo entra girando una sola vez, al cargar la página */
.geometria .rombo { animation: girar-entrada 900ms cubic-bezier(.2,.7,.2,1) 150ms backwards;
  transform-box: fill-box; transform-origin: center; }
@keyframes girar-entrada { from { transform: rotate(-90deg) scale(.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .geometria .rombo { animation: none; } }

@media (max-width: 820px) {
  .portada .contenedor { grid-template-columns: 1fr; min-height: 0; padding-top: 40px; padding-bottom: 56px; gap: 0; }
  .geometria { min-height: 0; height: 170px; order: -1; margin-bottom: 28px; }
  .geometria svg { position: static; transform: none; width: auto; height: 100%; }
}

.servicios { padding: 88px 0; }
.servicios .rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 40px; }
.servicios h3 { padding-top: 18px; border-top: 2px solid var(--grafito); margin-bottom: 10px; }
.servicios p { color: var(--acero); }
@media (max-width: 820px) { .servicios { padding: 56px 0; } .servicios .rejilla { grid-template-columns: 1fr; gap: 32px; } }

.pie { background: var(--niebla); padding: 48px 0; font-size: 0.95rem; color: var(--acero); }
.pie .contenedor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pie strong { color: var(--grafito); font-weight: 500; display: block; margin-bottom: 6px; }
@media (max-width: 820px) { .pie .contenedor { grid-template-columns: 1fr; } }

/* --- Páginas interiores ------------------------------------------------ */

.pagina { padding: 56px 0 88px; }
.pagina .titulo { margin-bottom: 12px; }
.pagina .subtitulo { color: var(--acero); max-width: 60ch; margin-bottom: 40px; }
.volver { display: inline-block; color: var(--acero); margin-bottom: 24px; font-size: 0.95rem; }

/* Placa blanca para el logo del cliente (se ve bien en modo claro y oscuro) */
.placa { background: var(--placa); border: 1px solid var(--linea); border-radius: var(--radio);
  display: flex; align-items: center; justify-content: center; padding: 16px 20px; }
.placa img { max-height: 100%; width: auto; object-fit: contain; }
.placa .sin-logo { color: #2a2a2d; font-size: 1.3rem; font-weight: 500; }

/* Lista de clientes */
.lista-clientes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.lista-clientes li { border-bottom: 1px solid var(--linea); }
.lista-clientes a { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 28px; align-items: center;
  padding: 20px 0; text-decoration: none; }
.lista-clientes .placa { height: 88px; }
.lista-clientes .nombre { font-size: 1.3rem; font-weight: 500; }
.lista-clientes .detalle { color: var(--acero); font-size: 0.95rem; }
.lista-clientes .entrar { color: var(--rojo); font-weight: 500; }
.lista-clientes a:hover .nombre { color: var(--rojo); }
@media (max-width: 640px) {
  .lista-clientes a { grid-template-columns: 1fr; gap: 12px; }
  .lista-clientes .placa { height: 72px; justify-content: flex-start; }
}

/* Acceso (login) */
.acceso { max-width: 420px; margin: 0 auto; padding: 64px 0 96px; }
.acceso .placa { height: 110px; margin-bottom: 32px; }
.acceso h1 { font-size: 1.9rem; margin-bottom: 8px; }
.acceso .subtitulo { color: var(--acero); margin-bottom: 32px; }
.acceso .boton { width: 100%; }

/* Zona del cliente */
.barra-zona { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 48px; }
.barra-zona .placa { height: 76px; width: 260px; }
.barra-zona h1 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-right: auto; }

.proyecto { border-top: 2px solid var(--grafito); padding-top: 24px; margin-bottom: 56px; }
.proyecto .cabecera-proyecto { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.estado { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 28px; }
.estado span { font-size: 0.85rem; padding: 3px 10px; border: 1px solid var(--linea); border-radius: 999px; color: var(--acero); }
.estado span.destacado { border-color: var(--rojo); color: var(--rojo); }

.herramientas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.herramientas li { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.herramientas a, .herramientas .pronto { display: block; padding: 22px 24px; text-decoration: none; height: 100%; }
.herramientas a:hover { background: var(--niebla); color: inherit; }
.herramientas a:hover h3 { color: var(--rojo); }
.herramientas h3 { margin-bottom: 6px; }
.herramientas p { color: var(--acero); font-size: 0.95rem; }
.herramientas .pronto { color: var(--acero); }
.herramientas .pronto h3::after { content: "Próximamente"; font-size: 0.75rem; font-weight: 400; margin-left: 10px;
  padding: 2px 8px; border: 1px solid var(--linea); border-radius: 999px; vertical-align: middle; }
@media (max-width: 700px) { .herramientas { grid-template-columns: 1fr; } }

/* Registro de actividad: una fila por acción; en el móvil, cada fila se apila */
.registro { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--grafito); }
.registro > li { border-bottom: 1px solid var(--linea); padding: 16px 0 10px; border-left: 3px solid transparent; padding-left: 14px; }
.registro > li.fallo { border-left-color: var(--error); }
.registro .fila { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.6fr auto; gap: 20px; align-items: start; }
.registro small { display: block; color: var(--acero); font-size: 0.86rem; }
.registro .quien a { font-weight: 500; text-decoration: none; }
.registro .quien a:hover { text-decoration: underline; }
.registro .que strong { font-weight: 500; display: block; }
.registro .etiqueta { display: none; }
.registro .resultado { color: var(--grafito); }
.marca-ok, .marca-error { display: inline-block; font-size: 0.85rem; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.marca-ok { background: var(--ok-fondo); color: var(--ok); }
.marca-error { background: var(--error-fondo); color: var(--error); }
.registro details { margin-top: 8px; }
.registro summary { cursor: pointer; color: var(--acero); font-size: 0.86rem; width: max-content; }
.registro summary:hover { color: var(--rojo); }
.registro .json { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.registro .json .etiqueta { display: block; font-size: 0.82rem; color: var(--acero); margin-bottom: 4px; }
.registro pre { margin: 0; padding: 12px; background: var(--niebla); border-radius: var(--radio); font-size: 0.8rem;
  white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; }
@media (max-width: 900px) {
  .registro .fila { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .registro .quien { grid-column: 1; }
  .registro .estado-accion { grid-column: 2; grid-row: 1; }
  .registro .que, .registro .datos, .registro .resultado { grid-column: 1 / -1; }
  .registro .etiqueta { display: inline; color: var(--acero); margin-right: 6px; }
  .registro .json { grid-template-columns: 1fr; }
}
.cabecera-registro { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1.6fr auto; gap: 20px; padding: 0 0 10px 17px;
  color: var(--acero); font-size: 0.9rem; }
@media (max-width: 900px) { .cabecera-registro { display: none; } }

/* Socios y PIN */
.alta-socio h2 { margin-bottom: 16px; }
.campos-alta { display: grid; grid-template-columns: 1.4fr 1fr 150px auto; gap: 0 16px; align-items: end; }
.campos-alta .boton { margin-bottom: 18px; }
.alta-socio .ayuda { margin-top: -8px; }
input.pin { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
@media (max-width: 860px) { .campos-alta { grid-template-columns: 1fr; } .campos-alta .boton { width: 100%; } }

.barra-lista { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 8px 0 14px; }
.barra-lista h2 { font-size: 1.3rem; }
.barra-lista input { max-width: 320px; }
input[type=search] { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--grafito);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); }

.socios { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--grafito); }
.socios > li { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.1fr) 390px; gap: 20px; align-items: center;
  padding: 16px 0; border-bottom: 1px solid var(--linea); }
.socios small { display: block; color: var(--acero); font-size: 0.86rem; }
.socios .socio strong { font-weight: 500; }
.pin-actual { font-size: 1.25rem; font-weight: 500; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.socios .whatsapp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.marca-neutra { display: inline-block; font-size: 0.85rem; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--linea); color: var(--acero); white-space: nowrap; }
.acciones-socio { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cambiar-pin { display: flex; gap: 8px; }
.cambiar-pin input { width: 120px; min-height: 36px; padding: 6px 10px; }
@media (max-width: 960px) {
  .socios > li { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .socios .whatsapp, .acciones-socio { grid-column: 1 / -1; }
  .acciones-socio { justify-content: flex-start; }
}

/* Chat de prueba */
.pagina-chat { padding-bottom: 48px; }
.cabecera-chat { max-width: 760px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cabecera-chat .subtitulo { margin-bottom: 24px; }
.cabecera-chat .boton { margin-bottom: 24px; }
.conversacion { max-width: 760px; border: 1px solid var(--linea); border-radius: var(--radio); display: flex;
  flex-direction: column; height: min(62vh, 640px); min-height: 380px; margin-bottom: 12px; }
#mensajes { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--niebla); }
.burbuja { max-width: 82%; padding: 10px 14px; border-radius: 14px 14px 14px 3px; white-space: pre-wrap;
  word-break: break-word; background: var(--papel); border: 1px solid var(--linea); align-self: flex-start; }
.burbuja.mio { background: var(--grafito); color: var(--papel); border-color: var(--grafito);
  border-radius: 14px 14px 3px 14px; align-self: flex-end; }
.burbuja.aviso { background: transparent; border: 0; color: var(--acero); padding: 2px 4px; }
.burbuja.error { color: var(--error); border-color: var(--error); }
#formulario { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--linea); background: var(--papel); }
#formulario textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; }
#formulario .boton:disabled { opacity: .5; cursor: default; }
.pagina-chat .ayuda { max-width: 760px; }

/* Peticiones por aprobar */
.titulo-seccion { font-size: 1.3rem; margin: 8px 0 14px; }
.contador { display: inline-block; min-width: 24px; padding: 0 7px; margin-left: 8px; border-radius: 999px;
  background: var(--rojo); color: #fff; font-size: 0.85rem; line-height: 24px; text-align: center; vertical-align: middle; }
.peticiones { list-style: none; margin: 0 0 56px; padding: 0; border-top: 2px solid var(--grafito); }
.peticiones > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: start;
  padding: 22px 0; border-bottom: 1px solid var(--linea); }
.peticiones .frase { font-size: 1.15rem; max-width: 60ch; }
.peticiones .frase strong { font-weight: 500; }
.detalles { list-style: none; margin: 8px 0 0; padding: 0; color: var(--acero); font-size: 0.95rem; }
.aviso-texto { color: var(--error); }
.decision { display: flex; gap: 10px; align-items: flex-start; }
.decision .boton { min-width: 120px; }
.rechazar summary { list-style: none; }
.rechazar summary::-webkit-details-marker { display: none; }
.rechazar[open] summary { border-color: var(--grafito); }
.rechazar form { margin-top: 12px; width: 280px; }
.rechazar textarea { min-height: 64px; margin-bottom: 10px; }
.vacio { color: var(--acero); margin-bottom: 56px; padding: 22px 0; border-top: 2px solid var(--grafito); }
.resueltas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.resueltas > li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 14px 0;
  border-bottom: 1px solid var(--linea); align-items: start; }
.resueltas small { display: block; color: var(--acero); font-size: 0.88rem; margin-top: 2px; }
@media (max-width: 760px) {
  .peticiones > li { grid-template-columns: 1fr; }
  .decision { flex-wrap: wrap; }
  .rechazar form { width: 100%; }
  .resueltas > li { grid-template-columns: 1fr; gap: 6px; }
}

/* Panel de Glantek */
.tabla { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.tabla th { text-align: left; font-weight: 500; color: var(--acero); padding: 10px 12px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 14px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla .placa { height: 44px; width: 120px; padding: 6px 10px; }
.tabla-scroll { overflow-x: auto; }
.inactivo { color: var(--acero); }

.bloque { border: 1px solid var(--linea); border-radius: var(--radio); padding: 28px; margin-bottom: 32px; }
.bloque h2 { margin-bottom: 20px; font-size: 1.3rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
@media (max-width: 700px) { .dos-columnas { grid-template-columns: 1fr; } .bloque { padding: 20px; } }
fieldset { border: 0; padding: 0; margin: 8px 0 20px; }
legend { font-weight: 500; margin-bottom: 14px; font-size: 1.05rem; }
.botonera { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --- Conversaciones (bandeja en tiempo real) --------------------------------
   Izquierda la lista; a la derecha la conversación con el interruptor Agente / Persona.
   En el móvil se ve una cosa u otra. */
.pagina-conversaciones { padding: 24px 0 32px; }
.contenedor.ancho { max-width: 1320px; }
.bandeja { display: grid; grid-template-columns: 340px minmax(0, 1fr); border: 1px solid var(--linea);
  border-radius: var(--radio); height: calc(100vh - 72px - 56px); min-height: 520px; overflow: hidden; }

.lista-conv { border-right: 1px solid var(--linea); display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.lista-conv-cabecera { padding: 18px 16px 12px; border-bottom: 1px solid var(--linea); }
.lista-conv-cabecera h1 { font-size: 1.35rem; margin-bottom: 12px; }
.lista-conv-cabecera input { min-height: 38px; padding: 6px 10px; }
#lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#lista li { border-bottom: 1px solid var(--linea); }
.item-conv { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 3px solid transparent;
  padding: 12px 16px 12px 13px; font: inherit; color: inherit; cursor: pointer; }
.item-conv:hover { background: var(--niebla); }
.item-conv.activa { background: var(--niebla); border-left-color: var(--rojo); }
.item-conv .fila { display: flex; align-items: center; gap: 10px; min-width: 0; }
.item-conv .nombre { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-conv .hora { color: var(--acero); font-size: 0.8rem; }
.item-conv .ultimo { color: var(--acero); font-size: 0.88rem; flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.item-conv .marcas { display: flex; gap: 6px; align-items: center; }
.item-conv .contador { margin-left: 0; min-width: 20px; line-height: 20px; font-size: 0.75rem; }
.marca { font-size: 0.72rem; padding: 0 7px; line-height: 18px; border: 1px solid var(--linea); border-radius: 999px;
  color: var(--acero); white-space: nowrap; }
.marca.humano { border-color: var(--granate); color: var(--granate); }
.marca.espera { border-color: var(--rojo); background: var(--rojo); color: #fff; }
.lista-vacia { padding: 20px 16px; color: var(--acero); font-size: 0.95rem; }

.panel-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sin-seleccion { margin: auto; max-width: 42ch; text-align: center; color: var(--acero); padding: 24px; }
.sin-seleccion p:first-child { font-size: 1.15rem; color: var(--grafito); margin-bottom: 8px; }
.conv { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.conv[hidden], .sin-seleccion[hidden] { display: none; }
.conv-cabecera { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--linea); }
.conv-quien { flex: 1; min-width: 0; }
.conv-quien h2 { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-quien p { color: var(--acero); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volver-lista { display: none; background: none; border: 0; font-size: 1.4rem; padding: 0 6px; cursor: pointer; color: inherit; }

/* Interruptor: el botón pulsado es quien contesta ahora */
.interruptor { display: inline-flex; border: 1px solid var(--grafito); border-radius: var(--radio); }
.interruptor button { font: inherit; font-size: 0.92rem; min-height: 36px; padding: 0 16px; border: 0;
  background: transparent; color: var(--grafito); cursor: pointer; }
.interruptor button + button { border-left: 1px solid var(--grafito); }
.interruptor button[aria-pressed="true"] { background: var(--grafito); color: var(--papel); cursor: default; }
.interruptor button[data-modo="humano"][aria-pressed="true"] { background: var(--granate); color: #fff; }
.interruptor button:not([aria-pressed="true"]):hover { background: var(--niebla); }

.conv-aviso { padding: 10px 18px; background: var(--error-fondo); color: var(--error); font-size: 0.95rem;
  border-bottom: 1px solid var(--linea); }
.conv-mensajes { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 20px;
  background: var(--niebla); }
.globo { max-width: min(75%, 560px); padding: 8px 12px 6px; border-radius: 12px 12px 12px 3px; background: var(--papel);
  border: 1px solid var(--linea); align-self: flex-start; word-break: break-word; }
.globo .cuerpo { white-space: pre-wrap; }
.globo .autor { display: block; font-size: 0.75rem; font-weight: 500; margin-bottom: 2px; opacity: .8; }
.globo .hora-globo { display: block; text-align: right; font-size: 0.72rem; opacity: .7; margin-top: 2px; }
.globo .hora-globo.fallo { color: var(--error); opacity: 1; font-weight: 500; }
.globo.box .hora-globo.fallo { color: #ffc9c5; }
.globo.agente, .globo.box, .globo.aviso { align-self: flex-end; border-radius: 12px 12px 3px 12px; }
.globo.agente { background: var(--grafito); border-color: var(--grafito); color: var(--papel); }
.globo.box { background: var(--granate); border-color: var(--granate); color: #fff; }
.globo.aviso { background: transparent; border-style: dashed; border-color: var(--acero); }
.linea-sistema { align-self: center; text-align: center; font-size: 0.8rem; color: var(--acero); max-width: 60ch; margin: 6px 0; }

.conv-escribir { display: flex; gap: 10px; padding: 12px 18px 6px; border-top: 1px solid var(--linea); }
.conv-escribir textarea { flex: 1; resize: none; min-height: 44px; max-height: 160px; }
.conv-escribir textarea:disabled, .conv-escribir .boton:disabled { opacity: .5; cursor: not-allowed; }
.conv-nota { padding: 0 18px 12px; color: var(--acero); font-size: 0.82rem; }

@media (max-width: 820px) {
  .pagina-conversaciones { padding: 0; }
  .pagina-conversaciones .contenedor { padding: 0; }
  .bandeja { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; height: calc(100vh - 72px); height: calc(100dvh - 72px); }
  .lista-conv { border-right: 0; }
  .bandeja.con-abierta .lista-conv { display: none; }
  .bandeja:not(.con-abierta) .panel-conv { display: none; }
  .volver-lista { display: block; }
  .conv-cabecera { padding: 10px 12px; gap: 8px; }
  .interruptor button { padding: 0 10px; }
  .conv-mensajes { padding: 14px 12px; }
  .globo { max-width: 85%; }
  .conv-escribir { padding: 10px 12px 4px; }
  .conv-nota { padding: 0 12px 10px; }
}
/* En la zona, Conversaciones ocupa toda la fila: es lo que más se usa */
.herramientas li.destacada { grid-column: 1 / -1; }
.herramientas li.destacada h3 { font-size: 1.3rem; }

/* --- Mensaje de bienvenida: editor y vista previa ---------------------------- */
.editor-bienvenida { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.editor-bienvenida textarea { min-height: 160px; }
.editor-bienvenida code { font-size: 0.85rem; background: var(--niebla); padding: 0 4px; border-radius: var(--radio); }
.vista-previa h2 { font-size: 1.05rem; margin-bottom: 12px; }
.pantalla-movil { background: var(--niebla); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 18px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; }
.pantalla-movil .globo { max-width: 88%; transition: opacity .15s; }
@media (max-width: 900px) { .editor-bienvenida { grid-template-columns: 1fr; } }
/* Información del centro: mismo editor, con un cuadro por sección */
.seccion-info textarea { min-height: 96px; }
.seccion-info + .seccion-info { border-top: 1px solid var(--linea); padding-top: 18px; }
.lista-info { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 10px; font-size: 0.95rem; }
/* Si la última queda sola en su fila, que la ocupe entera (sin hueco al lado) */
.herramientas li.destacada ~ li:last-child:nth-child(even) { grid-column: 1 / -1; }