/* Mach Auto: sobrio y claro, con el azul del logo como unico color de marca. */
:root {
  color-scheme: light;
  --marca: #14127c;
  --marca-oscura: #010066;
  --marca-suave: #eceefb;
  --fondo: #f3f4f8;
  --superficie: #ffffff;
  --superficie-2: #f7f8fb;
  --borde: #e3e6ef;
  --borde-fuerte: #cdd2e0;
  --tinta: #13142b;
  --tinta-2: #4b5068;
  --tinta-3: #6f748c;
  --abono: #0b6b3a;
  --favor: #2346b8;
  --peligro: #b42318;
  --ok-fondo: #e7f5eb;   --ok-texto: #0b6b2e;
  --aviso-fondo: #fff3d6; --aviso-texto: #7a4a00;
  --grave-fondo: #fdecec; --grave-texto: #a12622;
  --info-fondo: #e9eefc;  --info-texto: #2346b8;
  --neutro-fondo: #eceef3; --neutro-texto: #4f546a;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 20, 45, .05), 0 1px 3px rgba(16, 20, 45, .04);
  --sombra-alta: 0 16px 40px rgba(16, 20, 45, .18);
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 15px/1.45 var(--letra); -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }
a { color: var(--marca); }
img { max-width: 100%; height: auto; }
h1, h2 { color: var(--tinta); }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }
.icono { flex: none; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.der { text-align: right; }
.fuerte { font-weight: 650; }
.tenue { color: var(--tinta-3); }
.abono { color: var(--abono); }
.favor { color: var(--favor); }
.cargo { color: var(--tinta); }

/* ------------------------------------------------------------------ armazon */
.marco { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: 22px 16px 16px; background: var(--superficie); border-right: 1px solid var(--borde);
}
.lateral-logo { display: block; padding: 0 6px; }
.lateral-logo img { width: 196px; }
.lateral-nav { display: flex; flex-direction: column; gap: 2px; }
.lateral-nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--tinta-2); font-weight: 550; text-decoration: none;
}
.lateral-nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.lateral-nav a.activo { background: var(--marca-suave); color: var(--marca); }
.lateral-usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 4px 0; border-top: 1px solid var(--borde); }
.lateral-usuario-nombre { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }
.lateral-usuario-nombre strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral-usuario-nombre small { color: var(--tinta-3); font-size: 12px; }
.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca); font-weight: 700;
}
.contenido { width: 100%; max-width: 1360px; margin: 0 auto; padding: 30px 40px 64px; }
.barra-movil, .barra-abajo { display: none; }

/* ------------------------------------------------------------------ titulos */
.titulo-pantalla { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.titulo-pantalla h1 { font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin: 2px 0 0; }
.sobretitulo { margin: 0; color: var(--tinta-3); font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.acciones-titulo { display: flex; gap: 8px; flex-wrap: wrap; }
.volver { display: inline-flex; align-items: center; gap: 2px; margin: 0 0 10px -4px; color: var(--tinta-2); font-size: 14px; font-weight: 550; text-decoration: none; }
.volver:hover { color: var(--tinta); }
.fila-chips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }

/* ------------------------------------------------------------------ indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); color: inherit; text-decoration: none;
}
a.kpi:hover { border-color: var(--borde-fuerte); }
.kpi-etiqueta { font-size: 13px; font-weight: 550; color: var(--tinta-2); }
.kpi-valor { font-size: 26px; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi-pie { font-size: 12.5px; color: var(--tinta-3); }
.kpi-principal { background: linear-gradient(140deg, #1b188c 0%, var(--marca-oscura) 100%); border-color: transparent; color: #fff; }
.kpi-principal .kpi-etiqueta, .kpi-principal .kpi-pie { color: rgba(255, 255, 255, .78); }
a.kpi-principal:hover { border-color: transparent; filter: brightness(1.08); }
.kpi-principal.kpi-favor { background: var(--info-fondo); color: var(--info-texto); }
.kpi-principal.kpi-favor .kpi-etiqueta { color: var(--info-texto); }

/* ------------------------------------------------------------------ tarjetas */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px; margin-bottom: 16px; min-width: 0;
}
.rejilla-2 .tarjeta { margin-bottom: 0; }
.tarjeta-tabla { padding: 0; overflow: hidden; }
.tarjeta-tabla > .tarjeta-cabecera { padding: 18px 20px 0; }
.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tarjeta-cabecera h2 { margin: 0; font-size: 16px; font-weight: 680; }
.tarjeta-cabecera.con-filtros { align-items: flex-end; }
.tarjeta-nota { font-size: 12.5px; color: var(--tinta-3); }
.nota-tarjeta { margin: -4px 20px 14px; color: var(--tinta-3); font-size: 13px; }
.nota-pie, .sumas { font-size: 13.5px; color: var(--tinta-2); margin: 0 0 14px; }
.tarjeta-formulario { max-width: 780px; }

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--borde); color: inherit; text-decoration: none;
}
.lista-simple li:last-child a, .lista-simple > a:last-child { border-bottom: 0; }
.lista-simple a:hover strong { color: var(--marca); }
.lista-principal { display: flex; flex-direction: column; min-width: 0; }
.lista-principal strong { font-weight: 600; }
.lista-principal small { color: var(--tinta-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lista-menu { padding: 4px 20px; }
.lista-menu a { padding: 16px 0; }

/* ------------------------------------------------------------------ chips de estado */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--neutro-fondo); color: var(--neutro-texto);
}
.chip-aldia, .chip-pagado { background: var(--ok-fondo); color: var(--ok-texto); }
.chip-60a90 { background: var(--aviso-fondo); color: var(--aviso-texto); }
.chip-mas90 { background: var(--grave-fondo); color: var(--grave-texto); }
.chip-favor { background: var(--info-fondo); color: var(--info-texto); }
.chip-revisar { background: var(--aviso-fondo); color: var(--aviso-texto); }
.kpi-alerta { display: flex; align-items: center; gap: 5px; color: var(--aviso-texto); font-weight: 600; }
.kpi-principal.kpi-revisar { background: var(--aviso-fondo); color: var(--aviso-texto); }
.kpi-principal.kpi-revisar .kpi-etiqueta { color: var(--aviso-texto); }
.marca-revisar {
  margin-left: 8px; padding: 2px 6px; border-radius: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--aviso-texto); background: var(--aviso-fondo);
}

