/* ============================================================
   estilos.css — Cooperadora Escolar
   ============================================================ */
:root {
  --bg: #f2f5f9;
  --panel: #ffffff;
  --tinta: #1c2537;
  --tinta-2: #5a6885;
  --linea: #e2e8f2;
  --primario: #1e5aa8;
  --primario-osc: #17457f;
  --secundario: #7b4bb7;
  --verde: #17864f;
  --rojo: #c02b3b;
  --ambar: #b5730c;
  --sombra: 0 1px 2px rgba(20, 35, 60, .06), 0 6px 18px rgba(20, 35, 60, .06);
  --radio: 10px;
  --nav: 234px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); color: var(--tinta);
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45;
}

body { display: flex; }
body.modal-abierto { overflow: hidden; }

h2 { font-size: 22px; margin: 0; }
h3 { font-size: 16px; margin: 0 0 10px; }
h4 { font-size: 14px; margin: 18px 0 8px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }

/* ---------------- navegación ---------------- */
#nav {
  width: var(--nav); flex: 0 0 var(--nav); height: 100vh; position: sticky; top: 0;
  background: #142033; color: #ccd6e6; display: flex; flex-direction: column;
}

.marca { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
img.logo, .marca .logo { width: 42px !important; height: 42px !important; max-width: 42px !important;
  max-height: 42px !important; object-fit: contain; display: block; flex: 0 0 auto; }
.marca b { display: block; color: #fff; font-size: 16px; letter-spacing: .01em; }
.marca small { color: #8fa2bd; font-size: 12px; }

#nav nav { padding: 10px 8px; flex: 1; overflow-y: auto; }

.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; color: #ccd6e6; text-align: left;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px;
  font-family: inherit;
}
.nav-item i { font-style: normal; width: 20px; text-align: center; }
.nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-item.activo { background: var(--primario); color: #fff; font-weight: 600; }
.nav-item .badge {
  margin-left: auto; background: var(--rojo); color: #fff; font-size: 11px;
  min-width: 19px; height: 19px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; padding: 0 5px; font-weight: 700;
}
.nav-sep { color: #6b7f9c; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 14px 12px 6px; }
.nav-pie { padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.08); }
.nav-pie small { color: #7e91ad; font-size: 11.5px; line-height: 1.5; }

/* ---------------- layout ---------------- */
#app { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }

#app-head {
  height: 54px; background: var(--panel); border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 12px; padding: 0 20px; position: sticky; top: 0; z-index: 5;
}
#btn-menu { display: none; }
.head-saldo { margin-left: auto; text-align: right; line-height: 1.15; }
.head-saldo span { display: block; font-size: 11px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; }
.head-saldo b { font-size: 17px; color: var(--primario); }

#app-main { flex: 1; overflow-y: auto; padding: 22px 24px 60px; }
.vista.oculta { display: none; }

.vista-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.vista-head .sub { margin: 3px 0 0; color: var(--tinta-2); font-size: 13.5px; }
.acciones-head { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- botones ---------------- */
.btn {
  border: 1px solid transparent; border-radius: 8px; padding: 8px 14px;
  font-size: 14px; font-family: inherit; cursor: pointer; background: #eef1f6; color: var(--tinta);
  white-space: nowrap;
}
.btn:hover { filter: brightness(.97); }
.btn.primary { background: var(--primario); color: #fff; }
.btn.primary:hover { background: var(--primario-osc); }
.btn.secundario { background: var(--secundario); color: #fff; }
.btn.ghost { background: var(--panel); border-color: var(--linea); color: var(--tinta); }
.btn.ghost:hover { background: #f6f8fb; }
.btn.danger, .btn.peligro { background: var(--rojo); color: #fff; }
.btn.mini-btn { padding: 6px 10px; font-size: 13px; }

.icon-btn {
  background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--tinta-2);
  padding: 4px 8px; border-radius: 6px; line-height: 1;
}
.icon-btn:hover { background: #eef1f6; }

/* Campo de contraseña con botón de mostrar/ocultar (ver UI.texto en ui.js) */
.campo-pass { position: relative; display: flex; align-items: center; }
.campo-pass input { width: 100%; padding-right: 40px; }
.campo-pass .toggle-pass {
  position: absolute; right: 2px; font-size: 16px; padding: 4px 8px;
}

.acc { display: flex; gap: 4px; justify-content: center; }
.mini {
  border: 1px solid var(--linea); background: var(--panel); border-radius: 6px;
  padding: 3px 7px; cursor: pointer; font-size: 13px; line-height: 1.4;
}
.mini:hover { background: #eef3fa; border-color: #c6d4e8; }
.mini.danger:hover { background: #fdeaec; border-color: #f0bcc2; }
.botonera { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------- filtros ---------------- */
.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 10px 12px; margin-bottom: 14px; box-shadow: var(--sombra);
}
.filtros input[type=search] { flex: 1 1 260px; min-width: 200px; }
.filtros select.ancho { flex: 1 1 340px; }
.filtros label.inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tinta-2); }

input, select, textarea {
  font-family: inherit; font-size: 14px; color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 7px; padding: 7px 9px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd4f5; border-color: var(--primario); }
textarea { resize: vertical; }

/* ---------------- tarjetas y KPIs ---------------- */
.card {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px 18px; box-shadow: var(--sombra); margin-bottom: 16px;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpis.chicos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 12px 0; }
.kpi {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 14px; box-shadow: var(--sombra);
}
.kpi span { display: block; font-size: 12px; color: var(--tinta-2); text-transform: uppercase; letter-spacing: .04em; }
.kpi b { display: block; font-size: 21px; margin-top: 3px; }
.kpis.grandes .kpi b { font-size: 24px; }
.kpi small { display: block; color: var(--tinta-2); font-size: 11.5px; margin-top: 2px; }
.kpi b.fuerte { color: var(--primario); }

.pos { color: var(--verde); }
.neg { color: var(--rojo); }
.warn { color: var(--ambar); }
.mut { color: var(--tinta-2); }
.num { text-align: right; }
.centro { text-align: center; }
.hint { font-size: 13px; color: var(--tinta-2); margin: 4px 0 12px; }
.mt6 { margin-top: 6px; }

/* ---------------- tablas ---------------- */
.tabla-wrap {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow-x: auto; margin-bottom: 16px;
}
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-2); background: #f7f9fc; padding: 9px 12px; border-bottom: 1px solid var(--linea);
  white-space: nowrap; font-weight: 600;
}
.tabla td { padding: 9px 12px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.tabla tbody tr:hover { background: #f8fbff; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla small { font-size: 12px; }
.tabla.mini { font-size: 13px; }
.tabla.mini td, .tabla.mini th { padding: 6px 10px; }
.tabla tfoot td, .tabla tr.total td {
  background: #f4f7fb; font-weight: 700; border-top: 2px solid var(--linea); border-bottom: 0;
}
.vacio {
  background: var(--panel); border: 1px dashed #cfdae9; border-radius: var(--radio);
  padding: 28px; text-align: center; color: var(--tinta-2);
}

.chip {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: #eef1f6; color: var(--tinta-2);
}
.chip.verde { background: #e3f4ea; color: var(--verde); }
.chip.azul { background: #e7f0fb; color: var(--primario); }
.chip.violeta { background: #f1e9fb; color: var(--secundario); }
.chip.gris { background: #eceff4; color: #6a7a92; }
.chip.rojo { background: #fbe4e6; color: var(--rojo); }

/* ---------------- listas ---------------- */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid #eef2f7; font-size: 14px;
}
.lista li:last-child { border-bottom: 0; }
.lista.chips li { border: 0; padding: 4px 0; }
.agregar { display: flex; gap: 6px; margin-top: 10px; }
.agregar input { flex: 1; }

.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.mini-stats div { text-align: center; background: #f7f9fc; border-radius: 8px; padding: 8px 4px; }
.mini-stats b { display: block; font-size: 19px; color: var(--primario); }
.mini-stats span { font-size: 11px; color: var(--tinta-2); }

.pasos { margin: 6px 0 12px 18px; padding: 0; }
.pasos li { margin-bottom: 5px; }
.notas { background: #f7f9fc; border-radius: var(--radio); padding: 12px 16px; margin-top: 12px; }
.notas ul { margin: 6px 0 0 18px; padding: 0; }

/* ---------------- barras de progreso y gráfico ---------------- */
.progreso {
  position: relative; height: 18px; background: #eef1f6; border-radius: 10px; overflow: hidden; min-width: 110px;
}
.progreso i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; }
.progreso i.ok { background: #2f9e63; }
.progreso i.medio { background: #d9a334; }
.progreso i.bajo { background: #d1596a; }
.progreso span { position: relative; display: block; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 18px; color: #1c2537; }
.progreso.grande { height: 26px; }
.progreso.grande span { line-height: 26px; font-size: 13px; }

.grafico {
  display: flex; gap: 10px; align-items: flex-end; height: 190px;
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 16px; box-shadow: var(--sombra); overflow-x: auto;
}
.grafico .col { flex: 1 1 40px; min-width: 40px; display: flex; flex-direction: column; height: 100%; }
.grafico .barras { flex: 1; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.grafico .barras i { width: 14px; border-radius: 3px 3px 0 0; min-height: 2px; display: block; }
.grafico .col span { text-align: center; font-size: 11px; color: var(--tinta-2); padding-top: 6px; }
.b-ing { background: #2f7bd0; }
.b-egr { background: #d1596a; }
.leyenda { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--tinta-2); margin: 8px 0 16px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }

/* ---------------- modal ---------------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(16, 26, 43, .5); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto;
}
.modal {
  background: var(--panel); border-radius: 12px; width: 100%; box-shadow: 0 20px 60px rgba(10,20,40,.3);
  display: flex; flex-direction: column; max-height: calc(100vh - 80px);
}
.modal-head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.modal-head h3 { margin: 0; flex: 1; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--linea); background: #f8fafc; border-radius: 0 0 12px 12px; }
.confirm-msg { margin: 4px 0; }

.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.modal-body h4 { margin: 18px 0 8px; padding-bottom: 4px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--tinta-2); border-bottom: 1px solid var(--linea); }
.modal-body h4:first-child { margin-top: 0; }
.campo { display: flex; flex-direction: column; gap: 4px; grid-column: span 12; font-size: 13px; color: var(--tinta-2); }
.campo > span { font-weight: 600; }
.campo input, .campo select, .campo textarea { font-size: 14px; color: var(--tinta); }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; }
.c5 { grid-column: span 5; } .c6 { grid-column: span 6; } .c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }
.campo.check { flex-direction: row; align-items: center; gap: 7px; }
.campo.check input { width: 16px; height: 16px; }
.campo.checks, .checks { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.valor-solo-lectura { font-size: 15px; font-weight: 600; color: var(--tinta); padding: 6px 0; }
.link-inline { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 11.5px;
  color: var(--primario); text-decoration: underline; cursor: pointer; }

.buscador { position: relative; }
.buscador-caja { position: relative; display: flex; align-items: center; }
.buscador-caja input[type=text] { width: 100%; padding-right: 30px; }
.buscador-clear {
  position: absolute; right: 3px; background: none; border: none; font-size: 13px;
  color: var(--tinta-2); cursor: pointer; padding: 5px 8px; line-height: 1;
}
.buscador-clear:hover { color: var(--rojo); }
.buscador-lista {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: #fff; border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10,20,40,.15); max-height: 240px; overflow-y: auto;
}
.buscador-cabecera {
  padding: 6px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--tinta-2); background: #f7f9fc; border-bottom: 1px solid var(--linea);
}
.buscador-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--linea); }
.buscador-item:last-child { border-bottom: none; }
.buscador-item:hover { background: #f4f7fb; }
.buscador-item b { display: block; font-size: 13.5px; color: var(--tinta); font-weight: 600; }
.buscador-item small { display: block; font-size: 11.5px; color: var(--tinta-2); margin-top: 1px; }
.buscador-vacio { padding: 10px 12px; font-size: 13px; color: var(--tinta-2); }

.periodos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.per { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea); border-radius: 8px; padding: 6px 10px; cursor: pointer; background: #fff; }
.per:hover { border-color: var(--primario); }
.per span { font-size: 13px; color: var(--tinta); }
.per small { display: block; color: var(--tinta-2); font-size: 11.5px; }
.per input:checked + span { font-weight: 700; color: var(--primario); }
.per.futuro { background: #fbfaf5; border-style: dashed; }

.ficha { background: #f7f9fc; border-radius: 8px; padding: 10px 14px; font-size: 14px; }
.ejemplo { background: #f4f7fb; border: 1px solid var(--linea); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; overflow-x: auto; margin: 8px 0; }
textarea.mono { width: 100%; font-family: Consolas, "Courier New", monospace; font-size: 13px; }

/* ---------------- toasts ---------------- */
#toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #16324f; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px;
  box-shadow: 0 8px 24px rgba(10,20,40,.25); opacity: 1; transition: opacity .5s;
}
.toast.err { background: var(--rojo); }
.toast.fade { opacity: 0; }

/* ---------------- solapas ---------------- */
.solapas { display: flex; gap: 4px; border-bottom: 2px solid var(--linea); margin-bottom: 14px; }
.solapa {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: 9px 16px; font-family: inherit; font-size: 14.5px; color: var(--tinta-2);
  cursor: pointer; display: flex; align-items: center; gap: 7px;
}
.solapa:hover { color: var(--tinta); }
.solapa.activa { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }
.solapa b {
  background: #eef1f6; color: var(--tinta-2); border-radius: 10px;
  padding: 1px 8px; font-size: 12px;
}
.solapa.activa b { background: var(--primario); color: #fff; }

/* ---------------- prorrateo ---------------- */
.tabla.reparto input.pct {
  width: 90px; text-align: right; padding: 4px 7px; font-size: 13.5px;
}
.tabla.reparto input.pct[readonly] { background: #f4f7fb; color: var(--tinta-2); }
.reparto-total {
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  padding: 10px 14px; border-radius: 8px; font-size: 13.5px; margin-top: 4px;
}
.reparto-total.ok { background: #e3f4ea; border: 1px solid #b7e0c6; }
.reparto-total.mal { background: #fdf6e6; border: 1px solid #ecd9a8; }

.chip.ambar { background: #fdf1dc; color: var(--ambar); }

/* Tipo de inscripción recibida desde el portal web */
.chip.tipo-titular {
  background: #e3f4ea; color: var(--verde); font-weight: 700;
}
.chip.tipo-suplente {
  background: #fdf1dc; color: var(--ambar); font-weight: 700;
}
.preinscripcion-tipo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: #f8fafc; border: 1px solid var(--linea); border-radius: 8px;
}
.preinscripcion-tipo-label {
  color: var(--tinta-2); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Ver ficha de preinscripción: etiqueta arriba, valor abajo, agrupado por
   sección — mismo criterio que la ficha impresa, para pantalla. */
.ficha-datos-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px; margin: 0 0 10px;
}
.ficha-datos-grid .dato { display: flex; flex-direction: column; gap: 2px; }
.ficha-datos-grid .dato b {
  font-size: 11px; font-weight: 600; color: var(--tinta-2);
  text-transform: uppercase; letter-spacing: .02em;
}
.ficha-datos-grid .dato span { font-size: 14px; color: var(--tinta); }

/* Recordatorio de separación contable (partidas vs. cooperadora) */
.aviso-separacion {
  background: #f1e9fb; border: 1px solid #ddc9f3; color: #5a3c85;
  border-radius: 8px; padding: 9px 13px; font-size: 13px; margin: 0 0 14px;
}
.saldos-rubro { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.saldo-rubro {
  background: #fff; border: 1px solid var(--linea); border-radius: 7px;
  padding: 4px 10px; font-size: 12.5px;
}
.saldo-rubro b { display: block; font-size: 11.5px; color: var(--tinta-2); font-weight: 600; }
.hint.warn { color: var(--ambar); }
.tabla.reparto input[type=text] { width: 100%; padding: 4px 7px; font-size: 13.5px; }
.enlace { color: var(--primario); text-decoration: none; border-bottom: 1px dotted; cursor: pointer; }
.enlace:hover { border-bottom-style: solid; }

/* ---------------- catálogo de reportes ---------------- */
.reportes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 18px; }
.reporte {
  background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 14px 16px; box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.reporte h5 { margin: 0 0 5px; font-size: 14.5px; }
.reporte p { margin: 0 0 12px; font-size: 12.5px; color: var(--tinta-2); flex: 1; line-height: 1.45; }
.reporte .btn { align-self: flex-start; }

/* Auditoría: campos que cambiaron */
.tabla tr.cambiado td { background: #fdf8e8; }
.tabla code { font-family: Consolas, "Courier New", monospace; font-size: 12.5px; color: var(--secundario); }

/* ---------------- sesión, carga y estados ---------------- */
.perfil { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.perfil-datos { text-align: right; line-height: 1.2; }
.perfil-datos b { font-size: 14px; }
.perfil-datos small { display: block; color: var(--tinta-2); font-size: 11.5px; }

.cargando {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 40px; color: var(--tinta-2); font-size: 14px;
}
.spinner {
  width: 18px; height: 18px; border: 2px solid #cfdae9; border-top-color: var(--primario);
  border-radius: 50%; display: inline-block; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.error-vista { border-color: #f0bcc2; background: #fdf6f7; color: var(--rojo); }
.error-vista p { margin: 6px 0 0; color: var(--tinta-2); font-size: 13.5px; }

.nav-item.pendiente { opacity: .45; cursor: not-allowed; }
.nav-item.pendiente:hover { background: none; color: #ccd6e6; }

.tabla tr.anulado td { opacity: .55; text-decoration: line-through; }
.tabla tr.anulado td:last-child { text-decoration: none; }

/* ---------------- formularios: ayudas y errores del servidor ---------------- */
.campo .ayuda { font-weight: 400; color: var(--tinta-2); font-size: 11.5px; line-height: 1.35; }
.campo.check { align-items: flex-start; }
.campo.check .ayuda { display: block; }

.modal-error {
  margin: 0 18px 4px; padding: 10px 12px; border-radius: 8px; font-size: 13.5px;
  background: #fdeaec; border: 1px solid #f0bcc2; color: #a01e2d;
}

.ejemplo {
  background: #f4f7fb; border: 1px solid var(--linea); border-radius: 7px;
  padding: 8px 10px; font-size: 12.5px; overflow-x: auto; margin: 8px 0;
}
textarea.mono { width: 100%; font-family: Consolas, "Courier New", monospace; font-size: 13px; }

/* Chip de especialidad con su turno */
.chip { display: inline-flex; align-items: baseline; gap: 5px; }
.chip .chip-turno { font-style: normal; font-size: 10.5px; opacity: .7; font-weight: 400; }

/* ---------------- roles y permisos ---------------- */
.roles-permisos-layout { display: flex; gap: 16px; align-items: flex-start; }
.roles-lista { flex: 0 0 280px; display: flex; flex-direction: column; gap: 4px; padding: 10px; }
.rol-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.rol-item:hover { background: #f6f8fb; }
.rol-item.activo { background: var(--primario); color: #fff; }
.rol-item.activo .mut { color: rgba(255, 255, 255, .75); }
.rol-item-info { display: flex; flex-direction: column; gap: 2px; }
.rol-item-info small { font-size: 12px; }

.permisos-panel { flex: 1 1 auto; min-width: 0; }
.permisos-panel-head { margin-bottom: 14px; }
.permiso-grupo { margin-bottom: 18px; }
.permiso-grupo-titulo {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linea);
}
.permiso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 16px; }
.permiso-item { margin: 0; }
.permisos-actions { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }

@media (max-width: 760px) {
  .roles-permisos-layout { flex-direction: column; }
  .roles-lista { flex: 1 1 auto; width: 100%; }
}

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  #nav { position: fixed; left: -260px; z-index: 50; transition: left .2s; }
  body.nav-abierta #nav { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  #btn-menu { display: block; }
  #app-main { padding: 16px 14px 60px; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
  .acciones-head { width: 100%; margin-left: 0; }
}

/* ============================================================
   IMPRESIÓN
   ============================================================ */
.print-area { display: none; }

@media print {
  /* CORTE TOTAL de UI: solo debe imprimirse el contenido dentro de #print-area.
     Ocultamos por lo alto todo lo demás para que jamás se cuele ningún panel,
     modal, banner ni sombra que haga parecer el PDF una "captura de pantalla". */
  body { display: block; background: #fff; font-family: Arial, Helvetica, sans-serif; margin: 0; }
  #nav, #app-head, #toasts, #app, .acciones-head, .filtros, .no-print,
  .banner-alerta, .modal-back, .modal, aside { display: none !important; }
  body > *:not(#print-area) { display: none !important; }

  .print-area {
    display: block; padding: 0; color: #000; font-size: 10pt;
  }

  /* Encabezado unificado (V4): logo a la izquierda + institución/domicilio */
  .print-head {
    display: flex; align-items: center; gap: 12px;
    border-bottom: 1.5px solid #000; padding-bottom: 6px; margin-bottom: 8px;
  }
  .print-logo { height: 52px; width: auto; flex: 0 0 auto; }
  .print-titulo { flex: 1 1 auto; }
  .print-inst { font-size: 13pt; font-weight: 700; }
  .print-sub { font-size: 9pt; line-height: 1.25; }

  /* Insignia opcional del encabezado (ej. N° de ficha) — mismo lugar que
     en la página web, junto al logo/institución. */
  .print-badge { flex: 0 0 auto; text-align: center; border: 1.5px solid #000;
                 border-radius: 6px; padding: 4px 12px; }
  .print-badge-label { display: block; font-size: 6.5pt; text-transform: uppercase;
                        letter-spacing: .06em; color: #555; }
  .print-badge-valor { display: block; font-size: 16pt; font-weight: 800; line-height: 1.15; }

  .print-h1 { font-size: 12pt; margin: 6px 0 4px; font-weight: 700; text-align: left; }
  .print-datos {
    display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 9.5pt;
    margin-bottom: 6px; padding: 4px 6px;
    border: 1px solid #000; border-radius: 0; background: #f6f6f6 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .print-area h3 { font-size: 10.5pt; margin: 10px 0 4px; border-bottom: 1px solid #000; }
  .print-area h4 { font-size: 9.5pt; margin: 6px 0 3px; }

  /* Tabla estándar del sistema — sigue con bordes finos y compactos. */
  .print-area table { width: 100%; border-collapse: collapse; font-size: 9pt; margin-bottom: 8px; }
  .print-area th, .print-area td { border: 1px solid #000; padding: 3px 6px; }
  .print-area th { background: #e9e9e9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; text-align: left; font-weight: 700; }
  .print-area tr.total td, .print-area tfoot td { font-weight: 700; background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-area tr.saldo-ant td { background: #f6f6f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-area .num { text-align: right; }
  .print-area .kpis, .print-area .grafico, .print-area .progreso, .print-area .acc,
  .print-area .filtros, .print-area .acciones-head, .print-area button { display: none !important; }
  .print-area .notas { border: 1px solid #000; padding: 6px 10px; font-size: 9pt; }
  .print-area .cierre { font-size: 9.5pt; margin-top: 8px; }
  .print-area .linea { min-width: 90px; }
  .print-area tr { page-break-inside: avoid; }
  .print-area thead { display: table-header-group; }

  /* Pie repetido en cada hoja (misma técnica que .inf-pie en informe.js):
     el membrete grande de arriba solo aparece en la primera página, así
     que esta línea identifica el documento en las páginas siguientes. */
  .print-pie {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-between;
    border-top: .5px solid #999; padding-top: 3px;
    font-size: 7pt; color: #555; background: #fff;
  }

  /* Estilo "planilla de cálculo" (V4 §1.1) para listados densos.
     Cuando el reporte agrega class="planilla" a su tabla se activa el look
     compacto con más filas por hoja. */
  .print-area table.planilla { font-size: 8.5pt; }
  .print-area table.planilla th,
  .print-area table.planilla td { padding: 1px 4px; border: 1px solid #000; line-height: 1.1; }
  .print-area table.planilla th { background: #f0f0f0 !important; text-transform: uppercase; letter-spacing: .02em; }
  .print-area table.planilla td small { font-size: 7.2pt; color: #444; }

  /* Ficha compacta (V5 §3.b + pedido "menor cantidad de hojas" + unificada
     con el formato de la ficha web): etiqueta arriba, valor abajo (no en
     la misma línea) para que las etiquetas largas nunca aprieten el valor
     contra el borde de la columna. Cada sección tiene título con borde.
     Objetivo: la ficha completa entra en 1 sola hoja A4. */
  /* Margen izquierdo extra (solo en esta ficha, no en el resto de los
     reportes) para poder perforar la hoja y encarpetarla. */
  .print-area.ficha-print { padding-left: 16mm; }
  /* CSS grid no se puede partir entre hojas: si una sección no entra
     entera en lo que queda de la página, salta completa a la siguiente.
     Se agrupa título+grilla para que al menos no quede el título solo. */
  .ficha-print .ficha-seccion { break-inside: avoid; page-break-inside: avoid; }
  .ficha-print h3 { font-size: 10pt; margin: 4px 0 1px; padding: 1px 0;
                    border-bottom: 1.2px solid #000; text-transform: uppercase;
                    letter-spacing: .05em; }
  .ficha-print .ficha-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    column-gap: 12px; row-gap: 1px; margin-bottom: 3px;
  }
  .ficha-print .ficha-grid.tres { grid-template-columns: repeat(3, 1fr); }
  .ficha-print .fld { display: flex; flex-direction: column;
                       border-bottom: 1px dotted #666; padding: 0 0 1px; }
  .ficha-print .fld.ancho { grid-column: 1 / -1; }
  .ficha-print .fld b { font-size: 7pt; font-weight: 700; color: #555; }
  .ficha-print .fld span { font-size: 8.5pt; line-height: 1.2; word-break: break-word; }

  .print-firmas { display: flex; justify-content: space-between; margin-top: 32px; font-size: 9pt; text-align: center; }
  .print-firmas div { width: 30%; }
  .print-firmas span { display: block; border-top: 1px solid #000; margin-bottom: 3px; }

  /* Recibos: mantienen su plantilla original, sin encabezado ni firmas globales.
     Compacto a propósito: original + talón de UN pago tienen que entrar en la
     mitad de una hoja A4 (pedido 2026-09-13), para no gastar una hoja entera
     por cada recibo — con dos pagos ya entran los cuatro comprobantes en una
     sola hoja. */
  .print-area.recibo .print-head, .print-area.recibo .print-h1,
  .print-area.recibo .print-datos,
  .print-area.recibo .print-firmas, .print-area.recibo .print-pie { display: none; }
  .recibo-box {
    border: 1px solid #000; padding: 6px 12px; margin-bottom: 6px; font-size: 9pt; line-height: 1.3;
    break-inside: avoid; page-break-inside: avoid;
  }
  .recibo-box p { margin: 3px 0; }
  .recibo-box table { margin-bottom: 0; }
  .recibo-box table td, .recibo-box table th { padding: 2px 6px; }
  .recibo-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; border-bottom: 1px solid #666; padding-bottom: 3px; margin-bottom: 4px; }
  .recibo-logo { height: 32px; width: auto; flex: 0 0 auto; }
  .recibo-inst { flex: 1 1 auto; }
  .recibo-num { text-align: right; font-weight: 700; flex: 0 0 auto; }
  .recibo-etiqueta { display: block; font-size: 7.5pt; font-weight: 700; letter-spacing: .08em; color: #555; }
  .recibo-firma { margin-top: 14px; text-align: right; font-size: 8.5pt; }
  .recibo-firma span { display: block; border-top: 1px solid #000; width: 170px; margin-left: auto; margin-bottom: 2px; }
  .corte { border-top: 2px dashed #666; margin: 6px 0; }

  /* Márgenes recortados a propósito (pedido 2026-09-13, a raíz de los
     recibos): menos margen arriba y abajo = más alto útil por hoja para
     todo lo que se imprime, recibos incluidos. El pie fijo (print-pie)
     sigue entrando cómodo con 10mm abajo. */
  @page { size: A4; margin: 6mm 10mm 10mm; }
}

/* ============================================================
   INFORMES PROFESIONALES (motor informe.js)
   ------------------------------------------------------------
   Pensados para A4. El ancho útil es 186 mm en vertical y
   273 mm en horizontal (márgenes de 12 mm). Las columnas se
   fijan con <colgroup> + table-layout:fixed para que el
   navegador no las reacomode al imprimir.
   ============================================================ */
@media print {

  /* ---------- hoja ---------- */
  .hoja {
    display: block; color: #000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 9.5pt; line-height: 1.35;
  }
  .hoja.apaisada { font-size: 9pt; }

  /* ---------- membrete ---------- */
  .inf-membrete {
    border-bottom: 2.5pt solid #1a1a1a;
    padding-bottom: 6pt; margin-bottom: 10pt;
  }
  .inf-encabezado-top { display: flex; align-items: center; gap: 10pt; }
  .inf-logo { height: 40pt; width: auto; flex: 0 0 auto; }
  .inf-inst { flex: 1 1 auto; display: flex; justify-content: space-between; align-items: baseline; }
  .inf-inst-nombre {
    font-size: 13pt; font-weight: 700; letter-spacing: .2pt; text-transform: uppercase;
  }
  .inf-inst-datos { font-size: 8pt; color: #333; text-align: right; }

  .inf-titulo-caja { text-align: center; margin-top: 8pt; }
  .inf-titulo {
    font-size: 12.5pt; font-weight: 700; margin: 0;
    text-transform: uppercase; letter-spacing: .4pt;
  }
  .inf-subtitulo { font-size: 9.5pt; color: #333; margin-top: 2pt; }

  .inf-meta {
    display: flex; flex-wrap: wrap; gap: 3pt 16pt;
    margin-top: 7pt; padding-top: 5pt; border-top: .5pt solid #bbb;
    font-size: 8pt; color: #222;
  }
  .inf-meta span { color: #666; }

  /* ---------- tablas ---------- */
  .inf-tabla {
    width: 100%; border-collapse: collapse; table-layout: fixed;
    margin: 0 0 9pt; font-size: 8.6pt;
  }
  .hoja.apaisada .inf-tabla { font-size: 8.2pt; }
  .inf-tabla.compacta { font-size: 7.8pt; }

  .inf-tabla th, .inf-tabla td {
    border: .5pt solid #8a8a8a; padding: 3pt 4pt;
    vertical-align: top; overflow-wrap: break-word; word-break: normal;
  }
  .inf-tabla th {
    background: #dcdcdc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-weight: 700; text-align: left; font-size: 8.2pt;
    text-transform: uppercase; letter-spacing: .2pt;
  }
  .inf-tabla td.num, .inf-tabla th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .inf-tabla td.centro, .inf-tabla th.centro { text-align: center; }
  .inf-tabla td.chico { font-size: 7.6pt; color: #444; }
  .inf-tabla tr.par td {
    background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* subtotales y totales */
  .inf-tabla tr.subtotal td {
    background: #ededed !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-weight: 700; font-style: italic;
  }
  .inf-tabla tfoot td {
    background: #cfcfcf !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-weight: 700; border-top: 1.2pt solid #333;
  }
  .inf-tabla tr.anulada td { color: #666; text-decoration: line-through; }

  /* ---------- agrupaciones ---------- */
  .inf-grupo {
    font-size: 10pt; font-weight: 700; margin: 11pt 0 4pt;
    padding: 3pt 5pt; background: #1a1a1a !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    display: flex; justify-content: space-between; align-items: baseline;
    break-after: avoid; page-break-after: avoid;
  }
  .inf-grupo-det { font-size: 8pt; font-weight: 400; }

  /* ---------- resumen final ---------- */
  .inf-resumen { margin-top: 12pt; break-inside: avoid; page-break-inside: avoid; }
  .inf-resumen h3 {
    font-size: 10.5pt; margin: 0 0 4pt; padding-bottom: 2pt;
    border-bottom: 1.2pt solid #1a1a1a; text-transform: uppercase; letter-spacing: .3pt;
  }
  .inf-tabla.resumen tr.fuerte td {
    background: #1a1a1a !important; color: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    font-size: 10pt; font-weight: 700;
  }

  /* ---------- cifras destacadas ---------- */
  .inf-cifras { display: flex; gap: 6pt; margin-bottom: 10pt; }
  .inf-cifra {
    flex: 1; border: .8pt solid #666; padding: 5pt 7pt; text-align: center;
    break-inside: avoid;
  }
  .inf-cifra-t { display: block; font-size: 7.5pt; text-transform: uppercase; color: #444; letter-spacing: .2pt; }
  .inf-cifra-v { display: block; font-size: 12pt; font-weight: 700; margin-top: 2pt; font-variant-numeric: tabular-nums; }
  .inf-cifra.pos .inf-cifra-v { color: #0a5c2a; }
  .inf-cifra.neg .inf-cifra-v { color: #97131b; }

  /* ---------- notas, vacíos y firmas ---------- */
  .inf-vacio {
    border: .5pt dashed #999; padding: 10pt; text-align: center;
    color: #555; font-style: italic; font-size: 9pt;
  }
  .inf-nota {
    border-left: 2.5pt solid #666; padding: 5pt 8pt; margin-top: 10pt;
    font-size: 8pt; color: #333; background: #f7f7f7 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid;
  }
  .inf-firmas {
    display: flex; justify-content: space-around; gap: 12pt;
    margin-top: 26pt; font-size: 8.5pt; text-align: center;
    break-inside: avoid; page-break-inside: avoid;
  }
  .inf-firmas div { width: 30%; }
  .inf-firmas span { display: block; border-top: .8pt solid #000; margin-bottom: 3pt; }

  /* ---------- pie repetido en cada hoja ---------- */
  .inf-pie {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-between;
    border-top: .5pt solid #999; padding-top: 3pt;
    font-size: 7pt; color: #555;
  }

  /* ---------- control de saltos ---------- */
  .hoja thead { display: table-header-group; }
  .hoja tfoot { display: table-row-group; }
  .hoja tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .hoja .salto-antes { break-before: page; page-break-before: always; }
  .hoja .junto { break-inside: avoid; page-break-inside: avoid; }
}

/* En pantalla el área de informe permanece oculta. Al imprimir, la regla del
   bloque @media print de arriba (.print-area { display: block }) empata en
   especificidad con esta y perdía por orden de aparición: los informes
   nuevos salían con hoja en blanco. Con la reversión explícita, gana block. */
.hoja { display: none; }
@media print { .hoja { display: block; } }

/* ============================================================
   PANEL DE TESORERÍA — controles automáticos y elección de KPIs
   ============================================================ */
.controles .avisos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }

.aviso {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 8px; border-left: 4px solid var(--bord, #ccc);
  background: var(--fondo2, #f7f8fa);
}
.aviso small { color: var(--mut, #667); line-height: 1.4; }
.aviso .btn { flex: 0 0 auto; }

.aviso.alerta { border-left-color: #c0392b; background: #fdf2f1; }
.aviso.aviso  { border-left-color: #d68910; background: #fdf8ef; }
.aviso.ok     { border-left-color: #1e8449; background: #f1f9f4; }

.controles h3 .chip { vertical-align: middle; margin-left: 6px; font-weight: 500; }

/* Elección de indicadores */
.elegibles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-bottom: 14px; }

.elegible {
  display: flex; gap: 9px; align-items: flex-start; cursor: pointer;
  padding: 9px 11px; border: 1px solid var(--bord, #dde); border-radius: 8px;
  background: var(--fondo, #fff); transition: border-color .12s, background .12s;
}
.elegible:hover { border-color: var(--pri, #4a6cf7); background: var(--fondo2, #f7f8fa); }
.elegible input { margin-top: 3px; flex: 0 0 auto; }
.elegible span { display: block; }
.elegible small { display: block; color: var(--mut, #667); font-size: .82em; margin-top: 2px; line-height: 1.35; }

/* Tarjeta de reporte destacada */
.reporte.destacado { border-color: var(--pri, #4a6cf7); box-shadow: 0 0 0 1px var(--pri, #4a6cf7) inset; }
.reporte.destacado h5::after {
  content: 'Nuevo'; float: right; font-size: .68em; font-weight: 600;
  background: var(--pri, #4a6cf7); color: #fff; padding: 1px 6px; border-radius: 10px;
}

@media (max-width: 700px) {
  .aviso { flex-direction: column; align-items: stretch; }
  .elegibles { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Banner de alerta permanente (retenciones críticas — ETR-MOD-2026-01 §1.2)
   Barra fija arriba del contenido principal, se oculta cuando la cola está vacía.
   --------------------------------------------------------------------------- */
.banner-alerta {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: #fff4e5;
  border-bottom: 2px solid #f59e0b; color: #7c4a03;
  font-size: .95em;
}
.banner-alerta.oculta { display: none; }
.banner-alerta .icono { font-size: 1.35em; line-height: 1; }
.banner-alerta .msj { flex: 1; }
.banner-alerta button { margin-left: auto; }

/* Variantes de color del banner (info/aviso/peligro) */
.banner-alerta.info    { background: #eef4ff; border-bottom-color: #4a6cf7; color: #1e3a8a; }
.banner-alerta.aviso   { background: #fff4e5; border-bottom-color: #f59e0b; color: #7c4a03; }
.banner-alerta.peligro { background: #fde8ea; border-bottom-color: #dc2626; color: #7f1d1d; }

/* Filas resaltadas de la bandeja de preinscripciones */
.tabla tr.ficha-vencida  td { background: #fff1f2 !important; }
.tabla tr.ficha-revision td { background: #fff8e6 !important; }

/* Lista de adjuntos en la bandeja de preinscripciones */
.lista.adjuntos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lista.adjuntos a { font-weight: 600; }

/* Banner celeste para preinscripciones pendientes de aprobar */
.banner-alerta.info {
  background: #e6f2fb;
  border-bottom-color: #2e5b88;
  color: #0f3760;
}

/* --- Módulo Recursos (FASE F) --- */
.info-cuerpo { white-space: pre-wrap; line-height: 1.45; margin: 6px 0; }
.print-area .info-cuerpo { font-size: 10pt; }

/* Matriz de notas — colores por rango. Verde ≥6, ambar <6, rojo en error. */
.notas-matriz .nota-input {
  width: 84px; text-align: center; font-weight: 700; font-size: 15px;
  padding: 4px 6px; border-radius: 6px;
}
.notas-matriz .nota-input.nota-ok    { background: #e6f6ec; border-color: #17864f; color: #0f5a34; }
.notas-matriz .nota-input.nota-baja  { background: #fff4e5; border-color: #b5730c; color: #7c4a03; }
.notas-matriz .nota-input.nota-error { background: #fdeaec; border-color: #c02b3b; color: #7f1d1d; }
.notas-matriz .nota-baja { color: #b5730c; }
.notas-matriz .nota-ok   { color: #17864f; }


/* ---------------- Asistente de ayuda (chatbox) ---------------- */
.asis-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--primario); color: #fff; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(20, 35, 60, .28);
}
.asis-btn:hover { background: var(--primario-osc); }

.asis-panel {
  position: fixed; right: 22px; bottom: 86px; z-index: 50;
  width: 340px; max-width: calc(100vw - 32px);
  height: 440px; max-height: calc(100vh - 130px);
  background: var(--panel); border-radius: var(--radio); box-shadow: var(--sombra);
  border: 1px solid var(--linea);
  display: flex; flex-direction: column; overflow: hidden;
}
.asis-panel.oculto { display: none; }

.asis-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; background: var(--primario); color: #fff;
}
.asis-head b { display: block; font-size: 14px; }
.asis-head small { color: #dbe7f7; font-size: 11.5px; }
.asis-head .icon-btn { color: #fff; }
.asis-head .icon-btn:hover { background: rgba(255,255,255,.15); }

.asis-mensajes {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg);
}
.asis-msg {
  max-width: 85%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.4;
  white-space: pre-wrap;
}
.asis-msg-usuario {
  align-self: flex-end; background: var(--primario); color: #fff; border-bottom-right-radius: 3px;
}
.asis-msg-bot {
  align-self: flex-start; background: var(--panel); border: 1px solid var(--linea);
  color: var(--tinta); border-bottom-left-radius: 3px;
}
.asis-msg-bot.pensando { color: var(--tinta-2); font-style: italic; }
.asis-msg-bot.error { border-color: var(--rojo); color: var(--rojo); }

.asis-form {
  display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--linea); background: var(--panel);
}
.asis-form input {
  flex: 1; border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px;
  font-size: 13.5px; font-family: inherit;
}
.asis-form input:focus { outline: 2px solid var(--primario); outline-offset: -1px; }

@media (max-width: 480px) {
  .asis-panel { right: 16px; left: 16px; width: auto; bottom: 78px; }
  .asis-btn { right: 16px; bottom: 16px; }
}