*{box-sizing:border-box;margin:0;padding:0;}
:root{
  --ink:#16181d;--muted:#6b6f76;--hint:#9a9ea5;
  --line:#e4e4e0;--line-strong:#16181d;--bg:#f6f5f1;--card:#ffffff;
  /* aliases para compatibilidad con páginas existentes */
  --atrio:#16181d;--atrio-l:#f6f5f1;--atrio-d:#000000;--atrio-m:#6b6f76;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:14px;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;}
a{color:inherit;text-decoration:none;}
input,select,textarea{font-family:inherit;font-size:13px;line-height:1.4;padding:8px 12px;border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%;outline:none;border-radius:0;box-sizing:border-box;}
input:focus,select:focus,textarea:focus{border-color:var(--line-strong);}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b6f76' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;}
button{font-family:inherit;cursor:pointer;}
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:11px;color:var(--hint);text-transform:uppercase;letter-spacing:.5px;padding:10px 16px;border-bottom:1px solid var(--line);font-weight:400;}
td{padding:11px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:#faf9f6;}
.bdg{display:inline-block;font-size:11px;padding:2px 9px;font-weight:500;border:1px solid var(--line);}
.bg-b{background:var(--card);color:var(--ink);border-color:var(--line-strong);}
.bg-g{background:var(--card);color:var(--ink);border-color:var(--line-strong);}
.bg-a{background:var(--card);color:var(--muted);}
.bg-r{border:1px solid var(--line-strong);color:var(--ink);}
.bg-gr{background:var(--bg);color:var(--muted);}
/* Layout */
.layout{display:flex;min-height:100vh;}
.sidebar{width:210px;min-width:210px;background:var(--card);border-right:1px solid var(--line-strong);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;}
.sidebar-logo{padding:20px 18px 14px;border-bottom:1px solid var(--line);}
.sidebar-logo .brand{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
.sidebar-logo .brand-logo{height:26px;width:auto;display:block;}
.sidebar-logo .brand em{font-style:normal;color:var(--muted);}
.sidebar-logo .sub{font-size:10px;color:var(--hint);margin-top:2px;letter-spacing:.5px;text-transform:uppercase;}
.sidebar-user{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;}
.sidebar-av{width:30px;height:30px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--ink);flex-shrink:0;}
.sidebar-av.admin{border-color:var(--line-strong);}
.sidebar-user-info .name{font-size:12px;font-weight:500;color:var(--ink);}
.sidebar-user-info .role{font-size:11px;color:var(--hint);}
.sidebar-nav{flex:1;padding:10px 0;overflow-y:auto;}
.nav-section{font-size:10px;color:var(--hint);padding:14px 18px 4px;letter-spacing:.14em;text-transform:uppercase;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 18px;font-size:13px;color:var(--muted);border-left:2px solid transparent;}
.nav-item:hover{color:var(--ink);}
.nav-item.active{color:var(--ink);font-weight:500;border-left-color:var(--ink);padding-left:16px;}
.nav-item i{font-size:15px;}
.sidebar-footer{padding:14px 18px;border-top:1px solid var(--line);}
.sidebar-footer a{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--hint);}
.sidebar-footer a:hover{color:var(--ink);}
/* Main content */
.main{margin-left:210px;flex:1;display:flex;flex-direction:column;min-height:100vh;}
.topbar{background:var(--card);border-bottom:1px solid var(--line-strong);padding:16px 28px;display:flex;align-items:baseline;justify-content:space-between;}
.topbar h1{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);}
.topbar p{font-size:12px;color:var(--muted);margin-top:2px;}
.content{padding:28px;flex:1;}
/* Cards */
.card{background:var(--card);border:1px solid var(--line);margin-bottom:18px;overflow:hidden;}
.card-header{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.card-header h2{font-size:14px;font-weight:600;color:var(--ink);}
.card-body{padding:18px 20px;}
/* KPI grid */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-bottom:24px;border:1px solid var(--line);background:var(--line);}
.kpi{background:var(--card);padding:16px 18px;}
.kpi .lb{font-size:11px;color:var(--hint);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;}
.kpi .vl{font-size:24px;font-weight:600;color:var(--ink);}
.kpi .dl{font-size:11px;margin-top:2px;}
.kpi .vl.blue{color:var(--ink);}
.kpi .vl.red{color:var(--ink);}
.kpi .vl.green{color:var(--ink);}
.dl.up{color:var(--muted);} .dl.dn{color:var(--ink);} .dl.neu{color:var(--hint);}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);}
.btn:hover{background:var(--bg);}
.btn-primary{background:var(--ink);color:var(--card);border-color:var(--ink);}
.btn-primary:hover{background:#000;}
.btn-secondary{background:var(--card);color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{background:var(--bg);}
.btn-danger{background:var(--card);color:var(--ink);border:1px solid var(--line-strong);}
.btn-sm{padding:5px 10px;font-size:12px;}
/* Forms */
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Alerts */
.alert{padding:12px 16px;font-size:13px;margin-bottom:16px;border:1px solid var(--line);}
.alert-error,.alert-danger{border-color:var(--line-strong);color:var(--ink);background:var(--card);}
.alert-success{border-color:var(--line);color:var(--ink);background:var(--card);}
/* Progress bar */
.pb-bg{background:var(--line);height:4px;overflow:hidden;margin-top:6px;}
.pb-fi{height:100%;background:var(--ink);}
/* Contrato highlight */
.plan-box{border:1px solid var(--line-strong);padding:18px;background:var(--card);margin-bottom:18px;display:flex;align-items:center;justify-content:space-between;}
.plan-box .plan-name{font-size:11px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px;}
.plan-box .plan-price{font-size:20px;font-weight:600;color:var(--ink);}
.plan-box .plan-renew{font-size:12px;color:var(--muted);margin-top:2px;}
/* Grid 2col */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
/* Modal overlay */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(20,22,25,.55);z-index:200;align-items:center;justify-content:center;padding:16px;}
.modal-ov.open{display:flex;}
.modal-box{background:var(--card);border:1px solid var(--line-strong);width:100%;max-width:580px;max-height:90vh;overflow-y:auto;}
.modal-box .card-header{position:sticky;top:0;background:var(--card);z-index:1;}
.modal-box .card-body{padding:20px;}
.hidden{display:none;}
/* QR responsive: nunca desborda su contenedor */
.qr{line-height:0;}
.qr svg{display:block;width:100%;height:auto;}
/* ── Navegación inferior (móvil, portal del miembro) ── */
.bottomnav{display:none;}
@media(max-width:768px){
  /* Nada debe desbordar el ancho del móvil (evita scroll horizontal) */
  html,body{max-width:100%;overflow-x:hidden;}
  img,svg{max-width:100%;height:auto;}
  /* Altura real visible del navegador (evita el espacio muerto de 100vh en iOS) */
  body,.layout,.main{min-height:100dvh;}
  .grid-2{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .sidebar{transform:translateX(-100%);display:none;}
  .main{margin-left:0;min-width:0;}
  .content{min-width:0;}
  /* Tipografía y componentes más grandes y legibles en móvil */
  body{font-size:16px;}
  input,select,textarea{font-size:16px;padding:12px 14px;} /* 16px evita el zoom automático de iOS al enfocar */
  td{font-size:15px;padding:14px;}
  th{font-size:12px;padding:12px 14px;}
  .card-header{padding:16px 18px;}
  .card-header h2{font-size:17px;}
  .card-body{padding:18px;}
  .kpi{padding:18px 16px;}
  .kpi .lb{font-size:12px;}
  .kpi .vl{font-size:30px;}
  .kpi .dl{font-size:12px;}
  .btn{padding:12px 18px;font-size:15px;}
  .btn-sm{padding:8px 13px;font-size:13px;}
  .bdg{font-size:12px;padding:3px 10px;}
  .plan-box .plan-price{font-size:24px;}
  /* Cabecera tipo app: fija arriba */
  .topbar{
    padding:14px 16px;position:sticky;top:0;z-index:140;gap:10px;
    padding-top:calc(14px + env(safe-area-inset-top));
  }
  .topbar h1{font-size:21px;}
  .topbar p{font-size:13px;}
  /* Botón de acción de la cabecera: compacto, no desborda */
  .topbar .btn{padding:11px 14px;font-size:14px;white-space:nowrap;flex-shrink:0;}
  .content{padding:18px 16px;padding-bottom:calc(88px + env(safe-area-inset-bottom));}
  /* tablas anchas → scroll horizontal dentro de la tarjeta */
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .card table{min-width:560px;}
  /* modales casi a pantalla completa */
  .modal-ov{padding:8px;align-items:flex-end;}
  .modal-box{max-height:94vh;}
  /* Tab bar inferior estilo app nativa */
  .bottomnav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:150;
    background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    box-shadow:0 -1px 8px rgba(20,22,25,.04);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .bottomnav a{
    position:relative;flex:1;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:10px 2px 9px;min-height:62px;
    font-size:11.5px;font-weight:500;line-height:1;letter-spacing:.01em;
    color:var(--hint);text-align:center;
    -webkit-tap-highlight-color:transparent;
    transition:color .15s ease,transform .1s ease;
  }
  .bottomnav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .bottomnav a i{font-size:25px;line-height:1;}
  .bottomnav a:active{transform:scale(.92);}
  .bottomnav a.active{color:var(--ink);font-weight:600;}
  /* Indicador superior de la pestaña activa */
  .bottomnav a.active::before{
    content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:30px;height:2.5px;background:var(--ink);border-radius:0 0 3px 3px;
  }
  /* Variante deslizable (admin: muchas secciones) */
  .bottomnav-scroll{justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .bottomnav-scroll::-webkit-scrollbar{display:none;}
  .bottomnav-scroll a{flex:0 0 auto;min-width:72px;padding-left:6px;padding-right:6px;}
}