/* ------------------------------------------------------------------ graficos */
.antiguedad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.antiguedad-fila { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 14px; flex-wrap: wrap; }
.pista { height: 8px; border-radius: 4px; background: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde); }
.barra { display: block; height: 100%; min-width: 3px; border-radius: 4px; }
.barra-aldia { background: #0ca30c; }
.barra-60a90 { background: #fab219; }
.barra-mas90 { background: #d03b3b; }
.barra-sinfecha { background: #9aa0b4; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico-lectura { display: flex; gap: 10px; align-items: baseline; margin: 0 0 6px; color: var(--tinta-2); font-size: 13px; }
.grafico-lectura strong { color: var(--tinta); font-size: 20px; }
.grafico-guia { stroke: var(--borde); stroke-dasharray: 2 4; }
.grafico-base { stroke: var(--borde-fuerte); }
.grafico-barra { cursor: pointer; }
.grafico-barra path { fill: var(--marca); opacity: .5; transition: opacity .15s; }
.grafico-barra.marcada path, .grafico-barra:hover path { opacity: 1; }
.grafico-etiqueta { fill: var(--tinta-3); font-size: 13px; }

/* ------------------------------------------------------------------ tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  padding: 11px 16px; text-align: left; white-space: nowrap; background: var(--superficie-2);
  border-bottom: 1px solid var(--borde); color: var(--tinta-3); font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .04em;
}
.tabla th.der { text-align: right; }
.tabla td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tfoot td { background: var(--superficie-2); border-top: 1px solid var(--borde-fuerte); border-bottom: 0; font-weight: 650; }
.tabla-clic tbody tr { cursor: pointer; }
.tabla-clic tbody tr:hover td { background: var(--superficie-2); }
.tabla tr.anulado td { color: var(--tinta-3); }
.tabla tr.anulado td.num { text-decoration: line-through; }
.tabla td.vacio { text-align: center; color: var(--tinta-3); padding: 32px; }
.fila-anterior td { background: var(--superficie-2); }
.celda-titulo { color: var(--tinta); font-weight: 600; text-decoration: none; }
.celda-titulo:hover { color: var(--marca); }
.detalle-mov { display: block; margin-top: 2px; color: var(--tinta-3); font-size: 12px; }
.anulado-motivo { color: var(--grave-texto); }
.sin-fecha { padding: 2px 7px; border-radius: 6px; background: var(--neutro-fondo); color: var(--neutro-texto); font-size: 12px; }
.acciones-fila { white-space: nowrap; text-align: right; width: 1%; padding-top: 7px !important; padding-bottom: 7px !important; }
.ordenar { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }

/* ------------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 650; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s;
}
.boton-principal { background: var(--marca); color: #fff; }
.boton-principal:hover { background: var(--marca-oscura); }
.boton-sobrio { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton-sobrio:hover { background: var(--superficie-2); }
.boton-peligro { background: var(--peligro); color: #fff; }
.boton-peligro:hover { background: #8f1c13; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton-ancho { width: 100%; }
.boton-icono {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px;
  background: transparent; color: var(--tinta-2); cursor: pointer;
}
.boton-icono:hover { background: var(--superficie-2); color: var(--tinta); }
.enlace { padding: 0; border: 0; background: none; color: var(--marca); font-size: 14px; font-weight: 650; text-decoration: none; cursor: pointer; }
.enlace:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ formularios */
.formulario { display: flex; flex-direction: column; gap: 16px; }
.formulario p { margin: 0; }
.rejilla-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.campo { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-doble { grid-column: 1 / -1; }
.campo-etiqueta { font-size: 13px; font-weight: 650; color: var(--tinta-2); }
.campo-ayuda { font-size: 12.5px; color: var(--tinta-3); }
.campo-error { font-size: 12.5px; font-weight: 600; color: var(--peligro); }
.con-error .entrada { border-color: var(--peligro); }
.entrada {
  width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px;
  background: #fff; color: var(--tinta); font-size: 16px;
}
textarea.entrada { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.4; }
select.entrada { padding-right: 8px; }
.entrada:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(20, 18, 124, .14); }
.entrada:disabled { background: var(--superficie-2); color: var(--tinta-3); }
.entrada-monto { font-size: 19px; font-weight: 650; font-variant-numeric: tabular-nums; }
.enlace-campo { position: absolute; top: 0; right: 0; font-size: 12.5px; }
.fila-campo { display: flex; gap: 8px; align-items: center; }
.fila-campo .boton { height: 42px; flex: none; }
.casilla { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--marca); }
.acciones-formulario { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.vista-previa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px;
  border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); font-size: 14px; color: var(--tinta-2);
}
.vista-previa strong { font-size: 15px; color: var(--tinta); }
.vista-previa strong.favor { color: var(--favor); }
.vista-previa strong.abono { color: var(--abono); }

.selector { position: relative; }
.selector-lista {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 310px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--borde-fuerte);
  border-radius: 10px; box-shadow: var(--sombra-alta);
}
.selector-lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n s" "d s";
  column-gap: 12px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.selector-lista li.marcado { background: var(--marca-suave); }
.selector-nombre { grid-area: n; font-weight: 600; }
.selector-detalle { grid-area: d; font-size: 12.5px; color: var(--tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-saldo { grid-area: s; align-self: center; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.selector-saldo.favor { color: var(--favor); }
.selector-vacio { display: block !important; color: var(--tinta-3); cursor: default !important; }

/* ------------------------------------------------------------------ filtros */
.filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtros-rejilla { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1.4fr) minmax(130px, 1fr) 150px 150px auto auto; align-items: end; }
.buscador {
  display: flex; align-items: center; gap: 8px; flex: 1 1 280px; height: 42px; padding: 0 12px;
  background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 10px; color: var(--tinta-3);
}
.buscador:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(20, 18, 124, .14); }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tinta); font-size: 16px; }
.segmento { display: inline-flex; gap: 2px; padding: 3px; max-width: 100%; overflow-x: auto; background: #e8eaf1; border-radius: 10px; }
.segmento button {
  flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
  color: var(--tinta-2); font-size: 13.5px; font-weight: 650; cursor: pointer;
}
.segmento button.activo { background: #fff; color: var(--tinta); box-shadow: 0 1px 2px rgba(16, 20, 45, .1); }
.periodo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.periodo .campo { width: 160px; }
.periodo .campo .entrada { height: 38px; font-size: 14px; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; color: var(--tinta-2); font-size: 14px; }

/* ------------------------------------------------------------------ ficha del cliente */
.datos-cliente { display: flex; flex-direction: column; gap: 10px; }
.datos-cliente p { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; }
.datos-cliente .icono { margin-top: 2px; color: var(--tinta-3); }
.notas { display: flex; flex-direction: column; gap: 6px; }
.nota-revisar { padding: 8px 10px; border-radius: 8px; background: var(--aviso-fondo); color: var(--aviso-texto); }
.nota-revisar .icono { color: var(--aviso-texto) !important; }

/* ------------------------------------------------------------------ avisos, ventanas */
.aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.aviso .icono { margin-top: 1px; }
.aviso-error { background: var(--grave-fondo); color: var(--grave-texto); }
.aviso-atencion { background: var(--aviso-fondo); color: var(--aviso-texto); }
.aviso-ok { background: var(--ok-fondo); color: var(--ok-texto); }
.acciones-aviso { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vacio { padding: 40px 20px; text-align: center; color: var(--tinta-3); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); }
.cargando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px; color: var(--tinta-3); }
.girando { width: 18px; height: 18px; border: 2px solid var(--borde-fuerte); border-top-color: var(--marca); border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.modal-fondo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(13, 14, 40, .45); animation: aparecer .15s ease-out; }
.modal {
  display: flex; flex-direction: column; width: 100%; max-width: 540px; max-height: calc(100vh - 32px);
  background: #fff; border-radius: 16px; box-shadow: var(--sombra-alta);
}
.modal-ancho { max-width: 780px; }
.modal-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 6px; }
.modal-cabecera h2 { margin: 0; font-size: 18px; }
.modal-cuerpo { padding: 8px 20px 20px; overflow: auto; }
.modal-cuerpo > p { margin: 0 0 10px; }
.modal-pie { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 4px 20px 20px; }

