: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;
}



.par{
    height: 35px;
    background: #00998b1a;
}

.impar{
    height: 35px;
    background: #ffffff;
}





/* ===== 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}