/* ============================================================
   Paylio · Tema (mismo sistema visual que Fixeo)
   ============================================================ */
:root{
  --navy:#123A4A; --navy-dark:#0D2C39;
  --primary:#1E88E5; --primary-dark:#1670C5; --primary-light:#E9F3FC;
  --accent:#1E8E4F; --accent-bright:#2ECC71; --accent-light:#E8F8F0;
  --ink:#263238; --text:#37474F; --muted:#5B6B73;
  --bg:#F7F9FA; --card:#FFFFFF; --border:#E3E8EB;
  --radius:14px; --shadow:0 1px 3px rgba(18,58,74,.06),0 8px 24px rgba(18,58,74,.07);
}
*{ -webkit-font-smoothing:antialiased; }
body{ font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--text); background:var(--bg); }
h1,h2,h3,h4{ font-family:'Poppins','Inter',system-ui,sans-serif; color:var(--ink); }
i[class^="ti-"],i[class*=" ti-"]{ vertical-align:-2px; }

/* Reskin de utilidades Tailwind al color de Fixeo (sin tocar cada página) */
.bg-slate-100{ background:var(--bg)!important; }
.bg-slate-900{ background:var(--navy)!important; }
.border-slate-800{ border-color:rgba(255,255,255,.08)!important; }
.hover\:bg-slate-800:hover{ background:var(--navy-dark)!important; }
.bg-blue-600{ background:var(--primary)!important; }
.hover\:bg-blue-700:hover{ background:var(--primary-dark)!important; }
.text-blue-600{ color:var(--primary)!important; }
.border-brand-500{ border-color:var(--primary)!important; }
.border-blue-500,.border-blue-600{ border-color:var(--primary)!important; }
.text-blue-700{ color:var(--primary-dark)!important; }

input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
table td, table th{ vertical-align:middle; }
textarea{ resize:vertical; }

/* Botón "pill" reutilizable (mismo estilo Fixeo) */
.btn-fx{ display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px;
  padding:10px 18px; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:.15s; }
.btn-fx-primary{ background:var(--primary); color:#fff; }
.btn-fx-primary:hover{ background:var(--primary-dark); }

/* ---------- App shell responsive ---------- */
#sidebar{ transition:transform .22s ease; }
#navOverlay{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:15; }
.topbar-burger{ display:none; }

@media (max-width:900px){
  #sidebar{ transform:translateX(-100%); }
  body.nav-open #sidebar{ transform:translateX(0); }
  body.nav-open #navOverlay{ display:block; }
  .main-shell{ margin-left:0!important; }
  .topbar-burger{ display:inline-flex!important; }
}

/* Tablas con scroll horizontal en móvil */
@media (max-width:640px){
  .table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table-scroll table{ min-width:560px; }
  .hide-sm{ display:none!important; }
}

/* Toast / botón instalar PWA */
#pwaInstall{ display:none; }

/* ---------- Menú de acciones (3 puntos) ---------- */
.kebab{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:9px; color:var(--muted); transition:.15s; }
.kebab:hover{ background:var(--bg); color:var(--ink); }
.row-menu{ position:fixed; z-index:60; min-width:190px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 32px rgba(18,58,74,.16); padding:6px; display:none; }
.row-menu.open{ display:block; }
.row-menu a, .row-menu button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:9px 12px; border-radius:8px; font-size:14px; color:var(--text); background:none; border:none;
  cursor:pointer; font-family:inherit; }
.row-menu a:hover, .row-menu button:hover{ background:var(--bg); color:var(--ink); }
.row-menu a i, .row-menu button i{ font-size:18px; color:var(--muted); width:18px; text-align:center; }
.row-menu .rm-sep{ height:1px; background:var(--border); margin:6px 4px; }
.row-menu .rm-danger{ color:#DC2626; }
.row-menu .rm-danger i{ color:#DC2626; }
.row-menu .rm-accent{ color:var(--primary); }
.row-menu .rm-accent i{ color:var(--primary); }

/* Kebab deshabilitado durante selección múltiple */
.kebab-off{ pointer-events:none; opacity:.25; }

/* Diálogo modal (búsqueda avanzada) */
.paylio-dialog{ border:none; border-radius:16px; padding:0; box-shadow:0 24px 60px rgba(18,58,74,.25); max-width:92vw; }
.paylio-dialog::backdrop{ background:rgba(15,23,42,.45); backdrop-filter:blur(2px); }
.paylio-dialog[open]{ animation:dlgIn .16s ease-out; }
@keyframes dlgIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }

/* Filtro de fechas (desplegable compacto) */
.filtro-dd{ position:relative; display:inline-block; }
.filtro-dd > summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:7px 12px; font-size:14px; user-select:none; }
.filtro-dd > summary::-webkit-details-marker{ display:none; }
.filtro-dd > summary::marker{ content:''; }
.filtro-dd > summary:hover{ background:var(--bg); }
.filtro-panel{ position:absolute; left:0; margin-top:6px; background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:0 12px 32px rgba(18,58,74,.14); padding:8px; z-index:40; width:300px; }

/* Fila resaltada un instante (p.ej. al "Ver rectificativa") */
@keyframes flashYellow { 0%{ background:#FEF08A; } 60%{ background:#FEF3C7; } 100%{ background:transparent; } }
.flash-row td { animation: flashYellow 1.8s ease-out forwards; }

/* Botones compactos de acción en lote (con color suave) */
.btn-bulk{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13px;
  padding:7px 12px; border-radius:9px; cursor:pointer; border:1px solid transparent; transition:.15s; }
.btn-bulk:hover{ filter:brightness(.97); }
.btn-bulk:active{ transform:scale(.97); }