:root {
  --bg: #f9fafb;        /* Fondo general */
  --bg-elev: #ffffff;   /* Tarjetas y elevación */
  --text: #1e293b;      /* Texto principal */
  --muted: #64748b;     /* Texto secundario */
  --brand: #3b82f6;     /* Azul primario */
  --brand-2: #22c55e;   /* Verde secundario */
  --border: #e2e8f0;    /* Bordes ligeros */
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --radius: 12px;
  --topbar-h: 56px;
}

/* iOS amplía si el tamaño COMPUTADO < 16px */
html { -webkit-text-size-adjust: 100%; }

/* Controles: SIEMPRE 16px o más */
input, select, textarea, button { font-size: 16px !important; line-height: 1.2; }

/* Tus botones base */
.btn { font-size: 16px; }

/* Icon buttons (por si tienen texto o label) */
.btn-icon, .qty-pill { font-size: 16px; }

/* Buscadores que pusimos (súbelos si los dejaste en 14px) */
.search-input { font-size: 16px; height: 44px; }

/* SweetAlert2: inputs y botones dentro del popup */
.swal2-popup .swal2-input,
.swal2-popup .swal2-select,
.swal2-popup .swal2-textarea,
.swal2-popup .swal2-actions .swal2-styled {
  font-size: 16px !important;
}

/* Evita doble-tap zoom en elementos clicables */
a, button, [role="button"], .btn, .btn-icon { touch-action: manipulation; }

.is-ios input, .is-ios select, .is-ios textarea, .is-ios button,
.is-ios .swal2-popup .swal2-input,
.is-ios .swal2-popup .swal2-select,
.is-ios .swal2-popup .swal2-textarea,
.is-ios .swal2-popup .swal2-actions .swal2-styled {
  font-size: 16px !important;
}
#overlayCarga {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

#popupCarga {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  font-family: monospace;
  font-size: 20px;
}

#popupCarga img {
  width: 100px;
  margin-bottom: 15px;
}






