/* ARMP · Gestión del estudio — paleta y tipografías de la oficina */
:root {
  --navy: #182642;
  --navy-2: #24365c;
  --paper: #f6f3ea;
  --paper-2: #efeadd;
  --line: #d9d2bd;
  --red: #9c3f2c;
  --steel: #6d7987;
  --ok: #2f6b4f;
  --warn: #a3781f;
  --blanco: #fffdf8;
  --sombra: 0 1px 2px rgba(24, 38, 66, 0.08), 0 4px 14px rgba(24, 38, 66, 0.06);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--navy);
  font: 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
a { color: var(--navy); }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.suave { color: var(--steel); }
.oculto { display: none !important; }

/* Estructura */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; gap: 18px;
  padding: 0 20px; height: 56px;
}
.marca { font-family: var(--serif); font-size: 20px; letter-spacing: 0.02em; color: #fff; text-decoration: none; }
.marca small { font: 400 11px var(--mono); letter-spacing: 0.12em; color: #aab6cc; margin-left: 8px; text-transform: uppercase; }
.nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.nav a {
  color: #cdd6e6; text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; font-size: 14px;
}
.nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav a.activo { background: rgba(255, 255, 255, 0.14); color: #fff; }
.buscar-btn {
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #dfe6f2;
  border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 13px; display: flex; gap: 10px; align-items: center;
}
.buscar-btn kbd { font: 11px var(--mono); background: rgba(255, 255, 255, 0.14); border-radius: 4px; padding: 1px 5px; }
.usuario { position: relative; }
.usuario > button { background: none; border: 0; color: #dfe6f2; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.usuario > button:hover { background: rgba(255, 255, 255, 0.1); }
.menu {
  position: absolute; right: 0; top: 40px; background: var(--blanco); color: var(--navy); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--sombra); min-width: 200px; padding: 6px; z-index: 30;
}
.menu button, .menu a {
  display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px;
  cursor: pointer; text-decoration: none; color: var(--navy);
}
.menu button:hover, .menu a:hover { background: var(--paper-2); }
.menu .rol { padding: 6px 10px 8px; font: 12px var(--mono); color: var(--steel); border-bottom: 1px solid var(--line); margin-bottom: 4px; }

main { max-width: 1280px; margin: 0 auto; padding: 24px 20px 80px; }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.encabezado .sobre { font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }

/* Tarjetas, métricas */
.tarjeta { background: var(--blanco); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--sombra); }
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metrica { padding: 12px 14px; }
.metrica .n { font: 500 26px var(--serif); line-height: 1.1; }
.metrica .t { font: 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel); margin-top: 2px; }
.metrica.alerta .n { color: var(--red); }

/* Botones y formularios */
.btn {
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: 7px; padding: 8px 14px; cursor: pointer;
  font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--navy-2); }
