/* Ajustes propios del portal sobre style.css (copiado de Cannae Gestión). */
.ambiente { background: var(--warn-bg); color: var(--warn); text-align: center; font-size: 12px; padding: 4px 16px; }
.nav-portal { display: flex; gap: 16px; flex-wrap: wrap; }
.nav-portal a { font-size: 14px; }
header.top .marca, .nav-portal a, header.top .yo a, header.top .salir button { display: inline-flex; align-items: center; min-height: 28px; } /* WCAG 2.5.8 */
main { padding: 16px; max-width: 1100px; margin: 0 auto; }
.secreto { font: 15px ui-monospace, monospace; letter-spacing: 1px; word-break: break-all; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.enlace-nuevo { word-break: break-all; }
.terminos { max-width: 760px; }
.check { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; }
.check input { width: auto; margin-top: 3px; }
/* Navegación del cliente: cinco secciones (pestañas) y, debajo, las páginas de la sección activa. */
.nav-secciones { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin: 6px 0 8px; }
.nav-secciones a { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none;
  color: var(--text); border-bottom: 3px solid transparent; margin-bottom: -2px; font-weight: 500; }
.nav-secciones a.activo { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }
/* Inicio: tarjetas de resumen y accesos por tarea. */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.tarjeta { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.tarjeta.alerta { border-color: var(--err); box-shadow: inset 4px 0 0 var(--err); }
.tarjeta h2 { font-size: 15px; margin: 0 0 8px; color: var(--muted); font-weight: 600; }
.tarjeta .cifra { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.tarjeta .cifra span { font-size: 14px; font-weight: 400; color: var(--muted); }
.acciones-tarjeta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.acciones-tarjeta a:not(.boton) { display: inline-flex; align-items: center; min-height: 32px; } /* WCAG 2.5.8: ≥ 24 px */
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.ok-txt { color: var(--ok); }
.titulo-tareas { font-size: 17px; margin: 18px 0 8px; }
.tareas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.tarea, .tarea-boton { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; min-height: 96px; width: 100%;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none;
  text-align: left; font: inherit; cursor: pointer; }
form.tarea { padding: 0; border: 0; background: none; min-height: 0; }
.tarea:hover, .tarea-boton:hover { border-color: var(--accent); }
.tarea b { font-size: 15px; } .tarea span, .tarea-boton span { color: var(--muted); font-size: 13px; }
.tarea-icono { font-size: 20px; color: var(--accent) !important; }
details summary { cursor: pointer; padding: 8px 0; min-height: 24px; }
.sub-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.sub-nav a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--panel); }
.sub-nav a.activo { background: var(--accent-bg); border-color: var(--accent); font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.kpis .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.kpis .kpi span { color: var(--muted); font-size: 12px; }
.kpis .kpi b { font-size: 20px; }
.kpis .kpi small { color: var(--muted); }
.kpis .kpi.alerta b { color: var(--err); }
td.num, th.num { text-align: right; white-space: nowrap; }
input.cant { width: 90px; text-align: right; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.filtros input[type=search] { min-width: 240px; flex: 1; }
.barra-fija { position: sticky; bottom: 0; background: var(--bg); padding: 10px 0; margin: 0; }
.estado { font-size: 12px; border-radius: 999px; padding: 2px 9px; background: var(--chip-bg); color: var(--chip); white-space: nowrap; }
.e-retenido, .e-rechazado, .e-anulado { background: var(--err-bg); color: var(--err); }
.e-cargado, .e-facturado { background: var(--ok-bg); color: var(--ok); }
.e-revision, .e-por_aprobar { background: var(--warn-bg); color: var(--warn); }
.chip.rojo { background: var(--err-bg); color: var(--err); } .chip.amarillo { background: var(--warn-bg); color: var(--warn); }
.chip.verde { background: var(--ok-bg); color: var(--ok); }
.err-txt { color: var(--err); }
button.secundario { background: var(--panel); color: var(--accent); border: 1px solid var(--accent); }
button.peligro { background: var(--err); }
.historial { padding-left: 18px; } .historial li { margin-bottom: 6px; }
.barras { display: flex; align-items: flex-end; gap: 6px; height: 190px; overflow-x: auto; padding-top: 4px; }
.barra-mes { flex: 1 0 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.barra-mes .b { width: 70%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 1px; }
.barra-mes .valor { font-size: 10px; color: var(--muted); white-space: nowrap; margin-bottom: 2px; }
.barra-mes .mes { font-size: 11px; color: var(--muted); margin-top: 4px; }
.qr img { background: #fff; padding: 6px; border-radius: 8px; display: block; max-width: 100%; height: auto; }
.codigos-respaldo { columns: 2; font-size: 17px; padding-left: 22px; }
.codigos-respaldo code { letter-spacing: 1px; }
a.boton { display: inline-block; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; text-decoration: none; }
@media print { header.top, .ambiente, button, a.boton { display: none; } }
.saltar { position: absolute; left: -9999px; top: 0; z-index: 50; background: var(--accent); color: #fff; padding: 8px 12px; }
.saltar:focus { left: 8px; top: 8px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; }
.paginacion { display: flex; gap: 16px; align-items: center; justify-content: center; margin: 12px 0; }
.paginacion a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.avisos { list-style: none; padding: 0; margin: 0; }
.avisos li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.avisos li.nuevo { font-weight: 600; }
.aging { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.aging div { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; }
.aging span { color: var(--muted); font-size: 12px; }
.aging b.con-deuda { color: var(--err); }
@media (max-width: 760px) {
  /* style.css (de Gestión) arma la cabecera del celular para su menú lateral (una fila, sin «Salir»). El portal no tiene
     menú lateral: la cabecera se reparte en filas (marca, menú, cuenta) y «Salir» queda visible. */
  header.top { flex-wrap: wrap; gap: 4px 14px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; }
  header.top .marca { flex: 1 0 100%; padding: 0; }
  header.top .nav-portal { flex: 1 0 100%; gap: 6px 16px; }
  header.top .yo { display: block; margin-left: 0; flex: 1 0 100%; font-size: 13px; }
  .sub-nav a { padding: 5px 10px; font-size: 13px; }
  /* Tablas con cantidad: cada fila es una tarjeta (nombre arriba; precio, disponibilidad y cantidad abajo). */
  .tabla-tarjetas thead, .tabla-tarjetas .t-oculta { display: none; }
  .tabla-tarjetas, .tabla-tarjetas tbody { display: block; }
  .tabla-tarjetas tr { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid var(--line); }
  .tabla-tarjetas td { display: block; border: 0; padding: 0; }
  .tabla-tarjetas td.t-nombre { grid-column: 1 / -1; }
  .tabla-tarjetas td.num { text-align: right; }
}