:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #1d2330;
  --texto-suave: #5b6478;
  --borde: #d8dce6;
  --primario: #2f5bd3;
  --primario-oscuro: #2447a8;
  --demo: #d97706;
  --ok: #17803d;
  --ok-fondo: #e4f5ea;
  --error: #b42318;
  --error-fondo: #fdeceb;
  --aviso: #8a5a00;
  --aviso-fondo: #fff4d6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.45;
}

a { color: var(--primario); }

/* Cabecera */
.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  background: var(--primario);
  color: #fff;
}
.cabecera a { color: #fff; }
.marca { font-weight: 700; text-decoration: none; }
.etiqueta-demo {
  background: var(--demo);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
}
.menu { display: flex; gap: 1rem; }
.buscador { display: flex; gap: 0.4rem; margin: 0; }
.buscador input { width: 10rem; margin: 0; padding: 0.25rem 0.5rem; }
.sesion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-left: auto;
  font-size: 0.9rem;
}
.sesion form { margin: 0; }

.contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

/* Tarjetas y formularios */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.tarjeta-estrecha { max-width: 460px; margin-inline: auto; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }

label { display: block; margin-bottom: 0.9rem; font-weight: 600; font-size: 0.95rem; }
label small { font-weight: 400; color: var(--texto-suave); }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
}
/* Ojo para ver la contraseña (contrasena.js): el botón va dentro de la casilla, a la derecha. */
.casilla-contrasena { position: relative; display: block; margin-top: 0.3rem; }
.casilla-contrasena input { margin-top: 0; padding-right: 2.8rem; }
.ojo-contrasena {
  position: absolute; top: 0; right: 0; bottom: 0; width: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 0 6px 6px 0; background: transparent; color: var(--texto-suave); cursor: pointer;
}
.ojo-contrasena:hover { color: var(--texto); }
.ojo-contrasena[aria-pressed="true"] { color: var(--demo); }
.ojo-contrasena:focus-visible { outline: 3px solid #9db6f5; outline-offset: -3px; }
input:focus-visible, select:focus-visible, .boton:focus-visible, a:focus-visible {
  outline: 3px solid #9db6f5;
  outline-offset: 1px;
}
label.casilla { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
label.casilla input { width: auto; margin: 0; }
.ayuda { color: var(--texto-suave); font-size: 0.9rem; }
.fila-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }

.boton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  min-height: 44px;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--primario);
  border: 0;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--primario-oscuro); }