.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 12px 16px;
  border-radius: 12px; background: var(--tinta); color: #fff; font-size: 14px; font-weight: 550; box-shadow: var(--sombra-alta);
  animation: subir .2s ease-out;
}
.toast .icono { color: #6ee7a0; }
.toast-error { background: #8f1c13; }
.toast-error .icono { color: #ffd2cc; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------------ entrada */
.entrada-pagina {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #e4e6f8 0%, var(--fondo) 60%);
}
.entrada-caja {
  display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 400px; padding: 32px 28px;
  background: #fff; border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-alta);
}
.entrada-logo { width: 250px; margin: 0 auto 6px; }
.entrada-caja h1 { margin: 0; font-size: 21px; text-align: center; }
.entrada-caja > p { margin: -6px 0 4px; text-align: center; font-size: 14px; }

/* ------------------------------------------------------------------ pantallas medianas */
@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filtros-rejilla .buscador { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .rejilla-2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ telefono */
@media (max-width: 900px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral, .solo-escritorio { display: none; }
  .barra-movil {
    position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px; background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--borde); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .barra-movil img { width: 132px; display: block; }
  .contenido { padding: 18px 16px calc(100px + env(safe-area-inset-bottom)); }
  .barra-abajo {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--borde); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .barra-abajo a {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0;
    color: var(--tinta-3); font-size: 11px; font-weight: 600; text-decoration: none;
  }
  .barra-abajo a.activo { color: var(--marca); }
  .barra-abajo .boton-central .icono {
    width: 46px; height: 46px; margin-top: -20px; padding: 11px; border-radius: 15px;
    background: var(--marca); color: #fff; box-shadow: 0 6px 16px rgba(20, 18, 124, .35);
  }
  .barra-abajo .boton-central { color: var(--tinta-2); }
  .titulo-pantalla { margin-bottom: 16px; }
  .titulo-pantalla h1 { font-size: 24px; }
  .acciones-titulo { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .acciones-titulo .boton-principal { grid-column: 1 / -1; }
  .kpis { gap: 10px; margin-bottom: 14px; }
  .kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis-3 .kpi-principal, .kpis .kpi-principal { grid-column: 1 / -1; }
  .kpis > .kpi:nth-child(4):last-child { grid-column: 1 / -1; }
  .kpi { padding: 14px 16px; }
  .kpi-valor { font-size: 20px; }
  .kpi-principal .kpi-valor { font-size: 28px; }
  .tarjeta { padding: 16px; }
  .tarjeta-tabla { padding: 0; }
  .tarjeta-tabla > .tarjeta-cabecera { padding: 16px 16px 0; }
  .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .periodo { width: 100%; }
  .periodo .campo { width: auto; flex: 1 1 130px; }
}

@media (max-width: 720px) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tfoot, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 12px 16px; border-bottom: 1px solid var(--borde); }
  .tabla tbody tr:last-child { border-bottom: 0; }
  .tabla td { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border: 0; text-align: right; }
  .tabla td::before { content: attr(data-etiqueta); flex: none; color: var(--tinta-3); font-size: 12.5px; font-weight: 500; text-align: left; }
  .tabla td:not([data-etiqueta])::before { content: none; }
  .tabla td:empty { display: none; }
  .tabla td.der { text-align: right; }
  .tabla-clic td:first-child { justify-content: flex-start; padding-bottom: 6px; font-size: 15.5px; text-align: left; }
  .tabla-clic td:first-child::before { content: none; }
  .tabla tfoot tr { background: var(--superficie-2); border-top: 1px solid var(--borde-fuerte); }
  .tabla tfoot td { background: none; border: 0; }
  .tabla td.acciones-fila { justify-content: flex-end; width: 100%; padding-top: 4px !important; }
  .tabla td.vacio { justify-content: center; }
  .filtros-rejilla { grid-template-columns: 1fr 1fr; }
  .rejilla-campos { grid-template-columns: 1fr; }
  .acciones-formulario { flex-direction: column-reverse; }
  .acciones-formulario .boton { width: 100%; height: 46px; }
  .modal-fondo { place-items: end stretch; padding: 0; }
  .modal { max-width: none; max-height: 94vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .lista-lado .chip { display: none; }
}