:root{
  --bg:#0b0b0b; --panel:#161616; --panel-2:#1d1d1d; --border:#2a2a2a;
  --text:#f2f2f2; --muted:#8a8a8a; --accent:#30D0E0; --accent-ink:#04222a;
  --ok:#37c98b; --warn:#e0b030; --danger:#e05a5a;
  --radius:5px;              /* regla de diseño: sin redondeos marcados */
  --tap:46px;                /* altura mínima de zona táctil */
  --navh:64px;               /* alto de la barra inferior */
  --safe-b:env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.ic{width:20px; height:20px; flex:0 0 auto}

/* ---------- Cabecera ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:30;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{height:56px; width:auto; display:block}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); flex:0 0 auto}
.brand-login{flex-direction:column; justify-content:center; margin-bottom:22px}
.brand-login img{height:82px}

.nav{display:flex; align-items:center; gap:4px; flex-wrap:wrap}
.nav a,.linkbtn{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--text); padding:9px 12px; border-radius:var(--radius);
  border:1px solid transparent; font-size:14px; background:none; cursor:pointer;
  font-family:inherit; line-height:1;
}
.nav a.active{background:var(--panel-2); border-color:var(--border); color:var(--accent)}
.nav a:hover,.linkbtn:hover{background:var(--panel-2); border-color:var(--border); text-decoration:none}
.linkbtn{color:var(--muted)}
.nav form{margin:0}

/* ---------- Contenedores ---------- */
.wrap{max-width:1040px; margin:0 auto; padding:20px}
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; margin-bottom:18px
}
h1{font-size:22px; margin:0 0 16px; line-height:1.25}
h2{font-size:17px; margin:0 0 12px; line-height:1.3}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ---------- Formularios ---------- */
label{display:block; font-size:13px; color:var(--muted); margin:14px 0 6px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=date],select,textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--border);
  color:var(--text); padding:12px; border-radius:var(--radius);
  font-size:16px;               /* 16px evita el zoom automático en iOS */
  font-family:inherit; min-height:var(--tap);
  -webkit-appearance:none; appearance:none;
}
select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a8a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-2px; border-color:var(--accent)}
input[type=file]{
  width:100%; color:var(--muted); font-size:14px; padding:12px;
  background:var(--panel-2); border:1px dashed var(--border); border-radius:var(--radius);
}
input[type=date]{min-height:var(--tap)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--accent-ink); border:none;
  border-radius:var(--radius); padding:0 20px; min-height:var(--tap);
  font-weight:700; font-size:16px; font-family:inherit; cursor:pointer;
}
.btn:hover{filter:brightness(1.08); text-decoration:none}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.secondary{background:var(--panel-2); color:var(--text); border:1px solid var(--border)}
.btn.block{display:flex; width:100%}

.row{display:flex; gap:14px; flex-wrap:wrap}
.col{flex:1 1 220px; min-width:0}

/* ---------- Estados ---------- */
.chip{
  display:inline-block; font-size:12px; font-weight:700; padding:4px 10px;
  border-radius:var(--radius); border:1px solid var(--border); white-space:nowrap
}
.chip.pending{color:var(--warn); border-color:#4a3d10; background:#231c06}
.chip.paid{color:var(--ok); border-color:#124a34; background:#07231a}
.chip.expired{color:var(--muted); background:var(--panel-2)}
.chip.cancelled{color:var(--danger); border-color:#4a1616; background:#230b0b}

/* ---------- Tablas ---------- */
.tablewrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{text-align:left; padding:11px 8px; border-bottom:1px solid var(--border); vertical-align:top}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap}
td .ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--muted); word-break:break-all}