.btn.sec { background: transparent; color: var(--navy); border-color: var(--line); }
.btn.sec:hover { background: var(--paper-2); }
.btn.peligro { background: var(--red); border-color: var(--red); }
.btn.mini { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
input, select, textarea {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 1px; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--paper-2); color: #3a4358; }
textarea { min-height: 90px; resize: vertical; }
label.campo { display: block; }
label.campo > span { display: block; font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
label.campo .ayuda { font: 12px var(--sans); text-transform: none; letter-spacing: 0; color: var(--steel); margin-top: 3px; display: block; }
.campo.error input, .campo.error select, .campo.error textarea { border-color: var(--red); background: #fdf3f0; }
.campo .msg-error { color: var(--red); font-size: 12.5px; margin-top: 3px; display: block; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 18px; }
.rejilla .ancho { grid-column: 1 / -1; }
.zona-archivos { display: grid; gap: 6px; text-align: center; padding: 28px; border: 2px dashed var(--line); cursor: pointer; }
.zona-archivos.arrastrando, .zona-archivos:hover { border-color: var(--navy); background: var(--paper-2); }
details summary { cursor: pointer; }
label.chk { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
label.chk input { width: auto; }
.sobre { font: 500 11px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.marca { cursor: pointer; }

/* Barras de filtro */
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.filtros input[type='search'] { max-width: 280px; }
.filtros select { width: auto; min-width: 150px; }
.filtros label.chk { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; cursor: pointer; }
.filtros label.chk input { width: auto; }

/* Tablas */
.tabla-caja { overflow: auto; max-height: calc(100vh - 330px); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
thead th {
  position: sticky; top: 0; background: var(--paper-2); text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line);
  font: 500 11px var(--mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--steel); white-space: nowrap;
  user-select: none; z-index: 1;
}
thead th.ordenable { cursor: pointer; }
thead th.ordenable:hover { color: var(--navy); }
tbody td { padding: 8px 12px; border-bottom: 1px solid #ebe5d3; vertical-align: middle; }
tbody tr:hover { background: #f9f6ec; }
tbody tr.fila-link { cursor: pointer; }
td.num, th.num { text-align: right; font-family: var(--mono); }
td.mono { white-space: nowrap; }
.nav { scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.vacio { padding: 36px; text-align: center; color: var(--steel); }

/* Chips, barras */
.chip {
  display: inline-block; font: 500 11.5px var(--mono); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper-2); white-space: nowrap;
}
.chip.activo { background: #e4f0e9; border-color: #b9d6c6; color: var(--ok); }
.chip.por_revisar { background: #f8efd9; border-color: #e5d29d; color: var(--warn); }
.chip.congelado { background: #e8ecf1; border-color: #c7d0dc; color: var(--steel); }
.chip.baja { background: #f6e4df; border-color: #e1b9ae; color: var(--red); }
.chip.prospecto { background: #fff; border-color: var(--navy); color: var(--navy); }
.chip.ALTA { background: #f6e4df; border-color: #e1b9ae; color: var(--red); }
.chip.MEDIA { background: #f8efd9; border-color: #e5d29d; color: var(--warn); }
.chip.BAJA { background: #e8ecf1; border-color: #c7d0dc; color: var(--steel); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.barra { background: #e7e1cf; border-radius: 999px; height: 8px; min-width: 70px; overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.barra.media > i { background: var(--warn); }
.barra.baja > i { background: var(--red); }
.celda-barra { display: flex; align-items: center; gap: 8px; }
.celda-barra span { font: 12px var(--mono); min-width: 34px; text-align: right; }

/* Ficha */
.ficha-cab { padding: 18px 20px; margin-bottom: 14px; display: grid; gap: 12px; }
.ficha-cab .linea { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ficha-cab .rut { font: 500 14px var(--mono); color: var(--steel); }
.compl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.compl .barra { width: 220px; }
.faltan { font-size: 13px; color: var(--steel); }
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.pestanas button {
  background: none; border: 0; padding: 10px 14px; cursor: pointer; border-bottom: 3px solid transparent; color: var(--steel);
  white-space: nowrap; font-weight: 500;
}
.pestanas button.activo { color: var(--navy); border-bottom-color: var(--red); }
.pestanas .cuenta { font: 11px var(--mono); background: var(--paper-2); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.seccion { padding: 16px 18px; margin-bottom: 14px; }
.seccion > h3 { margin-bottom: 12px; }
.barra-guardar {
  position: sticky; bottom: 0; background: var(--navy); color: #fff; padding: 12px 20px; display: flex; gap: 12px;
  align-items: center; justify-content: space-between; border-radius: 10px 10px 0 0; box-shadow: 0 -4px 18px rgba(24, 38, 66, 0.25); z-index: 15;
}
.barra-guardar .btn { background: #fff; color: var(--navy); border-color: #fff; }
.barra-guardar .btn.sec { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #ebe5d3; flex-wrap: wrap; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple .grande { flex: 1; min-width: 180px; }
.pendiente { padding: 12px 0; border-bottom: 1px solid #ebe5d3; display: grid; gap: 6px; }
.pendiente:last-child { border-bottom: 0; }
.pendiente .acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* Superposiciones */
.velo { position: fixed; inset: 0; background: rgba(24, 38, 66, 0.45); z-index: 50; display: grid; place-items: start center; padding-top: 12vh; }
.modal { background: var(--blanco); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); width: min(560px, 92vw); padding: 20px; }
.modal h2 { margin-bottom: 12px; }
.modal .pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.buscador { width: min(640px, 94vw); padding: 0; overflow: hidden; }
.buscador input { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 18px; font-size: 17px; }
.buscador ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.buscador li { padding: 9px 12px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.buscador li.sel, .buscador li:hover { background: var(--paper-2); }
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 60; }
.toast { background: var(--navy); color: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--sombra); max-width: 360px; }
.toast.error { background: var(--red); }

/* Acceso */
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .tarjeta { width: min(400px, 100%); padding: 28px; }
.login h1 { margin-bottom: 4px; }
.login form { display: grid; gap: 14px; margin-top: 18px; }
.aviso { padding: 10px 12px; border-radius: 8px; background: #f8efd9; border: 1px solid #e5d29d; font-size: 14px; }
.aviso.error { background: #f6e4df; border-color: #e1b9ae; }
.codigo { font: 500 15px var(--mono); background: var(--paper-2); padding: 8px 10px; border-radius: 6px; word-break: break-all; user-select: all; }

@media (max-width: 720px) {
  .cabecera { flex-wrap: wrap; height: auto; padding: 8px 12px; gap: 4px 8px; }
  .nav { order: 3; flex-basis: 100%; }
  .buscar-btn { margin-left: auto; }
  .usuario > button { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .compl .barra { width: 140px; }
  .marca small, .buscar-btn kbd { display: none; }
  main { padding: 16px 12px 80px; }
  h1 { font-size: 22px; }
}
@media print { .cabecera, .filtros, .barra-guardar { display: none; } }

/* ── Libros mensuales: grilla tipo Excel ── */
.libro-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 6px 0 14px; flex-wrap: wrap; }
.pestana-libro { padding: 8px 14px; text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; color: var(--steel); }
.pestana-libro:hover { color: var(--navy); }
.pestana-libro.activa { background: var(--blanco); border-color: var(--line); color: var(--navy); font-weight: 600; margin-bottom: -1px; }
.libro-resumen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.libro-resumen .metrica { padding: 8px 14px; min-width: 96px; text-align: left; }
.libro-resumen .metrica .n { font-size: 20px; }
button.filtro-estado { cursor: pointer; font: inherit; border-left-width: 4px; }
button.filtro-estado.activo { outline: 2px solid var(--navy); }
.rejilla-libro { max-height: calc(100vh - 330px); min-height: 220px; overflow: auto; border: 1px solid var(--line); background: var(--blanco); border-radius: 8px; outline: none; }
.rejilla-libro:focus-visible { box-shadow: 0 0 0 2px #c9d3e6; }
table.libro { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table.libro th { position: sticky; top: 0; z-index: 2; background: var(--paper-2); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); font-weight: 600; white-space: nowrap; }
table.libro th.num, table.libro td.num { text-align: right; }
table.libro td { padding: 4px 10px; border-bottom: 1px solid #ece7d7; border-right: 1px solid #f3efe1; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; height: 31px; }
table.libro tbody tr:hover td { background: #faf7ee; }
table.libro td.ed { cursor: cell; }
table.libro td.sel { outline: 2px solid var(--navy); outline-offset: -2px; background: #fff !important; }
table.libro td .editor { width: 100%; min-width: 90px; border: 0; background: #fff; padding: 2px 4px; outline: 2px solid var(--navy); outline-offset: 1px; }
.sug { color: var(--steel); font-style: italic; opacity: .75; }
.alerta { color: var(--warn); font-size: 13px; }
td.cel-alerta { max-width: 360px; }
.e { display: inline-block; padding: 0 9px; border-radius: 10px; font-size: 12.5px; border: 1px solid var(--line); line-height: 20px; }
.e-pendiente { color: var(--steel); border-style: dashed; background: transparent; }
.e-presentada, .e-presentada_cliente, .e-declarado_pagado { background: #e4f0e9; border-color: #b9d6c6; color: var(--ok); }
.e-sin_movimiento, .e-sin_trabajadores, .e-no_se_hace { background: #e8ecf1; border-color: #c7d0dc; color: var(--steel); }
.e-a_pagar, .e-declarado_no_pagado { background: #f8efd9; border-color: #e5d29d; color: var(--warn); }
.e-problemas { background: #f6e4df; border-color: #e1b9ae; color: var(--red); }
.e-borde-presentada, .e-borde-presentada_cliente, .e-borde-declarado_pagado { border-left-color: var(--ok); }
.e-borde-a_pagar, .e-borde-declarado_no_pagado { border-left-color: var(--warn); }
.e-borde-problemas { border-left-color: var(--red); }
/* resumen anual */
table.anual td.cliente { position: sticky; left: 0; background: var(--blanco); z-index: 1; min-width: 190px; max-width: 230px; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
table.anual th:first-child { left: 0; z-index: 3; }
table.anual td.mes { text-align: center; font-size: 12px; cursor: pointer; padding: 3px 4px; min-width: 62px; font-family: var(--mono); border: 1px solid #fff; border-radius: 0; }
table.anual td.mes.vacio { background: #faf8f1; }
table.anual td.mes:hover { outline: 2px solid var(--navy); outline-offset: -2px; }
table.anual th.mes-cab { text-align: center; }
table.anual td.num.rojo { color: var(--red); font-weight: 600; }
table.anual tfoot td { position: sticky; bottom: 0; background: var(--paper-2); font-weight: 600; border-top: 1px solid var(--line); }

/* Con siete opciones el menú no cabe en una sola fila en ventanas medianas: pasa a su propia fila. */
@media (max-width: 1100px) {
  .cabecera { flex-wrap: wrap; height: auto; padding: 8px 16px; gap: 4px 12px; }
  .nav { order: 3; flex-basis: 100%; }
}

/* ── Ordenar y filtrar por columna (como el autofiltro de Excel) ── */
th.th-orden { cursor: pointer; user-select: none; }
th.th-orden:hover { background: #e9e3d2; }
th.th-orden:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
th.con-filtro { background: #e4eaf4; }
.th-flex { display: inline-flex; align-items: center; gap: 4px; }
th.num .th-flex { flex-direction: row-reverse; }
.ind-orden { font-size: 10px; color: var(--navy); min-width: 8px; }
.filtro-btn { border: 1px solid transparent; background: transparent; border-radius: 4px; cursor: pointer; padding: 0 5px; line-height: 18px; font-size: 12px; color: var(--steel); }
.filtro-btn:hover { background: #fff; border-color: var(--line); color: var(--navy); }
.filtro-btn.activo { background: var(--navy); color: #fff; }
th.mes-cab .th-flex { justify-content: center; }
.filtros-activos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.chip-filtro { display: inline-flex; align-items: center; gap: 4px; background: #e4eaf4; border: 1px solid #c4d0e6; border-radius: 12px; padding: 2px 4px 2px 10px; font-size: 13px; }
.chip-filtro button { border: 0; background: transparent; cursor: pointer; border-radius: 50%; width: 20px; height: 20px; line-height: 18px; color: var(--steel); }
.chip-filtro button:hover { background: #fff; color: var(--red); }
.popover-filtro { position: fixed; z-index: 70; width: 270px; background: var(--blanco); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(24, 38, 66, .22); padding: 8px; font-size: 14px; font-weight: 400; text-align: left; }
.popover-filtro hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.popover-filtro input[type=search] { width: 100%; margin: 4px 0 6px; }
.fil-orden { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.fil-orden:hover { background: var(--paper-2); }
.fil-orden.activo { font-weight: 600; background: #e4eaf4; }
.filtro-lista { max-height: 240px; overflow: auto; border: 1px solid #ece7d7; border-radius: 6px; padding: 2px; }
.filtro-op { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.filtro-op:hover { background: var(--paper-2); }
.filtro-op input { width: auto; margin: 0; }
.filtro-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtro-n { color: var(--steel); font-size: 12px; }
.filtro-todos { border-bottom: 1px solid #ece7d7; border-radius: 0; margin-bottom: 2px; }
.filtro-pie { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }

/* Avisos del sistema bajo la cabecera */
.avisos-sistema { background: #fbf3dc; border-bottom: 1px solid #e5d29d; }
.aviso-linea { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 24px; font-size: 14px; }
.aviso-linea.nivel-alta { background: #f6e4df; color: #7a2f20; }
.aviso-linea.nivel-info { background: #e4f0e9; color: var(--ok); }
.aviso-linea + .aviso-linea { border-top: 1px solid rgba(0, 0, 0, .06); }

/* ── Ayuda: botón flotante y panel ── */
.ayuda-boton { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--navy); color: #fff; font: 600 22px var(--serif); cursor: pointer; box-shadow: 0 4px 16px rgba(24, 38, 66, .35); }
.ayuda-boton:hover { background: var(--navy-2); }
.ayuda-panel { position: fixed; right: 18px; bottom: 76px; z-index: 45; width: min(420px, calc(100vw - 24px)); height: min(640px, calc(100vh - 110px)); display: flex; flex-direction: column; background: var(--blanco); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 36px rgba(24, 38, 66, .3); overflow: hidden; }
.ayuda-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--navy); color: #fff; }
.ayuda-cerrar { border: 0; background: transparent; color: #fff; font-size: 16px; cursor: pointer; border-radius: 4px; width: 28px; height: 28px; }
.ayuda-cerrar:hover { background: rgba(255, 255, 255, .15); }
.ayuda-pestanas { display: flex; border-bottom: 1px solid var(--line); }
.pestana-ayuda { flex: 1; padding: 9px; border: 0; background: transparent; cursor: pointer; color: var(--steel); border-bottom: 2px solid transparent; }
.pestana-ayuda.activo { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }
.ayuda-vista { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 10px 12px 12px; }
.ayuda-chat { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px 0; }
.ayuda-burbuja { max-width: 92%; padding: 8px 11px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.ayuda-burbuja.usuario { align-self: flex-end; background: #e4eaf4; }
.ayuda-burbuja.asistente { align-self: flex-start; background: var(--paper); border: 1px solid #ece7d7; }
.ayuda-burbuja.error { background: #f6e4df; color: #7a2f20; border-color: #e1b9ae; }
.ayuda-sugerencias { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.chip-sug { text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 13.5px; }
.chip-sug:hover { background: var(--paper-2); }
.ayuda-estado { font-size: 12.5px; min-height: 16px; margin: 4px 0; }
.ayuda-entrada { display: flex; gap: 8px; align-items: flex-end; }
.ayuda-entrada textarea { flex: 1; resize: none; }
.ayuda-manual { flex: 1; overflow: auto; padding: 10px 12px; }
.ayuda-manual details { border-bottom: 1px solid #ece7d7; padding: 6px 0; }
.ayuda-manual summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.ayuda-manual input[type=search] { width: 100%; margin-bottom: 8px; }
.md p { margin: 0 0 6px; } .md ul, .md ol { margin: 4px 0 8px; padding-left: 20px; } .md li { margin: 2px 0; }
.md h4, .md h5 { margin: 10px 0 4px; font-size: 14px; font-family: var(--sans); }
.md code { background: #efeadd; padding: 0 4px; border-radius: 3px; font-family: var(--mono); font-size: 12.5px; }
@media print { .ayuda-boton, .ayuda-panel { display: none; } }

/* Entorno de pruebas: cartel bien visible para no confundirlo con el real */
.cartel-entorno { background: repeating-linear-gradient(45deg, #f2c94c, #f2c94c 14px, #e9bb35 14px, #e9bb35 28px); color: #3d2f00; font-weight: 700; letter-spacing: .06em; text-align: center; padding: 5px 12px; font-size: 13px; }
.cartel-entorno span { font-weight: 500; letter-spacing: 0; }

/* ── Áreas: Contabilidad, RRHH y General ── */
.zona-fija { position: sticky; top: 0; z-index: 20; }
.zona-fija .cabecera { position: static; }
.subnav { display: flex; gap: 2px; padding: 0 20px; background: var(--navy-2); overflow-x: auto; scrollbar-width: none; border-bottom: 3px solid #5d7ab3; }
.subnav::-webkit-scrollbar { display: none; }
.subnav[data-area='rrhh'] { border-bottom-color: #4aa593; }
.subnav[data-area='general'] { border-bottom-color: #8a8f99; }
.subnav a { color: #cfd8ea; text-decoration: none; padding: 8px 14px; font-size: 14px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.subnav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.subnav a.activo { color: #fff; font-weight: 600; border-bottom-color: #fff; }
.nav a[data-area='rrhh'].activo { background: #2f7f70; }
@media print { .zona-fija { display: none; } }

/* ── Operación Renta ── */
.e-realizada, .e-subida, .e-devolucion, .e-enviada_oficina, .e-enviada_socio { background: #e4f0e9; border-color: #b9d6c6; color: var(--ok); }
.e-postergada, .e-en_espera, .e-diferido, .e-a_pagar { background: #f8efd9; border-color: #e5d29d; color: var(--warn); }
.e-no_realizar, .e-no_corresponde, .e-sin_pago, .e-no_aplica { background: #e8ecf1; border-color: #c7d0dc; color: var(--steel); }
.e-con_problemas, .e-sin_clave, .e-falta_informacion, .e-no_enviada { background: #f6e4df; border-color: #e1b9ae; color: var(--red); }
.e-borde-realizada, .e-borde-enviada_oficina, .e-borde-enviada_socio { border-left-color: var(--ok); }
.e-borde-postergada { border-left-color: var(--warn); }
.e-borde-con_problemas, .e-borde-sin_clave, .e-borde-no_enviada { border-left-color: var(--red); }
select.celda-ctl { font: inherit; font-size: 13px; border-radius: 10px; border: 1px solid var(--line); padding: 1px 4px; line-height: 20px; max-width: 150px; cursor: pointer; }
select.celda-ctl.txt, input.celda-ctl.txt { background: #fff; color: inherit; border-color: #ddd6c3; border-radius: 4px; padding: 2px 5px; }
input.celda-ctl { font: inherit; font-size: 13px; border: 1px solid #ddd6c3; border-radius: 4px; }
input.celda-ctl[disabled], select.celda-ctl[disabled] { opacity: 1; cursor: default; }
.dj-celda { white-space: nowrap; }
.dj-nota { margin-left: 3px; border: 1px dashed var(--line); background: transparent; border-radius: 50%; width: 20px; height: 20px; line-height: 16px; padding: 0; font-size: 12px; color: var(--steel); cursor: pointer; }
.dj-nota.con { border-style: solid; color: var(--navy); background: #eef1f7; }
.cuadricula-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.panel { padding: 14px 16px; }
.panel h3 { margin: 0 0 10px; font-size: 15px; }
.fila-resumen { display: grid; grid-template-columns: 150px 1fr 40px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13px; }
.fila-resumen .cnt { text-align: right; font-variant-numeric: tabular-nums; }
.barra-res { background: #eee9d9; border-radius: 4px; height: 8px; overflow: hidden; }
.barra-res i { display: block; height: 100%; background: var(--navy); }
.form-dj { display: inline-block; margin: 2px 4px 2px 0; padding: 0 7px; border: 1px solid var(--line); border-radius: 6px; font: 12px var(--mono); }
.form-dj.ctl { background: #eef1f7; border-color: var(--navy); color: var(--navy); font-weight: 600; }
tr.cerca td { background: #fbf3dc; }

/* ── Liquidaciones pegadas ── */
textarea.pegado { width: 100%; font: 12px var(--mono); margin: 8px 0; box-sizing: border-box; }
details.liq-trab { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; padding: 6px 10px; background: var(--blanco); }
details.liq-trab summary { cursor: pointer; padding: 4px 0; }
table.liq { width: 100%; margin-top: 6px; }
table.liq td { height: auto; }

/* Liquidación como documento */
.liq-doc { font-size: 13px; color: #111; }
.liq-titulo { text-align: center; margin: 0; font-size: 17px; }
.liq-sub { text-align: center; margin: 2px 0 10px; }
.liq-caja { border: 1px solid #333; padding: 6px 10px; margin-bottom: 8px; }
.liq-cab { display: grid; grid-template-columns: 1.3fr 1.3fr 1.2fr; gap: 10px; }
.liq-dato { margin: 1px 0; }
.liq-afp-tit { font-size: 10px; border-bottom: 1px solid #999; margin-bottom: 4px; }
.liq-afp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.liq-afp span { display: block; font-size: 11px; }
.liq-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.liq-caja h3 { margin: 0 0 6px; text-align: center; font-size: 13px; }
.liq-fila { display: flex; justify-content: space-between; margin: 1px 0; }
.liq-fila.tot { font-weight: 600; margin-top: 6px; }
.liq-fila.sub { padding-left: 14px; }
.liq-fila.total { border-top: 1px solid #333; margin-top: 8px; padding-top: 4px; font-weight: 700; }
.liq-pagar { display: flex; justify-content: space-between; font-size: 15px; }
.liq-meta { font-size: 12px; margin: 6px 0; }
.liq-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px; text-align: center; }
.liq-firmas div { border-top: 1px solid #333; padding-top: 4px; }
@media print {
  body > *:not(.velo) { display: none !important; }
  .velo { position: static !important; background: none !important; display: block !important; padding: 0 !important; }
  .velo .modal { box-shadow: none !important; border: 0 !important; width: auto !important; max-width: none !important; padding: 0 !important; }
  .no-print { display: none !important; }
}

/* Ficha del trabajador */
.ficha-sec { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 14px; padding: 8px 14px 12px; background: var(--blanco); }
.ficha-sec legend { padding: 0 6px; font-weight: 600; color: var(--navy); }
.ficha-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.ficha-rejilla label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.ficha-rejilla label.ficha-chk { flex-direction: row; align-items: center; gap: 8px; }
.ficha-rejilla input[type=text], .ficha-rejilla input[type=date], .ficha-rejilla select { font: inherit; padding: 4px 6px; border: 1px solid #ddd6c3; border-radius: 4px; background: #fff; }
.ficha-grupo { margin: 16px 0 6px; font-size: 14px; color: var(--navy); }
table.composicion tr.pred td { color: var(--steel); }
table.composicion tr.asig td { font-weight: 600; }
table.composicion select, table.composicion input { font: inherit; font-size: 13px; padding: 2px 4px; border: 1px solid #ddd6c3; border-radius: 4px; background: #fff; }