:root { --azul:#1f4e79; --azul-claro:#eef2f7; --borde:#d9dee5; --fondo:#f4f6f9; --verde:#1d6f42; --rojo:#b3261e; --gris:#6b7785; --texto:#222; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:14px/1.45 system-ui, "Segoe UI", Roboto, Arial, sans-serif; background:var(--fondo); color:var(--texto); }
a { color:var(--azul); }
.ico { width:1.1em; height:1.1em; vertical-align:-0.18em; flex-shrink:0; }

/* ---------- Menú ---------- */
.menu { background:var(--azul); display:flex; align-items:center; flex-wrap:wrap; padding:0 16px; position:sticky; top:0; z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,.15); }
.menu .marca { color:#fff; font-weight:700; text-decoration:none; padding:12px 18px 12px 0; display:flex; align-items:center; gap:8px; }
.menu-enlaces { display:flex; flex-wrap:wrap; gap:2px; }
.menu-enlaces a { color:#cfe0f1; text-decoration:none; padding:12px; display:flex; align-items:center; gap:6px; border-radius:6px 6px 0 0; }
.menu-enlaces a.activo, .menu-enlaces a:hover { color:#fff; background:rgba(255,255,255,.14); }
.menu-boton { display:none; margin-left:auto; background:transparent; border:0; color:#fff; font-size:22px; padding:6px 8px; cursor:pointer; }

/* ---------- Estructura ---------- */
main { max-width:1280px; margin:20px auto; padding:0 16px; }
h1 { font-size:20px; margin:0; }
h2 { font-size:16px; margin:0; }
.card { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:16px; margin-bottom:16px; }
.nota { color:#666; margin:10px 0 0; font-size:12px; }
.barra { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:24px 0 12px; }
.barra:first-child { margin-top:0; }
.barra h1, .barra h2 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.barra h1 .ico, .barra h2 .ico { color:var(--azul); }
.barra h1 { flex-wrap:nowrap; align-items:flex-start; }
.barra h1 .ico { margin-top:.2em; }
td a { display:inline-flex; align-items:center; gap:5px; }
.acciones { display:flex; flex-wrap:wrap; gap:6px; }
.aviso { font-weight:normal; color:var(--rojo); font-size:13px; display:inline-flex; align-items:center; gap:4px; }
.neg { color:var(--rojo); }
.nowrap { white-space:nowrap; }

/* ---------- Tablas ---------- */
.tabla { overflow-x:auto; border:1px solid var(--borde); border-radius:10px; background:#fff; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid var(--borde); padding:7px 9px; text-align:left; vertical-align:middle; }
th { background:var(--azul-claro); font-weight:600; white-space:nowrap; }
tbody tr:hover { background:#f8fafc; }
td.n, th.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
tfoot td { font-weight:700; background:#f8fafc; }
.enlaces-fila { display:inline-flex; gap:10px; white-space:nowrap; }
.enlaces-fila a { display:inline-flex; align-items:center; gap:4px; text-decoration:none; }
.enlaces-fila a.xls { color:var(--verde); }
.enlaces-fila a.pdf { color:var(--rojo); }

/* ---------- Formularios y botones ---------- */
.filtros { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
form.inline { display:inline; }
label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:#555; }
label.check { flex-direction:row; align-items:center; gap:6px; font-size:13px; }
input, select, button { font:inherit; padding:7px 9px; border:1px solid #b9c2cd; border-radius:6px; background:#fff; min-height:36px; }
input:focus, select:focus { outline:2px solid #9bbbe0; outline-offset:0; border-color:var(--azul); }
button, .btn { background:var(--azul); color:#fff; border:0; cursor:pointer; text-decoration:none; padding:8px 14px;
  border-radius:6px; display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1.2; min-height:36px; }
button:hover, .btn:hover { filter:brightness(1.1); }
button.sec, .btn.sec { background:var(--gris); }
button.peligro, .btn.peligro { background:var(--rojo); }
.btn.excel { background:var(--verde); }
.btn.pdf { background:var(--rojo); }
.btn.chico, button.chico { padding:5px 10px; font-size:12px; min-height:30px; }
.botones-fila { display:inline-flex; gap:6px; flex-wrap:nowrap; }

/* Filtros plegables: en escritorio siempre abiertos y sin encabezado */
details.plegable > summary { display:none; cursor:pointer; list-style:none; align-items:center; gap:8px; font-weight:600; color:var(--azul); }
details.plegable > summary::-webkit-details-marker { display:none; }
details.plegable > summary .contador { background:var(--azul); color:#fff; border-radius:10px; padding:0 8px; font-size:12px; }
details.plegable[open] > summary { margin-bottom:12px; }

/* ---------- Mensajes sin JavaScript ---------- */
.ok { background:#e6f4ea; border:1px solid #9ccfab; color:var(--verde); padding:10px 14px; border-radius:6px; margin-bottom:16px; }
.error { background:#fdecea; border:1px solid #f1aaa4; color:var(--rojo); padding:10px 14px; border-radius:6px; margin-bottom:16px; white-space:pre-line; }

/* ---------- Indicadores ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:16px; }
.kpis > div { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:12px 14px; display:flex; gap:12px; align-items:center; }
.kpis .kpi-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px;
  background:var(--azul-claro); color:var(--azul); flex-shrink:0; }
.kpis .kpi-ico.verde { background:#e6f4ea; color:var(--verde); }
.kpis .kpi-ico.rojo { background:#fdecea; color:var(--rojo); }
.kpis small { color:#666; display:block; }
.kpis strong { font-size:18px; font-variant-numeric:tabular-nums; word-break:break-all; }

/* ---------- Buscador ---------- */
.buscador-form { display:flex; flex-direction:column; gap:12px; }
.buscador { display:flex; align-items:center; gap:8px; border:1px solid #b9c2cd; border-radius:8px; background:#fff; padding:0 6px 0 12px; }
.buscador:focus-within { outline:2px solid #9bbbe0; border-color:var(--azul); }
.buscador > .ico { color:#888; }
.buscador input { border:0; outline:0 !important; flex:1; min-width:0; padding:9px 4px; background:transparent; }
.buscador button { margin:4px 0; }
.buscador.crece { flex:1 1 260px; min-height:38px; align-self:flex-end; }
.sin-datos { text-align:center !important; color:#777; padding:28px 10px !important; }

/* Encabezados ordenables */
th a.ordenar { color:inherit; text-decoration:none; display:inline-flex; gap:2px; }
th a.ordenar:hover { color:var(--azul); text-decoration:underline; }
th a.ordenar.activo { color:var(--azul); }

/* ---------- Paginación ---------- */
.paginacion { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; margin-top:14px; }
.paginacion-info { color:#555; }
.paginas { display:flex; gap:4px; flex-wrap:wrap; }
.paginas a, .paginas span { min-width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; padding:0 10px;
  border:1px solid var(--borde); border-radius:6px; background:#fff; text-decoration:none; color:var(--azul); }
.paginas a:hover { background:var(--azul-claro); }
.paginas span.actual { background:var(--azul); color:#fff; border-color:var(--azul); font-weight:600; }
.paginas span.deshabilitado { color:#bbb; }
.paginas span.puntos { border:0; background:transparent; min-width:20px; padding:0; color:#888; }
.por-pagina label { color:#555; font-size:13px; }
.por-pagina select { min-height:32px; padding:4px 6px; }

/* ---------- SweetAlert2 ---------- */
.swal2-container { z-index:2000; }
.swal-texto-largo { white-space:pre-line; max-height:50vh; overflow:auto; }
/* El popup conserva la grilla de SweetAlert2 (botón ✕ arriba a la derecha); la altura la da el contenido */
.swal-visor .swal-visor-html { height:calc(94vh - 80px); }
.swal-visor-titulo { font-size:17px !important; padding:4px 40px 8px 8px !important; text-align:left !important; }
.swal-visor-html { flex:1; display:flex !important; flex-direction:column; margin:0 !important; padding:0 !important; overflow:hidden !important; }
.visor-barra { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:0 0 8px; }
.visor-cuerpo { position:relative; flex:1; background:#525659; border-radius:6px; overflow:hidden; min-height:300px; }
.visor-cuerpo iframe { width:100%; height:100%; border:0; display:block; position:absolute; inset:0; }
.visor-cargando { position:absolute; inset:0; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center;
  color:#fff; background:#525659; z-index:1; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  main { margin:16px auto; }
  .kpis { grid-template-columns:repeat(2, 1fr); }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  body { font-size:15px; }
  main { padding:0 12px; }
  h1 { font-size:18px; }

  .menu { padding:0 12px; }
  .menu-boton { display:block; }
  .menu-enlaces { display:none; width:100%; flex-direction:column; padding-bottom:8px; }
  .menu.abierto .menu-enlaces { display:flex; }
  .menu-enlaces a { border-radius:6px; padding:12px 10px; }

  .barra { flex-direction:column; align-items:stretch; }
  .acciones { width:100%; }
  .acciones .btn { flex:1 1 auto; }

  .filtros { flex-direction:column; align-items:stretch; }
  .filtros label, .filtros input, .filtros select { width:100%; }
  .filtros input[type=text], .filtros input[type=number] { width:100% !important; }
  .filtros label.check { flex-direction:row; }
  .filtros input[type=checkbox] { width:22px; height:22px; min-height:0; flex-shrink:0; }
  .filtros > button, .filtros > .btn { width:100%; }
  input, select, button, .btn { min-height:42px; font-size:16px; } /* 16px evita el zoom automático en iPhone */
  .btn.chico, button.chico { min-height:36px; font-size:14px; }

  .kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .kpis > div { flex-direction:column; align-items:flex-start; gap:6px; padding:10px; }
  .kpis strong { font-size:15px; }

  /* Tablas como tarjetas */
  .tabla:has(table.tarjetas) { border:0; background:transparent; overflow:visible; }
  table.tarjetas thead { display:none; }
  table.tarjetas, table.tarjetas tbody, table.tarjetas tfoot, table.tarjetas td { display:block; width:100%; }
  table.tarjetas tr { display:flex; flex-direction:column; background:#fff; border:1px solid var(--borde); border-radius:10px;
    margin-bottom:10px; padding:6px 12px; }
  table.tarjetas td.titulo-tarjeta { order:-1; }
  table.tarjetas tfoot tr { background:var(--azul-claro); }
  table.tarjetas td { border:0; border-bottom:1px dashed #e5e9ef; padding:7px 0; display:flex; justify-content:space-between;
    align-items:center; gap:12px; text-align:right !important; white-space:normal; overflow-wrap:anywhere; min-width:0; }
  table.tarjetas td:last-child { border-bottom:0; }
  table.tarjetas td::before { content:attr(data-label); font-weight:600; color:#555; text-align:left; flex-shrink:0; }
  table.tarjetas td[data-label=""]::before, table.tarjetas td:not([data-label])::before { content:none; }
  table.tarjetas td.vacia { display:none; }
  table.tarjetas td.titulo-tarjeta { font-weight:700; font-size:16px; justify-content:flex-start; text-align:left !important; }
  table.tarjetas td.titulo-tarjeta::before { content:none; }
  .enlaces-fila, .botones-fila { flex-wrap:wrap; justify-content:flex-end; }

  /* Tarjetas compactas (movimientos): dos columnas de datos */
  table.tarjetas.compacta tr { display:grid; grid-template-columns:1fr 1fr; column-gap:14px; padding:8px 12px; }
  table.tarjetas.compacta td { padding:4px 0; font-size:14px; border-bottom:0; }
  table.tarjetas.compacta td::before { font-weight:500; color:#777; }
  table.tarjetas.compacta td.titulo-tarjeta { grid-column:1 / -1; font-size:15px; border-bottom:1px solid var(--borde); padding-bottom:6px; margin-bottom:2px; }
  table.tarjetas.compacta td.n { grid-column:1 / -1; }

  /* Filtros plegables */
  details.plegable > summary { display:flex; }
  .solo-escritorio { display:none; }
  .buscador.crece { flex:1 1 auto; width:100%; }
  .buscador button { min-height:36px; }

  /* Paginación: números solo alrededor de la actual */
  .paginacion { flex-direction:column; align-items:stretch; }
  .paginacion-info { text-align:center; }
  .paginas { justify-content:center; }
  .paginas a.numero, .paginas span.puntos { display:none; }
  .paginas a, .paginas span { min-width:42px; height:42px; }
  .por-pagina { align-self:center; }
  .por-pagina select { min-height:36px; font-size:15px; }

  .swal2-popup { font-size:15px !important; }
}