/* ---------- Métricas ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px}
.stat{background:var(--panel-2); border:1px solid var(--border); border-radius:var(--radius); padding:14px; min-width:0}
.stat .n{font-size:24px; font-weight:800; line-height:1.1}
.stat .l{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px}

/* ---------- Avisos ---------- */
.flash{padding:13px 14px; border-radius:var(--radius); margin-bottom:14px; border:1px solid var(--border); font-size:14px}
.flash.success{background:#0f2a20; border-color:#124a34; color:#8ee9c2}
.flash.error{background:#2a1010; border-color:#4a1616; color:#f0a0a0}

.paylink{
  background:var(--panel-2); border:1px dashed var(--accent); border-radius:var(--radius);
  padding:12px; word-break:break-all; font-family:ui-monospace,monospace; font-size:13px;
  -webkit-user-select:all; user-select:all;
}

.masklbl{font-size:12px; color:var(--ok)}
code{font-family:ui-monospace,monospace; font-size:13px; background:var(--panel-2); padding:2px 6px; border-radius:3px; word-break:break-all}

/* ---------- Login ---------- */
.login-shell{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:20px}
.login-card{width:100%; max-width:380px}

/* ---------- Barra inferior (solo móvil) ---------- */
.bottomnav{display:none}

/* ============================================================
   MÓVIL
   ============================================================ */
@media (max-width:760px){
  .wrap{padding:14px 14px calc(var(--navh) + var(--safe-b) + 18px)}
  .desktop-only{display:none !important}

  .topbar{padding:11px 14px; justify-content:center}
  .brand img{height:44px}
  .brand-login img{height:56px}

  h1{font-size:20px; margin-bottom:14px}
  .panel{padding:15px; margin-bottom:14px}

  /* Barra inferior tipo app */
  .bottomnav{
    display:grid; grid-template-columns:repeat(4,1fr); align-items:end;
    position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:rgba(18,18,18,.96);
    -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    padding:8px 6px calc(8px + var(--safe-b));
  }
  .bn-form{margin:0; display:flex}
  .bn-item{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    width:100%; min-height:var(--tap); padding:6px 2px;
    color:var(--muted); font-size:11px; font-family:inherit; letter-spacing:.2px;
    background:none; border:none; cursor:pointer; border-radius:var(--radius);
    text-decoration:none; -webkit-tap-highlight-color:transparent;
  }
  .bn-item:hover{text-decoration:none}
  .bn-item .ic{width:22px; height:22px}
  .bn-item.active{color:var(--accent)}
  .bn-item.active .ic{filter:drop-shadow(0 0 6px rgba(48,208,224,.5))}
  .bn-item:active{background:var(--panel-2)}

  /* Acción principal destacada (rectangular: respeta la regla de esquinas) */
  .bn-fab{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:var(--accent); color:var(--accent-ink); font-weight:800; font-size:11px;
    border-radius:var(--radius); min-height:54px; margin:-14px 4px 0;
    box-shadow:0 6px 18px rgba(48,208,224,.28); text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .bn-fab:hover{text-decoration:none; filter:brightness(1.06)}
  .bn-fab:active{transform:translateY(1px)}
  .bn-fab .ic{width:22px; height:22px; stroke-width:2.4}

  /* Tablas -> tarjetas legibles */
  .tablewrap{overflow:visible}
  table,tbody,tr,td{display:block; width:100%}
  thead{display:none}
  tr{
    border:1px solid var(--border); border-radius:var(--radius);
    margin-bottom:10px; padding:12px; background:var(--panel-2);
  }
  td{border:none; padding:6px 0; display:block; text-align:left}
  td::before{
    content:attr(data-label); display:block;
    font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;
    margin-bottom:2px;
  }
  td:first-child{
    border-bottom:1px solid var(--border); padding-bottom:9px; margin-bottom:4px;
  }

  /* Métricas en 2x2 */
  .stats{grid-template-columns:repeat(2,1fr); gap:10px}
  .stat{padding:12px}
  .stat .n{font-size:21px}

  .row{gap:10px}
  .col{flex:1 1 100%}
  .btn{width:100%}
  .nav a,.linkbtn{padding:11px 12px}
}

@media (max-width:380px){
  .bn-item span{font-size:10px}
  .stat .n{font-size:19px}
}

/* Respeta la preferencia de menos animación */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* Botón de filtro: ancho contenido en escritorio, completo en móvil */
@media (min-width:761px){
  .filter-action{flex:0 0 160px; max-width:160px}
}