/* ===== Search ===== */
.search-wrap{ position:relative; width:min(340px, 60vw); margin-left:auto; }
.search-input{
  width:100%; height:40px; padding:0 38px 0 40px; border:1px solid var(--border,#e5e7eb);
  border-radius:10px; font-size:14px; outline:none;
  background:var(--bg-elev,#fff); color:var(--text,#0f172a);
  transition:border-color .15s, box-shadow .15s;
}
.search-input:focus{ border-color:#93c5fd; box-shadow:0 0 0 4px rgba(147,197,253,.35); }
.search-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.7;
}
.search-clear{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border:1px solid #e5e7eb; border-radius:50%;
  display:none; align-items:center; justify-content:center; cursor:pointer; background:#fff;
}
.search-meta{ font-size:12px; color:#64748b; margin-left:8px; }

/* ===== Reset básico ===== */
*{box-sizing:border-box}
html,body{height:100%}
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #f3f6fb 100%);
}

/* ===== Topbar ===== */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:.75rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(6px);
  background: #ffffffd9;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text)}
.brand-logo{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: radial-gradient(120% 120% at 10% 10%, var(--brand) 0%, var(--brand-2) 60%, transparent 61%),
              linear-gradient(135deg, color-mix(in srgb, var(--brand) 60%, #000 40%), color-mix(in srgb, var(--brand-2) 60%, #000 40%));
  box-shadow: var(--shadow);
  font-weight:700;
}
.brand-title{font-weight:700; letter-spacing:.2px}
.topbar-spacer{flex:1}

/* Hamburger */
.hamburger{
  --size: 44px;
  width: var(--size); height: var(--size); border-radius:12px;
  background:var(--bg-elev); border:1px solid var(--border); color:var(--text);
  display:inline-grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.hamburger:active{transform:scale(.98)}
.hamburger span{position:relative; width:22px; height:2px; background:currentColor; display:block}
.hamburger span::before,.hamburger span::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:currentColor;
  transition:transform .25s ease, top .25s ease, opacity .2s ease;
}
.hamburger span::before{top:-7px}
.hamburger span::after{top:7px}
.hamburger[aria-expanded="true"] span{background:transparent}
.hamburger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.hamburger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ===== Layout Grid ===== */
.layout{
  display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr auto; min-height:100dvh;
  grid-template-areas:
    "header"
    "main"
    "footer";
}
header{grid-area:header}
main{grid-area:main}
footer{grid-area:footer}

/* ===== Sidebar (off-canvas en móvil) ===== */
.sidebar{
  position: fixed; inset:0 auto 0 0; width: 88%; max-width: 320px; z-index: 60;
  background:var(--bg-elev); border-right:1px solid var(--border);
  transform: translateX(-100%); transition: transform .3s ease;
  display:flex; flex-direction:column;
  height: -webkit-fill-available !important;
}
.sidebar.open{transform: translateX(0)}
.sidebar-header{padding:1rem 1rem .5rem 1rem; border-bottom:1px solid var(--border); font-weight:700}
.sidebar-nav{padding:.5rem 0; overflow:auto}
.sidebar a{
  display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  text-decoration:none; color:var(--text);
  border-left:3px solid transparent;
  transition:background .2s ease, border-color .2s ease;
}
.sidebar a:hover{background:#00998b1a}
.sidebar a.active{border-left-color: var(--brand); background:#00998b1a}

/* Overlay */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(2px); z-index:55; opacity:0; pointer-events:none; transition:opacity .3s ease}
.overlay.show{opacity:1; pointer-events:auto}

/* ===== Main content ===== */
.container{padding: 1rem}
.hero{
  display:grid; gap:1rem; grid-template-columns:1fr;
  margin: 1rem 0; align-items:center;
}
.hero-card{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.25rem;
}
.hero h1{margin:.25rem 0 .5rem 0; font-size:clamp(1.4rem, 2.5vw, 2rem)}
.sub{color:var(--muted)}

.grid{display:grid; grid-template-columns:1fr; gap:1rem}
.card{
  background:var(--bg-elev); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow);
      margin-bottom: 5px;
}

.btn{
  appearance:none; border:none; border-radius:12px;
  padding:.50rem 1rem; font-weight:600; cursor:pointer; color:#fff;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 70%, #000 30%));
}

footer{
  border-top:1px solid var(--border);
  padding:1rem; color:var(--muted); text-align:center;background: white;
}

/* ===== Desktop (>= 992px) ===== */
@media (min-width: 992px){
  .layout{grid-template-columns: 280px 1fr; grid-template-areas: "header header" "sidebar main" "footer footer"}
  .sidebar{position: sticky; top:0; height: calc(100dvh - 56px); transform:none; box-shadow:none; width:auto; max-width:none}
  .overlay{display:none}
  main{padding-left:0}
  .hero{grid-template-columns:1.2fr 1fr}
  .grid{grid-template-columns: repeat(3, 1fr)}
  .topbar .hamburger{display:none}
}

/* Utils */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.trTabla{
   
      background: #009688;
    color: white;
    position: sticky;
    top: -5px;
    z-index: 1;
    height: 35px;
}
tr:hover td{background:#00998b1a}

/* ====== Layout fijo: header + main(scroll) + footer ====== */
:root{
  --footer-h: 48px;              /* alto del footer (ajústalo a gusto) */
}

/* El documento NO scrollea; el scroll vive en main */
html, body{
  height: 100%;
  overflow: hidden;
}

/* Fila fija para header, 1fr para main, fila fija para footer */
.layout{
  height: 100dvh;                 /* respeta viewport móvil/desktop */
  grid-template-rows: var(--topbar-h) 1fr var(--footer-h) !important;
}

/* Permite que main pueda encoger y scrollear */
.layout > *{ min-height: 0; }

/* Header ya es sticky en tu CSS; lo dejamos igual */

/* Footer fijo visualmente y con altura controlada */
footer{
  position: sticky;
  bottom: 0;
  z-index: 40;
  height: var(--footer-h);
 
                      /* evita que el padding altere la altura */
  background: #fff;
  border-top: 1px solid var(--border);
}

/* Si tu footer lleva contenido complejo (tabla), que se centre y se adapte */
footer > *{
  width: 100%;
  /*max-width: 1200px;*/               /* opcional, para que no se deforme en pantallas grandes */
}

/* El ÚNICO scroll está en main */
main{
  overflow-y: auto !important;
  padding: 10px;
}

/* ===== Panel dentro de main: sin romper el scroll del main ===== */
.panelMuestra{
  display: flex;
  flex-direction: column;
  height: 100%;                    /* ocupa el alto que main le da */
}
.panelMuestra .barra-filtros{
  flex: none;                      /* no scrollea */
}
.panelMuestra .contenido{
  flex: 1 1 auto;                  /* crece/encoge con main */
  /* SIN overflow-y aquí para evitar doble scroll */
}

/* ===== Desktop =====
   Conservamos tu layout desktop; solo aseguramos que la sidebar
   siga siendo sticky sin interferir con el footer fijo. */
@media (min-width: 992px){
  .layout{
    /* ya tienes: grid-template-areas "header header" "sidebar main" "footer footer" */
    grid-template-rows: var(--topbar-h) 1fr var(--footer-h) !important;
  }
  .sidebar{
    position: sticky;
    top: 0;
    height: calc(100dvh - var(--topbar-h)); /* coherente con el header fijo */
    transform: none;
    box-shadow: none;
    width: auto;
    max-width: none;
  }
}





/* ====== Tarjetas de clientes (grid responsiva) ====== */
.contenedores-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 12px;
 
}
@media (min-width: 640px){
  .contenedores-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .contenedores-grid{ grid-template-columns: repeat(3, 1fr); }
}

.card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-header{
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
}
.card-header h3{
  margin:0; font-size:16px; font-weight:700; color:var(--text);
  display:inline-flex; align-items:center; gap:8px;
}
.card-header svg{ flex:none; opacity:.8 }

/* DL compacto y limpio */
.card-info{
  margin:0; padding:0;
  display:grid; grid-template-columns: 1fr 1fr; gap:8px 14px;
}
.card-info > div{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
}
.card-info dt{ font-weight:600; color:var(--muted); margin-right:10px; }
.card-info dd{ margin:0; font-variant-numeric:tabular-nums; }

/* Alternado útil si lo requieres en otro listado */


/* ====== KPIs de resumen (al final del listado) ====== */
.kpis{
  display:grid; gap:10px;
  grid-template-columns: repeat(2, 1fr);
  width:100%;
  margin-top:12px;
  zoom: 70%;
  
}
@media (min-width:768px){
  .kpis{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width:1200px){
  .kpis{ grid-template-columns: repeat(6, 1fr); }
}
.kpi{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:6px;
  min-height:92px;
}
.kpi .kpi-title{ font-size:12px; color:var(--muted); letter-spacing:.2px; }
.kpi .kpi-value{ font-size:22px; font-weight:700; color:#1f5130; font-variant-numeric:tabular-nums; }
.kpi .kpi-value.negativo{ color:#9b1c1c; }

/* Espaciado final en main para no chocar con el footer fijo */
main{ padding-bottom:14px; }

/* ===== Fix generales anti-desborde en mobile ===== */
html, body, main { overflow-x: hidden; }
.card, .kpi, .contenedores-grid { width: 100%; }

/* Evita que los hijos se “anclen” y provoquen scroll lateral */
.card-info > div, .card-header h3, .barra-filtros, .search-input { min-width: 0; }

/* Títulos largos: que corten con puntos */
.card-header h3{
  
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Etiquetas/valores: permitir quiebres seguros */
.card-info dt, .card-info dd{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Barra de filtros responsive ===== */
.panelMuestra .barra-filtros{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.panelMuestra .barra-filtros .search-input{
  flex: 1 1 130px;       /* se adapta, mínimo 130px */
  height: 36px;          /* un poco más compacta en móvil */
}
.panelMuestra .barra-filtros .btn{
  flex: 0 0 auto;
  height: 36px;
  padding: 0 12px;
}

/* ===== Cards en móvil: 1 sola columna de info ===== */
@media (max-width: 480px){
  .contenedores-grid{ grid-template-columns: 1fr !important; }

  /* La info de la card pasa a 1 columna; nada se corta a la derecha */
  .card-info{
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .card-info > div{
    padding: 8px 10px;
    min-height: 36px;
  }

  /* Ajustes de tipografía para respirar */
  .card-header h3{ font-size: 15px; }
  .kpi .kpi-value{ font-size: 20px; }
  main{ padding: 8px 8px 14px; }
}

/* ===== Telas un poco más anchas (≤ 640px) ===== */
@media (max-width: 640px){
  /* Si quieres 2 columnas de cards solo cuando sí hay espacio real */
  .contenedores-grid{ grid-template-columns: 1fr; } /* fuerza 1 columna segura */
}

/* ===== Previene que .par/.impar aplaste las cards ===== */
tr.par, tr.impar { height: 35px; }
.card.par, .card.impar,
article.par, article.impar,
div.par, div.impar { height: auto !important; background: var(--bg-elev) !important; }







/* ===== Tabla responsive base ===== */
.table-wrap{
  width:100%;
  overflow-x:auto;                 /* Fallback: scroll horizontal si hace falta */
  -webkit-overflow-scrolling:touch;
}
.table{
  width:100%;
  border-collapse: collapse;
  font-size:14px;
}
.table th, .table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border, #e5e7eb);
  vertical-align: top;
  text-align:left;
  color:var(--text, #1e293b);
}
.table thead th{
  position: sticky; top: 0; z-index: 1;
  background:#fff;
}

/* Monto alineado a la derecha en desktop */
.td-amount{ text-align:right; font-variant-numeric: tabular-nums; }

/* Píldoras simples */
.pill{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600;
}
.pill-ok{ background:#dcfce7; color:#166534; }
.pill-no{ background:#fee2e2; color:#991b1b; }

/* ===== Reflow: en pantallas pequeñas, cada <tr> es una 'card' ===== */
@media (max-width: 640px){
  .table.resp thead{ display:none; }            /* ocultamos encabezado */
  .table.resp tr{
    display:block;
    border:1px solid var(--border,#e5e7eb);
    border-radius:12px;
    padding:10px;
    margin-bottom:10px;
    background:#fff;
    box-shadow: var(--shadow, 0 4px 16px rgba(0,0,0,.08));
  }
  .table.resp td{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    padding:6px 0;
    border:none;                                 /* sin líneas internas */
    white-space:normal;                          /* permite saltos */
    word-break:break-word;
  }
  /* Etiqueta a la izquierda tomada de data-label */
  .table.resp td::before{
    content: attr(data-label);
    font-weight:600;
    color:var(--muted,#64748b);
    margin-right:12px;
    min-width: 42%;
  }
  /* Que el valor pueda encogerse sin empujar */
  .table.resp td > *{ min-width:0; }

  /* Alineación especial para monto y acciones en móvil */
  .table.resp .td-amount{ justify-content:flex-end; }
  .table.resp .td-actions{ justify-content:flex-end; }
}

/* Anti-scroll lateral por elementos toscos */
html, body, main{ overflow-x:hidden; }


/* ------- Desktop table ------- */
.table-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:14px; background:#fff; }
.table th,.table td{ padding:8px 10px; border-bottom:1px solid var(--border,#e5e7eb); text-align:left; vertical-align:top; }
.table thead th{ position:sticky; top:0; z-index:1; background:#fff; }
.td-amount{ text-align:right; font-variant-numeric:tabular-nums; }

/* zebra solo en TR de tabla, para no afectar tarjetas */
.table tr.par{ background:#f8fafc; }
.table tr.impar{ background:#ffffff; }

/* ------- Mobile cards (ocultas en desktop) ------- */
.mov-cards{ display:none; }

@media (max-width: 640px){
  .table-wrap{ display:none; }     /* oculta tabla en móvil */
  .mov-cards{
    display:grid;
    gap:10px;
    margin-bottom: 4vh;
  }
  .mov-card{
    background:#fff;
    border:1px solid var(--border,#e5e7eb);
    border-radius:12px;
    box-shadow:var(--shadow,0 4px 16px rgba(0,0,0,.08));
    padding:10px;
    display:grid;
    gap:8px;
  }
  .mov-head{
    display:flex; align-items:center; gap:8px; justify-content:space-between;
  }
  .mov-title{
    display:flex; align-items:center; gap:6px; min-width:0;
    font-weight:700; color:var(--text,#1e293b);
  }
  .mov-title .names{
    display:inline-flex; gap:6px; align-items:center; min-width:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-size: 13px;
  }
  .mov-title svg{ flex:none; opacity:.85; }
  .mov-date{ color:var(--muted,#64748b); font-size:12px; white-space:nowrap;font-weight: 700; }

  .mov-grid{
    display:grid; grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .mov-item{
    border:1px solid var(--border,#e5e7eb);
    border-radius:8px;
    padding:8px 10px;
    display:flex; justify-content:space-between; gap:10px;
    font-size:13px;
    grid-column: 1 / -1;

  }
  .mov-label{ color:var(--muted,#64748b); font-weight:600; }
  .mov-value{ text-align:right; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight: 500;}

  .mov-footer{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; margin-top:2px;
  }
  .mov-amount{ font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; color:#0f5132; }
  .mov-amount.neg{ color:#b91c1c; }
  .mov-actions svg{ cursor:pointer; color:#e11d48; }

  /* evita desbordes horizontales globales */
  html,body,main{ overflow-x:hidden; }
}