:root{
  --ink:#0b0f19;
  --muted:rgba(11,15,25,.62);
  --line:rgba(15,23,42,.14);
  --line2:rgba(15,23,42,.22);
  --shadow:0 16px 50px rgba(2,6,23,.12);
  --radius:16px;
  --t:.18s ease;
  --max:1100px;
}

.page{max-width:var(--max);margin:0 auto;padding:14px 18px 60px}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.head h1{margin:0;font-size:24px;letter-spacing:.2px}
.head p{margin:6px 0 0}

.panel{margin-top:14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:14px;animation:pop .30s ease both}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.list{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.card{grid-column:span 12;border:1px solid var(--line);border-radius:var(--radius);background:rgba(15,23,42,.015);padding:14px;transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.card h3{margin:0 0 6px;font-size:15.5px;font-weight:900}
.card .meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:10px;font-size:12.5px;color:rgba(11,15,25,.75)}
.k{color:var(--muted)}
.empty{padding:26px 12px;text-align:center}
.empty-title{font-weight:950;margin-bottom:6px}

.modal{position:fixed;inset:0;display:none;z-index:220}
.modal.open{display:block}
.modal .overlay{position:absolute;inset:0;background:rgba(2,6,23,.45);backdrop-filter:blur(2px)}
.dialog{position:relative;max-width:980px;width:calc(100% - 24px);margin:12px auto;background:#fff;border-radius:18px;border:1px solid rgba(255,255,255,.25);box-shadow:0 18px 60px rgba(2,6,23,.22);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;overflow:hidden;animation:pop .22s ease both}
.m-head{padding:14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex:0 0 auto}
.m-title{font-weight:950;font-size:15.5px}
.m-body{padding:14px;overflow:auto;-webkit-overflow-scrolling:touch;flex:1 1 auto;min-height:0}
.m-foot{padding:14px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;flex:0 0 auto}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{min-width:0}
.field label{display:block;font-size:12.5px;margin-bottom:6px;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(11,15,25,.28)}
.span2{grid-column:span 2}
.divider{padding-top:6px;margin-top:2px;border-top:1px dashed rgba(15,23,42,.14)}
.section-title{font-weight:950}
.hint{margin-top:6px;font-size:12px;color:rgba(11,15,25,.55)}

.items{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.items thead th{text-align:left;font-size:12px;color:rgba(11,15,25,.72);background:rgba(15,23,42,.02);border-bottom:1px solid var(--line);padding:10px 10px;white-space:nowrap}
.items .num{text-align:right}
.items tbody td{padding:8px 10px;border-bottom:1px solid rgba(15,23,42,.10);vertical-align:middle}
.items tbody tr:last-child td{border-bottom:0}

.items input{
  width:100%;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
}
.items input:focus{border-color:rgba(11,15,25,.28)}
.totalcell{text-align:right;font-weight:900}

.delbtn{
  border:1px solid rgba(239,68,68,.28);
  background:rgba(239,68,68,.08);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.delbtn:hover{filter:brightness(.98)}

.totals{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:rgba(15,23,42,.02);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  font-size:14px;
}
.totals strong{font-weight:950}

@media (max-width:860px){
  .grid{grid-template-columns:1fr}
  .span2{grid-column:span 1}
  .card .meta{grid-template-columns:1fr}
}
@media (max-width:560px){
  .page{padding:12px 14px 50px}
  .dialog{width:calc(100% - 16px);margin:8px auto;max-height:calc(100dvh - 16px);border-radius:16px}
  .m-body{padding:12px}
  .items thead{display:none}
  .items tbody tr{display:block;padding:10px 10px;border-bottom:1px solid rgba(15,23,42,.10)}
  .items tbody td{display:flex;gap:10px;align-items:center;justify-content:space-between;border:0;padding:6px 0}
  .items tbody td::before{content:attr(data-l);color:rgba(11,15,25,.62);font-size:12px;flex:0 0 auto}
}
/* =====================================================
   NAV 5B — FIX MOBILE (CELULAR)
===================================================== */
@media (max-width: 768px){

  /* ---------- Header ---------- */
  .masthead{
    padding: 8px 12px;
  }

  .masthead .brand{
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .masthead .logo{
    width: 44px;
    height: auto;
  }

  .masthead .titles{
    line-height: 1.1;
  }

  .masthead .title{
    font-size: 15px;
    font-weight: 800;
  }

  .masthead .subtitle{
    font-size: 12px;
    color: #666;
  }

  .masthead .api-status{
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
  }

  /* ---------- Nav principal ---------- */
  #topnav{
    position: sticky;
    top: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }

  #topnav .inner{
    overflow-x: auto;
  }

  #navList{
    display: flex;
    flex-direction: row;
    gap: 6px;
    padding: 8px 6px;
    white-space: nowrap;
  }

  #navList li{
    flex: 0 0 auto;
  }

  #navList a{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 12px;
  }

  #navList a span{
    display: none; /* texto largo fuera */
  }

  #navList a i,
  #navList a svg{
    font-size: 18px;
  }

  /* ---------- Activo ---------- */
  #navList a.active{
    background: rgba(245,196,0,.25);
    font-weight: 800;
  }

}