.boton-secundario { background: var(--superficie); color: var(--primario); border: 1px solid var(--primario); }
.boton-secundario:hover { background: #eef2fd; }
.boton-claro { background: rgba(255, 255, 255, 0.18); min-height: 36px; padding: 0.35rem 0.9rem; }
.boton-claro:hover { background: rgba(255, 255, 255, 0.3); }

/* Avisos */
.alerta { padding: 0.7rem 0.9rem; border-radius: 6px; margin: 0 0 1rem; }
.alerta-error { background: var(--error-fondo); color: var(--error); }
.alerta-ok { background: var(--ok-fondo); color: var(--ok); }
.alerta-aviso { background: var(--aviso-fondo); color: var(--aviso); }

/* Tablas */
.barra-titulo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.barra-titulo h1 { margin: 0; }
.tabla-envoltorio { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texto-suave); }
.tabla tr:last-child td { border-bottom: 0; }
.insignia { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.insignia-ok { background: var(--ok-fondo); color: var(--ok); }
.insignia-apagado { background: #eceef3; color: var(--texto-suave); }
.insignia-aviso { background: var(--aviso-fondo); color: var(--aviso); }

/* Datos y contraseña temporal */
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.clave { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.05em; background: #eef2fd; padding: 0.15rem 0.5rem; border-radius: 4px; }

/* Móvil: la tabla pasa a tarjetas apiladas */
@media (max-width: 640px) {
  .contenido { padding: 0.75rem; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 0.5rem 0; border-bottom: 1px solid var(--borde); }
  .tabla td { border: 0; padding: 0.25rem 0.8rem; }
  .tabla td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; font-weight: 600; color: var(--texto-suave); }
  .sesion { margin-left: 0; width: 100%; }
}

/* Fichas (agencias, actores, técnicos, servicios) */
.tarjeta-formulario { max-width: 640px; }
textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
  resize: vertical;
}
input[type="search"] {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: #fff;
}
textarea:focus-visible, input[type="search"]:focus-visible { outline: 3px solid #9db6f5; outline-offset: 1px; }
abbr { text-decoration: none; color: var(--error); }
.ayuda-campo { display: block; margin-top: 0.2rem; }
.error-campo { display: block; margin-top: 0.2rem; color: var(--error); font-weight: 600; }
label.con-error input, label.con-error select, label.con-error textarea { border-color: var(--error); }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.5rem; }
.filtros label { margin: 0; }
.filtros .filtro-busqueda { flex: 1 1 240px; }
.paginacion { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; }
.barra-titulo h1 .insignia { vertical-align: middle; margin-left: 0.4rem; }
.barra-titulo .ayuda { margin: 0; }

/* Peticiones */
[hidden] { display: none !important; }
.insignia { white-space: nowrap; }
.insignia-nuevo { background: #e3edff; color: #1d4ed8; }
.insignia-en-gestion { background: #fff4d6; color: #8a5a00; }
.insignia-pendiente-respuesta { background: #ffe9d6; color: #9a3d00; }
.insignia-confirmado { background: #e4f5ea; color: #17803d; }
.insignia-realizado { background: #d9f2f2; color: #0f6b6b; }
.insignia-facturado { background: #ece4fb; color: #5b34b3; }
.insignia-cerrado { background: #eceef3; color: #4a5266; }
.insignia-cancelado { background: #fdeceb; color: #b42318; }
.insignia-urgente { background: #b42318; color: #fff; }
.insignia-baja { background: #eceef3; color: #4a5266; }
.insignia-normal { background: #e3edff; color: #1d4ed8; }
.insignia-propuesto { background: #fff4d6; color: #8a5a00; }
.insignia-descartado { background: #eceef3; color: #4a5266; }
.codigo-peticion { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; color: var(--texto-suave); }
.texto-largo { white-space: pre-line; }
.fila-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.fila-estado { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.fila-estado label { margin: 0; }
.fila-estado .crece { flex: 1 1 260px; }
.fila-inline { display: flex; gap: 0.5rem; align-items: center; }
.fila-inline select { margin: 0; }
.boton-pequeno { min-height: 36px; padding: 0.3rem 0.8rem; }
.fila-apagada td { opacity: 0.6; }
.anadir-actor { margin-top: 1rem; border-top: 1px solid var(--borde); padding-top: 0.75rem; }
.anadir-actor summary { cursor: pointer; font-weight: 600; color: var(--primario); margin-bottom: 0.75rem; }
fieldset.selector-actores { border: 1px solid var(--borde); border-radius: 6px; padding: 0.75rem; margin: 0 0 1rem; }
fieldset.selector-actores legend { font-weight: 600; padding: 0 0.3rem; }
fieldset.con-error { border-color: var(--error); }
.lista-actores { max-height: 220px; overflow-y: auto; margin-top: 0.5rem; }
.opcion-actor { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.35rem 0.3rem; font-weight: 400; min-height: 40px; }
.lista-duplicados { margin: 0.5rem 0 1rem; padding-left: 1.2rem; }
.lista-duplicados li { margin-bottom: 0.6rem; }
.linea-tiempo { list-style: none; margin: 0; padding: 0; }
.linea-tiempo li { border-left: 3px solid var(--borde); padding: 0 0 1rem 1rem; }
.linea-tiempo p { margin: 0.2rem 0 0; }
.linea-tiempo .momento { font-size: 0.85rem; color: var(--texto-suave); }
.linea-tiempo .autor { font-size: 0.85rem; font-weight: 600; margin-left: 0.5rem; }
@media (max-width: 640px) { .fila-campos { grid-template-columns: 1fr; } }

/* Seguimiento y documentos */
.formulario-nota { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.formulario-nota label { margin-bottom: 0; }
.lista-documentos { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-documentos li { padding: 0.5rem 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.lista-documentos li:last-child { border-bottom: 0; }
input[type="file"] { display: block; width: 100%; margin-top: 0.3rem; padding: 0.5rem; font: inherit; border: 1px dashed var(--borde); border-radius: 6px; background: #fff; }
.insignia-nota { background: #fff4d6; color: #8a5a00; }
.insignia-llamada { background: #e4f5ea; color: #17803d; }
.insignia-mensaje { background: #e3edff; color: #1d4ed8; }
.insignia-documento { background: #ece4fb; color: #5b34b3; }
.insignia-sistema { background: #eceef3; color: #4a5266; }
.insignia-cambio-estado { background: #d9f2f2; color: #0f6b6b; }
.linea-tiempo .insignia { margin-left: 0.4rem; }

/* Bandeja de mensajes */
.insignia-telefono { background: #e4f5ea; color: #17803d; }
.insignia-whatsapp { background: #d9f5e5; color: #0b6b3a; }
.insignia-email { background: #e3edff; color: #1d4ed8; }
.insignia-presencial { background: #ece4fb; color: #5b34b3; }
.insignia-msg-pendiente { background: #fff4d6; color: #8a5a00; }
.insignia-msg-vinculado { background: #e4f5ea; color: #17803d; }
.insignia-msg-descartado { background: #eceef3; color: #4a5266; }
.caja-mensaje { background: #f6f7f9; border-left: 4px solid var(--borde); border-radius: 4px; padding: 0.75rem 1rem; margin: 0; overflow-wrap: anywhere; }
.lista-candidatas { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-candidatas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--borde); }
.lista-candidatas li:last-child { border-bottom: 0; }
.lista-candidatas form { margin: 0; }

/* Agenda y reservas */
.insignia-provisional { background: #fff4d6; color: #8a5a00; }
.insignia-confirmada { background: #e4f5ea; color: #17803d; }
.insignia-cancelada { background: #fdeceb; color: #b42318; }
.insignia-realizada { background: #d9f2f2; color: #0f6b6b; }
.insignia-choque { background: #b42318; color: #fff; }
.agenda-dia { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; }
.agenda-dia::first-letter { text-transform: uppercase; }
.fila-choque { background: #fdeceb; }
.lista-choques { margin: 0.5rem 0; padding-left: 1.2rem; }

/* Facturas */
.insignia-pendiente { background: #fff4d6; color: #8a5a00; }
.insignia-cobrado { background: #e4f5ea; color: #17803d; }
.insignia-vencido { background: #b42318; color: #fff; }
.insignia-anulada { background: #eceef3; color: #4a5266; text-decoration: line-through; }
.insignia-compensada { background: #eceef3; color: #4a5266; }
.insignia-rectificativa { background: #ffe9d6; color: #9a3d00; }
.insignia-ordinaria { background: #e3edff; color: #1d4ed8; }
.importe { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.negativo { color: var(--error); }
.factura { background: #fff; border: 1px solid var(--borde); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.factura h1 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; }
.factura .partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0; }
.factura .partes h3 { margin: 0 0 0.25rem; font-size: 0.85rem; text-transform: uppercase; color: var(--texto-suave); }
.factura table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.factura th, .factura td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; }
.factura td.importe, .factura th.importe { text-align: right; }
.factura .marca-demo { color: var(--demo); font-weight: 700; }
@media print {
  .cabecera, .no-imprimir, .alerta { display: none !important; }
  body { background: #fff; }
  .factura { border: 0; padding: 0; }
}

/* Notas de gastos */
.insignia-descontado { background: #d9f2f2; color: #0f6b6b; }
.insignia-reembolsado { background: #e4f5ea; color: #17803d; }
.insignia-anulado { background: #eceef3; color: #4a5266; text-decoration: line-through; }
.insignia-por-validar { background: #ffe9d6; color: #9a3d00; }
.insignia-rechazado { background: #fdeceb; color: #b42318; }
.insignia-transferido { background: #e4f5ea; color: #17803d; }

/* Personal y gastos generales */
.insignia-registrado { background: #e3edff; color: #1d4ed8; }
.insignia-pagado { background: #e4f5ea; color: #17803d; }
.insignia-aplicado { background: #d9f2f2; color: #0f6b6b; }

/* Cara del actor (foto de perfil en miniatura) */
.cara { display: inline-block; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 0.5rem; background: #eceef3; flex: none; }
.cara-iniciales { line-height: 36px; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--texto-suave); letter-spacing: 0.02em; }
.cara-pequena { width: 28px; height: 28px; line-height: 28px; font-size: 0.7rem; margin-right: 0.4rem; }
.foto-ficha { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.foto-ficha img { width: 180px; height: 180px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); background: #eceef3; }
.foto-ficha .sin-foto { width: 180px; height: 180px; border-radius: 12px; border: 1px dashed var(--borde); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; color: var(--texto-suave); background: #eceef3; }
.foto-ficha form { margin: 0 0 0.5rem; }

/* Ficha artística del actor */
.bloque-perfil { border: 1px solid var(--borde); border-radius: 8px; padding: 0.75rem 1rem 0.25rem; margin: 0 0 1rem; }
.bloque-perfil legend { font-weight: 700; padding: 0 0.4rem; }
.lista-perfil { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-perfil li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--borde); overflow-wrap: anywhere; }
.lista-perfil form { margin: 0; flex: none; }
.boton-enlace { background: none; border: 0; padding: 0.4rem 0.2rem; min-height: 36px; font: inherit; color: var(--primario); text-decoration: underline; cursor: pointer; }
.boton-enlace:hover { color: var(--primario-oscuro); }
#ficha-artistica h3 { margin: 1rem 0 0.5rem; font-size: 1rem; }

/* Book de fotos (galería) */
.galeria { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.galeria li { border: 1px solid var(--borde); border-radius: 8px; padding: 0.5rem; background: var(--superficie); overflow-wrap: anywhere; }
.galeria img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #eceef3; display: block; }
.galeria .foto-oculta img, .galeria li.foto-oculta img { opacity: 0.55; }
.galeria-texto { margin: 0.4rem 0; font-size: 0.9rem; }
.galeria-botones { gap: 0.1rem 0.6rem; font-size: 0.85rem; }
.galeria-botones form { margin: 0; }
.galeria details summary { cursor: pointer; color: var(--primario); font-size: 0.85rem; }

/* Books para productoras (Paso F5) */
.opcion-actor { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; font-weight: 400; }
.opcion-actor input { width: auto; min-height: 0; margin-right: 0.3rem; }
.logo-agencia { max-width: 240px; max-height: 120px; border: 1px solid var(--borde); border-radius: 6px; padding: 0.4rem; background: #fff; }

/* Búsqueda para casting (Paso F6) */
.rejilla-filtros { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 1rem; }
.casillas-filtros { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.5rem 0 1rem; }
.casillas-filtros label { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 400; }
.casillas-filtros input, .opcion-actor input { width: auto; min-height: 0; }
.tarjetas-casting { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.tarjetas-casting li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; overflow-wrap: anywhere; }
.foto-casting img, .sin-foto-casting { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #eceef3; }
.sin-foto-casting { display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 700; color: var(--texto-suave); text-decoration: none; }
.texto-casting { padding: 0.6rem 0.7rem 0.8rem; font-size: 0.92rem; }

/* Apartado activo del menú y línea de situación (Bloque 1: M5 y M4) */
.menu a.activo { background: #fff; color: var(--primario); border-radius: 6px; padding: 0.15rem 0.55rem; font-weight: 700; text-decoration: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); }
.situacion { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; max-width: 1100px; margin: 0.75rem auto 0; padding: 0 1rem; }
.situacion-texto { margin: 0; color: var(--texto-suave); font-size: 0.92rem; overflow-wrap: anywhere; }
.situacion-texto strong { color: var(--texto); }
.boton-volver { display: inline-flex; align-items: center; min-height: 36px; padding: 0.3rem 0.8rem; border: 1px solid var(--primario); border-radius: 6px; color: var(--primario); background: var(--superficie); font-weight: 600; text-decoration: none; }
.boton-volver:hover { background: #eef2fd; }
@media print { .situacion { display: none !important; } }
.sugerencia { display: inline-block; margin: 0.25rem 0.4rem 0 0; padding: 0.15rem 0.6rem; border: 1px solid var(--aviso); border-radius: 999px; font-weight: 600; }

/* Listas con desplazamiento propio y pantalla compartida (Bloque 2: M6 y M7) */
@media (min-width: 1000px) {
  /* --alto-lista lo fija app.js midiendo cuánto espacio hay de verdad bajo la cabecera; este valor solo vale si el script no corre. */
  [data-lista] { --alto-lista: calc(100vh - 480px); max-height: var(--alto-lista); overflow: auto; }
  [data-lista] thead th { position: sticky; top: 0; background: var(--superficie); z-index: 1; }
  .contenido.dividida { max-width: 1700px; display: grid; grid-template-columns: minmax(380px, 42%) 1fr; gap: 1.25rem; align-items: start; }
  .columna-lista { min-width: 0; }
  .panel-ficha { --alto-panel: calc(100vh - 1rem); position: sticky; top: 0.5rem; max-height: var(--alto-panel); overflow: auto; min-width: 0; border-left: 3px solid var(--primario); padding-left: 1rem; }
  .panel-ficha-barra { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; background: var(--fondo); padding: 0.25rem 0; }
}
[data-lista] .paginacion { padding: 0.5rem 0.75rem; }
[data-lista] tr.seleccionada td { background: #eef2fd; }
[data-lista] tr.seleccionada td:first-child { box-shadow: inset 4px 0 0 var(--primario); }
@media (min-width: 1000px) {
  /* Con la ficha abierta la lista es más estrecha: se quedan las dos primeras columnas (nombre y la principal). */
  .contenido.dividida [data-lista] th:nth-child(n+3), .contenido.dividida [data-lista] td:nth-child(n+3) { display: none; }
  .contenido.dividida [data-lista] td:first-child { white-space: nowrap; }
}

/* Mensajes compacto (16/10/2026): menos altura encima de la lista, sin quitar ningún texto (la ayuda se pliega en «ⓘ»).
   Clases propias de esta pantalla: no se tocan .tarjeta, .alerta ni .barra-titulo generales. */
.barra-titulo-compacta { margin-bottom: 0.5rem; }
.titulo-con-ayuda { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 1rem; min-width: 0; }
@media (min-width: 700px) { .fila-botones-fija { flex-wrap: nowrap; } }
.ayuda-plegable summary { cursor: pointer; color: var(--primario); font-size: 0.9rem; }
.ayuda-plegable[open] { flex-basis: 100%; }
.ayuda-plegable p { margin: 0.25rem 0 0; }
.tarjeta-compacta { padding: 0.45rem 0.9rem; margin-bottom: 0.5rem; }
.fila-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; margin: 0 0 0.5rem; }
.fila-resumen p { margin: 0; }
.alerta-compacta { padding: 0.2rem 0.7rem; }

/* Respuestas por aprobar (paso 13.2) */
.insignia-borrador { background: #fff4d6; color: #8a5a00; }
.insignia-aprobada { background: #e3edff; color: #1d4ed8; }
.insignia-enviada { background: #e4f5ea; color: #17803d; }
.insignia-descartada { background: #eceef3; color: #4a5266; }
.insignia-error { background: #fdeceb; color: #b42318; }
.insignia-sms, .insignia-llamada { background: #ece4fb; color: #5b34b3; }
.enlace-respuestas { font-size: 0.9rem; white-space: nowrap; }
.detalle-respuesta .formulario-respuesta textarea { width: 100%; font: inherit; }
.detalle-respuesta .caja-mensaje { white-space: pre-wrap; }

/* Altavoz y micrófono (Bloque 3: M8 y M9) */
.situacion .controles-voz { margin-left: auto; }
.controles-voz { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.panel-ficha-barra { justify-content: space-between !important; align-items: center; }
.boton-voz { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 0.25rem 0.75rem; font: inherit; font-weight: 600; color: var(--primario); background: var(--superficie); border: 1px solid var(--primario); border-radius: 999px; cursor: pointer; }
.boton-voz:hover { background: #eef2fd; }
.boton-voz.activo { color: #fff; background: var(--error); border-color: var(--error); }
.icono-voz { position: relative; display: inline-block; }
.icono-voz.tachado::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; border-top: 2px solid currentColor; transform: rotate(-35deg); }
.caja-dictado { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin: 0; }
.caja-dictado input[type=search] { width: 15rem; max-width: 60vw; min-height: 36px; padding: 0.25rem 0.6rem; border-radius: 999px; }
.mensaje-dictado { flex-basis: 100%; margin: 0.2rem 0 0; max-width: 28rem; font-size: 0.85rem; color: var(--aviso); background: var(--aviso-fondo); border-radius: 6px; padding: 0.35rem 0.6rem; }
.controles-voz { align-items: flex-start; }
.controles-voz > .boton-voz { align-self: flex-start; }

/* Búsqueda inteligente de perfiles (Bloque 4, M2) */
.ancho-completo { grid-column: 1 / -1; }
.candidatos { list-style: none; margin: 0 0 1rem; padding: 0; }
.candidato { margin-bottom: 1rem; }
.candidato-cabecera { display: flex; align-items: center; gap: 1rem; }
.nota-parecido { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; font-size: 1.25rem; font-weight: 800; color: #fff; }
.nota-alta { background: var(--ok); }
.nota-media { background: var(--demo); }
.nota-baja { background: var(--texto-suave); }
.razones { list-style: none; margin: 0.6rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; font-size: 0.88rem; }
.razones li { padding: 0.1rem 0.55rem; border-radius: 999px; }
.razon-si { background: var(--ok-fondo); color: var(--ok); }
.razon-no { background: var(--error-fondo); color: var(--error); }
.razon-sin-dato { background: #eceef3; color: var(--texto-suave); }
.aviso-candidato { margin: 0.35rem 0; padding: 0.35rem 0.6rem; font-size: 0.88rem; }

/* Asistente de IA (Bloque 5, B5.1): botón redondo abajo a la derecha y chat lateral */
.boton-ia { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; display: inline-flex; align-items: center; gap: 0.3rem; min-height: 52px; padding: 0.5rem 1rem; font: inherit; font-weight: 700; color: #fff; background: var(--primario); border: none; border-radius: 999px; box-shadow: 0 4px 14px rgba(29, 35, 48, 0.25); cursor: pointer; }
.boton-ia:hover { background: var(--primario-oscuro); }
.boton-ia[aria-expanded="true"] { display: none; }
.panel-ia { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; width: min(420px, 100vw); background: var(--superficie); border-left: 3px solid var(--primario); box-shadow: -6px 0 18px rgba(29, 35, 48, 0.18); }
.panel-ia[hidden] { display: none; }
.panel-ia-barra { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; color: #fff; background: var(--primario); }
.panel-ia-barra h2 { flex: 1; margin: 0; font-size: 1.1rem; }
.panel-ia-barra .boton-enlace { color: #fff; }
.panel-ia-mensajes { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--fondo); }
.ia-mensaje { margin: 0; padding: 0.6rem 0.8rem; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
.ia-pregunta { align-self: flex-end; color: #fff; background: var(--primario); }
.ia-respuesta { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borde); }
.ia-pensando { color: var(--texto-suave); font-style: italic; }
.ia-enlaces { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 0.35rem; max-width: 92%; margin-top: -0.3rem; }
.ia-enlace { display: inline-block; padding: 0.25rem 0.6rem; font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--primario); background: var(--superficie); border: 1px solid var(--primario); border-radius: 999px; }
.ia-enlace:hover { background: #eef2fd; }
.ia-escuchar { padding: 0.25rem 0.6rem; font: inherit; font-size: 0.9rem; color: var(--texto-suave); background: transparent; border: 1px solid var(--borde); border-radius: 999px; cursor: pointer; }
.ia-escuchar:hover { color: var(--primario); border-color: var(--primario); }
.panel-ia-barra { flex-wrap: wrap; row-gap: 0.25rem; }
.panel-ia-microfono { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; font-size: 0.9rem; color: var(--aviso); background: var(--aviso-fondo); border-radius: 8px; }
.panel-ia-microfono[hidden] { display: none; }
.panel-ia-imagen { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; padding: 0.4rem; font-size: 0.85rem; color: var(--texto-suave); background: var(--fondo); border: 1px dashed var(--borde); border-radius: 8px; }
.panel-ia-imagen[hidden] { display: none; }
.panel-ia-imagen img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--borde); }
.panel-ia-imagen { flex-wrap: wrap; }
.panel-ia-imagen span { flex: 1 1 140px; }
.ia-error { align-self: flex-start; color: var(--error); background: var(--error-fondo); }
.panel-ia-formulario { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--borde); }
.panel-ia-formulario textarea { width: 100%; font: inherit; padding: 0.5rem; border: 1px solid var(--borde); border-radius: 8px; resize: vertical; }
.panel-ia-pie { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.panel-ia-aviso { flex: 1; margin: 0; font-size: 0.85rem; color: var(--texto-suave); }
@media print { .boton-ia, .panel-ia { display: none !important; } }

/* Portal de actores y agencias (Bloque 6) */
.portal-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.portal-tarjeta { display: block; color: inherit; text-decoration: none; border-left: 4px solid var(--primario); }
.portal-tarjeta:hover { background: #eef2fd; }
.portal-tarjeta h2 { color: var(--primario); margin-top: 0; }
.portal-cabecera { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.portal-foto { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; border: 3px solid var(--borde); }
.portal-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; }
.portal-fotos figure { margin: 0; }
.portal-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); }
.portal-fotos figcaption { font-size: 0.85rem; color: var(--texto-suave); }.insignia-portal { background: #ece4fb; color: #5b34b3; }

/* Puesta a punto (Administrador): ✔ está, ✘ falta, ? no se puede comprobar */
.estado-puesta { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 50%; font-weight: 700; margin-right: .3em; }
.estado-puesta-ok { background: #e4f5ea; color: #17803d; }
.estado-puesta-falta { background: #b42318; color: #fff; }
.estado-puesta-nose { background: #e8eaf0; color: #444; }

/* Simulador de canales (Administrador): WhatsApp y correo simulados */
.sim-nuevo { border-left: 4px solid #17803d; }
.sim-wa { max-width: 34rem; background: #efeae2; border-radius: 10px; padding: 0.7rem; }
.sim-wa-cab { font-size: 0.8rem; color: #54656f; margin-bottom: 0.3rem; }
.sim-wa-burbuja { background: #d9fdd3; border-radius: 8px 8px 8px 0; padding: 0.5rem 0.7rem; white-space: pre-wrap; display: inline-block; max-width: 100%; }
.sim-hora { display: block; text-align: right; font-size: 0.7rem; color: #667781; margin-top: 0.2rem; }
.sim-correo { border: 1px solid var(--borde); border-radius: 6px; padding: 0.6rem 0.8rem; background: #fff; }
.sim-correo-cuerpo { white-space: pre-wrap; margin: 0.4rem 0 0; }
.sim-ident { margin-top: 0.7rem; border-top: 1px dashed var(--borde); padding-top: 0.5rem; }
.sim-ident p { margin: 0.25rem 0; }

/* Ventanas flotantes (04/10/2026): el chat de IA se mueve, se redimensiona, se reduce y se ve semitransparente */
.panel-ia-barra { cursor: grab; user-select: none; touch-action: none; }
.panel-ia.arrastrando .panel-ia-barra { cursor: grabbing; }
.panel-ia.flotante { border: 3px solid var(--primario); border-radius: 12px; box-shadow: 0 12px 34px rgba(29, 35, 48, 0.4); resize: both; overflow: hidden; min-width: 300px; min-height: 160px; max-width: 100vw; max-height: 100vh; }
.panel-ia.flotante .panel-ia-barra { border-radius: 9px 9px 0 0; }
.panel-ia.minimizada { height: auto !important; min-height: 0; resize: none; }
.panel-ia.minimizada .panel-ia-mensajes, .panel-ia.minimizada .panel-ia-formulario { display: none; }
.panel-ia.translucida { opacity: 0.55; transition: opacity 0.15s; }
.panel-ia.translucida:hover, .panel-ia.translucida:focus-within, .panel-ia.arrastrando { opacity: 1; }
@media (max-width: 700px) { .panel-ia.flotante { resize: none; } .panel-ia-barra { cursor: default; } [data-ventana-flotar], [data-ventana-translucida], [data-ventana-minimizar] { display: none !important; } }

/* Cartel fijo de la sesión (04/10/2026): en qué cuenta estás; en rojo-ámbar cuando se ve «como» otra cuenta */
.cartel-sesion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; padding: 0.3rem 1rem; font-size: 0.85rem; color: #1d2330; background: #e8eefc; border-bottom: 1px solid #c5d3f5; }
.cartel-tecnico { background: #fdeede; border-bottom-color: #f2cfa6; }
.cartel-consulta { background: #ececf1; border-bottom-color: #d0d0da; }
.cartel-actor, .cartel-agencia { background: #e3f4e8; border-bottom-color: #b9dcc4; }
.cartel-suplantando { background: #fff1c2; border-bottom: 3px solid #d9480f; font-size: 0.95rem; padding: 0.5rem 1rem; }
.cartel-ver-como { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.cartel-ver-como label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; }
.cartel-ver-como select { width: auto; max-width: 18rem; padding: 0.15rem 0.3rem; font-size: 0.85rem; }
.cartel-suplantando form { margin: 0; }
@media print { .cartel-sesion { display: none !important; } }

/* Adjuntos de un mensaje (caja fuerte de adjuntos, Fase 2): lista de solo lectura con su semáforo */
.lista-adjuntos { list-style: none; margin: 0.4rem 0; padding: 0; }
/* Compacto (15/10/2026): un archivo por línea con sus botones al lado; el motivo, debajo y pequeño solo en lo que hay que leer */
.lista-adjuntos li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.6rem; padding: 0.3rem 0; border-top: 1px solid var(--borde); }
.lista-adjuntos li:first-child { border-top: 0; }
.lista-adjuntos li.adjunto-hijo { margin-left: 1.6rem; }
.lista-adjuntos .boton { min-height: 30px; padding: 0.1rem 0.6rem; font-size: 0.85rem; }
.lista-adjuntos .linea-motivo { flex-basis: 100%; margin: 0 0 0 1.5rem; font-size: 0.85rem; }
.lista-adjuntos .revision-corta { font-size: 0.8rem; }
.lista-adjuntos .anadir-actor { position: relative; margin: 0; border: 0; padding: 0; }
.lista-adjuntos .anadir-actor summary { margin: 0; font-size: 0.85rem; }
.lista-adjuntos .anadir-actor[open] > form, .lista-adjuntos .anadir-actor[open] > p {
  position: absolute; z-index: 5; left: 0; top: 1.7rem; width: 22rem; max-width: 80vw; margin: 0; padding: 0.75rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.leyenda-adjuntos { font-size: 0.8rem; margin: 0.3rem 0 0; }
.aviso-adjuntos { margin: 0.4rem 0 0.2rem; }

/* El detalle de un mensaje en dos columnas cuando hay sitio: el mensaje y sus adjuntos a la izquierda, las acciones a la derecha (15/10/2026) */
.contenedor-detalle { container-type: inline-size; }
.detalle-mensaje { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 1fr); gap: 0 1rem; align-items: start; }
.detalle-mensaje.solo-lectura { grid-template-columns: minmax(0, 1fr); }
.detalle-mensaje > .tarjeta { padding: 0.9rem 1rem; }
.detalle-mensaje .barra-titulo { margin-bottom: 0.4rem; }
.detalle-mensaje .barra-titulo p { margin: 0.2rem 0; }
.detalle-mensaje .datos { gap: 0.15rem 1rem; }
.detalle-mensaje h2 { margin: 0.6rem 0 0.3rem; }
.detalle-mensaje .lista-adjuntos .linea-motivo { font-size: 0.8rem; line-height: 1.3; }
.detalle-mensaje .lista-adjuntos li { padding: 0.2rem 0; }
.detalle-mensaje .lista-adjuntos { margin: 0.2rem 0; }
.acciones-mensaje .tarjeta { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.acciones-mensaje h2 { font-size: 1rem; margin: 0 0 0.4rem; }
.acciones-mensaje .lista-candidatas { margin-bottom: 0.5rem; }
@container (max-width: 56rem) { .detalle-mensaje { grid-template-columns: minmax(0, 1fr); } }

/* Guía interactiva (paso G1, 19/10/2026; docs/PLAN_GUIA_INTERACTIVA.md): marco rojo con el resto oscurecido, mano roja
   con estela y panel de pasos. Todo encima de la página y sin capturar el ratón (salvo el panel): la guía no pulsa nada. */
.guia-marco { position: fixed; z-index: 1000; pointer-events: none; border: 4px solid #e00000; border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(224, 0, 0, 0.25); opacity: 0;
  transition: left 0.8s ease-in-out, top 0.8s ease-in-out, width 0.8s ease-in-out, height 0.8s ease-in-out, opacity 0.3s; }
.guia-marco.visible { opacity: 1; animation: guia-latido 1.6s ease-in-out infinite; }
@keyframes guia-latido { 50% { box-shadow: 0 0 0 11px rgba(224, 0, 0, 0.12); } }
.guia-velo { position: fixed; inset: 0; z-index: 999; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
.guia-velo.visible { opacity: 1; }
.guia-mano { position: fixed; left: 0; top: 0; z-index: 1002; pointer-events: none; opacity: 0; transition: transform 0.9s ease-in-out, opacity 0.3s;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.guia-mano.visible { opacity: 1; }
.guia-estela { position: fixed; inset: 0; z-index: 1001; width: 100vw; height: 100vh; pointer-events: none; }
.guia-estela path { fill: none; stroke: #e00000; stroke-width: 4; stroke-dasharray: 10 8; stroke-linecap: round; opacity: 0.85; transition: opacity 1.2s; }
.guia-estela path.apagandose { opacity: 0; }
.guia-panel { position: fixed; z-index: 1003; right: 1rem; bottom: 1rem; width: min(26rem, calc(100vw - 2rem)); max-height: 70vh; overflow: auto;
  padding: 0.9rem 1rem; background: var(--superficie); color: var(--texto); border: 3px solid #e00000; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.guia-panel[data-lado="arriba"]:not(.movida) { bottom: auto; top: 5rem; }
.guia-panel h2 { margin: 0.2rem 0 0.4rem; font-size: 1.1rem; }
.guia-barra { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin: -0.9rem -1rem 0.3rem; padding: 0.3rem 0.4rem 0.3rem 1rem;
  border-bottom: 1px solid var(--borde); border-radius: 9px 9px 0 0; background: #fff1f1; cursor: grab; user-select: none; touch-action: none; }
.guia-panel.arrastrando .guia-barra { cursor: grabbing; }
.guia-cuenta { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.85rem; font-weight: 700; color: #b00000; }
.guia-controles { display: inline-flex; gap: 0.15rem; flex: none; }
.guia-control { min-width: 36px; min-height: 36px; border: 0; border-radius: 6px; background: none; font-size: 1.05rem; line-height: 1; cursor: pointer; color: var(--texto-suave); }
.guia-control:hover, .guia-control:focus-visible { background: rgba(224, 0, 0, 0.1); color: #b00000; }
.guia-control[aria-pressed="true"] { background: rgba(224, 0, 0, 0.14); color: #b00000; }
.guia-panel.minimizada { max-height: none; overflow: visible; padding-bottom: 0; }
.guia-panel.minimizada > :not(.guia-barra) { display: none; }
.guia-panel.minimizada .guia-barra { margin-bottom: 0; border-bottom: 0; border-radius: 9px; }
.guia-panel.translucida { opacity: 0.55; transition: opacity 0.15s; }
.guia-panel.translucida:hover, .guia-panel.arrastrando { opacity: 1; }  /* sin :focus-within: tras pulsar ◐ se ve el efecto */
.guia-panel.agrandada { width: min(44rem, calc(100vw - 2rem)); max-height: 85vh; font-size: 1.15rem; }
.guia-panel.agrandada h2 { font-size: 1.45rem; }
.guia-texto { margin: 0.4rem 0 0.6rem; }
.guia-no-esta { margin: 0.3rem 0; font-size: 0.9rem; color: var(--texto-suave); }
.guia-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.guia-lecciones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); margin-bottom: 1rem; }
.guia-activa .boton-ia { display: none; }
/* G3: el desplegable del botón «🎓 Guía» (lo coloca guia.js justo debajo del botón). */
.guia-desplegable { position: fixed; z-index: 1005; display: flex; flex-direction: column; min-width: 17rem; max-width: calc(100vw - 16px);
  padding: 0.35rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 20, 30, 0.22); }
.guia-opcion { display: block; width: 100%; padding: 0.55rem 0.75rem; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left;
  color: var(--texto); text-decoration: none; cursor: pointer; }
.guia-opcion:hover, .guia-opcion:focus-visible { background: rgba(224, 0, 0, 0.08); color: #b00000; outline: none; }
@media (max-width: 640px) {
  .guia-panel, .guia-panel[data-lado="arriba"] { left: 0.5rem; right: 0.5rem; top: auto; bottom: 0.5rem; width: auto; max-height: 50vh; }
  .guia-mano svg { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .guia-marco, .guia-mano { transition: none; }
  .guia-marco.visible { animation: none; }
}
@media print { .guia-velo, .guia-marco, .guia-mano, .guia-estela, .guia-panel { display: none !important; } }
/* Revisión de contratos (pasos C3 a C8) */
.insignia-recibida, .insignia-pendiente-decision { background: #fff4d6; color: #7a5300; }
.insignia-en-revision, .insignia-puntos-aprobados, .insignia-documentos-listos, .insignia-correo-preparado { background: #e3edff; color: #1d4ed8; }
.insignia-aceptado, .insignia-ajustado, .insignia-cerrada { background: #e2f5e9; color: #146c2e; }
.punto-revision { border-left: 4px solid #c7d2fe; }
.punto-revision h3 { margin-top: 0; }
.punto-revision del { color: #6b7280; }