/* ============================================================
   PLADDES Cloud — Sistema de diseño
   Basado en el mockup "PLADDES Cloud.dc.html" (Claude Design).
   ============================================================ */
:root{
  /* Marca / tokens (mapean 1:1 a --brand-* del Data Plane) */
  --c-red:#E30613; --c-red-dark:#B30000; --c-red-soft:#FCE8E8;
  --c-ink:#0F1B2D; --c-ink-2:#1B2B40;
  --c-gold:#C9A24B; --c-blue:#1B9DD9;
  --c-text:#333333; --c-muted:#6B7280; --c-alt:#F5F5F5; --c-border:#E0E0E0;
  --c-success:#639922; --c-success-soft:#EAF3DE;
  --c-shadow:0 1px 2px rgba(15,27,45,.04),0 1px 3px rgba(15,27,45,.06);
  --c-shadow-md:0 6px 24px rgba(15,27,45,.08);
  --radius:12px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--c-text); background:var(--c-alt);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--c-red-soft);}
.pl-scroll::-webkit-scrollbar{width:8px;height:8px;}
.pl-scroll::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:8px;}

/* ---- Wordmark logo ---- */
.brand-logo{display:inline-flex;align-items:baseline;gap:1px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.brand-logo .pl-p{color:var(--c-red);}
.brand-logo .pl-rest{color:var(--c-ink);}
.brand-logo.on-dark .pl-rest{color:#fff;}

/* ============ APP SHELL (admin / portal) ============ */
.shell{display:flex;min-height:100vh;background:var(--c-alt);}
.sidebar{
  width:248px;flex:none;background:#fff;border-right:1px solid var(--c-border);
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 14px;
}
.sidebar .brand-head{padding:6px 8px 18px;}
.sidebar .brand-head .kicker{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--c-muted);margin-top:6px;}
.nav{display:flex;flex-direction:column;gap:3px;}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  font-size:14px;font-weight:500;color:#475467;
}
.nav a:hover{background:var(--c-alt);}
.nav a.active{color:var(--c-red);background:var(--c-red-soft);font-weight:600;}
.nav a .ic{width:18px;height:18px;flex:none;}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);margin:16px 8px 6px;}
.side-foot{margin-top:auto;border-top:1px solid var(--c-border);padding-top:12px;}
.side-user{display:flex;align-items:center;gap:10px;padding:4px 8px 10px;}
.su-info{min-width:0;}
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex:none;}
.avatar.ink{background:var(--c-ink);} .avatar.red{background:var(--c-red);} .avatar.gold{background:var(--c-gold);}
.side-user .nm{font-size:13px;font-weight:600;color:var(--c-ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.side-user .rl{font-size:11px;color:var(--c-muted);}
.logout-btn{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--c-red);background:#fff;border-color:var(--c-border);}
.logout-btn:hover{background:var(--c-red-soft);color:var(--c-red-dark);filter:none;}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  display:flex;align-items:center;gap:16px;padding:16px 30px;background:#fff;
  border-bottom:1px solid var(--c-border);position:sticky;top:0;z-index:50;
}
.topbar h1{font-size:19px;font-weight:700;color:var(--c-ink);margin:0;}
.topbar .sp{margin-left:auto;}
.content{padding:28px 30px;}

/* hamburguesa: oculta en escritorio, visible en móvil/tablet */
.nav-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;flex:none;
  border:1px solid var(--c-border);border-radius:9px;background:#fff;color:var(--c-ink);cursor:pointer;}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(15,27,45,.45);z-index:150;}

/* ============ TYPO ============ */
.page-title{font-size:24px;font-weight:800;letter-spacing:-.01em;color:var(--c-ink);margin:0 0 4px;}
.page-sub{font-size:14px;color:var(--c-muted);margin:0 0 22px;}
.kicker{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--c-red);text-transform:uppercase;}
.muted{color:var(--c-muted);}
.ink{color:var(--c-ink);}

/* ============ CARDS ============ */
.card{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);box-shadow:var(--c-shadow);}
.card-pad{padding:22px;}
.card-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--c-border);}
.card-head .t{font-size:15px;font-weight:700;color:var(--c-ink);}
.card-dark{background:var(--c-ink);color:#fff;border-radius:var(--radius);padding:22px;}
.card-dark .lbl{font-size:13px;color:#9fb0c4;}
.grid{display:grid;gap:16px;}
.cols-4{grid-template-columns:repeat(4,1fr);}
.cols-3{grid-template-columns:repeat(3,1fr);}
.cols-2{grid-template-columns:1fr 1fr;}
.flexcol{display:flex;flex-direction:column;gap:16px;}
@media(max-width:1024px){.cols-4{grid-template-columns:repeat(2,1fr);}.cols-3,.cols-2{grid-template-columns:1fr;}}

/* ---- KPI ---- */
.kpi{background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:20px;box-shadow:var(--c-shadow);}
.kpi .lbl{font-size:13px;color:var(--c-muted);font-weight:500;}
.kpi .val{font-size:28px;font-weight:800;color:var(--c-ink);margin:6px 0 4px;letter-spacing:-.01em;}
.kpi .delta{font-size:12px;font-weight:600;color:var(--c-success);}
.kpi .delta.neg{color:var(--c-red);}

/* ============ BADGES / PILLS ============ */
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.02em;padding:4px 10px;border-radius:999px;color:#475467;background:var(--c-alt);}
.badge.activa,.badge.activo,.badge.pagado,.badge.pagada{color:#3f6313;background:var(--c-success-soft);}
.badge.trial,.badge.aprovisionando{color:#0E6FA8;background:#E5F4FB;}
.badge.en_gracia,.badge.pendiente,.badge.vencida{color:#8a6d1f;background:#FBF3DE;}
.badge.suspendida,.badge.suspendido,.badge.error,.badge.anulada{color:#B30000;background:var(--c-red-soft);}
.badge.archivado,.badge.archivada{color:#475467;background:#ECEEF1;}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;
  padding:10px 18px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;background:var(--c-alt);color:var(--c-ink);transition:.15s;}
.btn:hover{filter:brightness(.97);}
.btn-sm{padding:8px 14px;font-size:13px;}
.btn-primary{background:var(--c-red);color:#fff;box-shadow:0 2px 10px rgba(227,6,19,.22);}
.btn-primary:hover{background:var(--c-red-dark);filter:none;}
.btn-ink{background:var(--c-ink);color:#fff;}
.btn-light{background:var(--c-alt);color:var(--c-ink);border-color:var(--c-border);}
.btn-ghost{background:transparent;color:#475467;}
.btn-danger-soft{background:var(--c-red-soft);color:var(--c-red-dark);}
.btn-block{width:100%;}
.btn-white{background:#fff;color:var(--c-ink);}
.btn-on-dark{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2);}

/* ============ TABLES ============ */
.tbl{width:100%;overflow-x:auto;}
.tbl .thead,.tbl .trow{min-width:760px;}   /* scrollea en pantallas angostas, no rompe la tarjeta */
.tbl .thead,.tbl .trow{display:grid;gap:10px;align-items:center;}
.tbl .thead{padding:11px 20px;background:var(--c-alt);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-muted);}
.tbl .trow{padding:14px 20px;border-top:1px solid var(--c-border);font-size:13.5px;color:var(--c-text);}
.tbl .trow.clickable{cursor:pointer;}
.tbl .trow.clickable:hover{background:#fafbfc;}
.cell-entity{display:flex;align-items:center;gap:11px;}
.cell-entity .ico{width:34px;height:34px;border-radius:8px;background:var(--c-alt);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--c-ink);flex:none;}
.cell-entity .nm{font-size:14px;font-weight:600;color:var(--c-ink);}
.cell-entity .sub{font-size:12px;color:var(--c-muted);}

/* ---- progress ---- */
.bar{height:8px;border-radius:5px;background:var(--c-alt);overflow:hidden;}
.bar.sm{height:6px;}
.bar > span{display:block;height:100%;background:var(--c-success);}
.bar > span.warn{background:var(--c-gold);} .bar > span.crit{background:var(--c-red);}
.usage-row .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;}
.usage-row .top .l{color:var(--c-text);font-weight:600;}
.usage-row .top .r{color:var(--c-muted);}

/* ============ FORMS ============ */
.field{margin-bottom:14px;}
.label{display:block;font-size:12px;font-weight:600;color:var(--c-text);margin-bottom:6px;}
.input,.select select,textarea.input{
  width:100%;padding:10px 13px;border:1px solid var(--c-border);border-radius:9px;
  font-size:14px;font-family:inherit;color:var(--c-text);background:#fff;
}
.input:focus,textarea.input:focus,.select select:focus{outline:none;border-color:var(--c-red);box-shadow:0 0 0 3px var(--c-red-soft);}
.select{position:relative;}
.select select{appearance:none;cursor:pointer;}
.input-addon{display:flex;}
.input-addon .input{border-radius:9px 0 0 9px;}
.input-addon .addon{display:flex;align-items:center;padding:0 13px;background:var(--c-alt);border:1px solid var(--c-border);border-left:0;border-radius:0 9px 9px 0;font-size:13px;color:var(--c-muted);white-space:nowrap;}
.help{font-size:12px;color:var(--c-muted);margin-top:5px;}
.form-grid{display:grid;gap:0 16px;}
.form-grid.c2{grid-template-columns:1fr 1fr;}
.form-grid.c3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:720px){.form-grid.c2,.form-grid.c3{grid-template-columns:1fr;}}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--c-text);margin-bottom:10px;cursor:pointer;}

/* ============ NOTIFICATIONS ============ */
.note{border-radius:10px;padding:14px 16px;margin-bottom:18px;font-size:14px;display:flex;gap:10px;align-items:flex-start;}
.note .x{margin-left:auto;cursor:pointer;opacity:.5;font-weight:700;}
.note-ok{background:var(--c-success-soft);color:#3f6313;}
.note-err{background:var(--c-red-soft);color:var(--c-red-dark);}
.note-warn{background:#FBF3DE;color:#8a6d1f;}

/* ============ MISC ============ */
.level{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;}
.toolbar-search{width:220px;padding:9px 13px;border:1px solid var(--c-border);border-radius:9px;font-size:13px;background:var(--c-alt);}
.swatch{width:30px;height:30px;border-radius:7px;border:1px solid #0001;display:inline-block;}
.pagination-wrap{margin-top:18px;}
.pg{display:inline-flex;gap:4px;}
.pg a,.pg span{padding:7px 12px;border:1px solid var(--c-border);border-radius:8px;font-size:13px;background:#fff;color:var(--c-text);}
.pg .is-current{background:var(--c-red);color:#fff;border-color:var(--c-red);}
.pg .disabled{opacity:.45;}

/* ============ MODAL (visor de comprobante) ============ */
.modal-ov{position:fixed;inset:0;background:rgba(15,27,45,.55);display:none;align-items:center;justify-content:center;z-index:300;}
.modal-ov.open{display:flex;}
.modal-box{background:#fff;border-radius:12px;width:min(900px,94vw);height:88vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--c-shadow-md);}
.modal-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--c-border);}
.modal-head .t{font-weight:700;color:var(--c-ink);}
.modal-body{flex:1;background:var(--c-alt);}
.modal-body embed,.modal-body iframe{width:100%;height:100%;border:0;display:block;}

/* ============================================================
   RESPONSIVE — shell de la app (admin / portal / reseller)
   El sidebar pasa a ser un cajón deslizable en móvil y tablet.
   ============================================================ */
@media(max-width:860px){
  /* sidebar -> drawer fuera de pantalla */
  .sidebar{
    position:fixed;top:0;left:0;height:100vh;width:264px;max-width:84vw;z-index:200;
    transform:translateX(-100%);transition:transform .25s ease;
    box-shadow:var(--c-shadow-md);
  }
  body.nav-open .sidebar{transform:translateX(0);}
  body.nav-open .nav-overlay{display:block;}
  .nav-toggle{display:inline-flex;}

  /* la zona principal ocupa todo el ancho */
  .main{width:100%;}
  .topbar{padding:12px 16px;gap:12px;}
  .topbar h1{font-size:17px;}
  .content{padding:18px 16px;}

  /* barra de acciones: que envuelva en vez de desbordar */
  .level{flex-wrap:wrap;align-items:flex-start;}
  .toolbar-search{width:100%;}

  /* tarjetas y formularios a una sola columna */
  .card-pad{padding:18px;}
  .form-grid.c2,.form-grid.c3{grid-template-columns:1fr;}
  .cols-4,.cols-3,.cols-2{grid-template-columns:1fr;}
}

/* tablet: rejillas amplias a 2 columnas */
@media(min-width:861px) and (max-width:1024px){
  .cols-4{grid-template-columns:repeat(2,1fr);}
}

/* móvil pequeño: KPIs y números más compactos */
@media(max-width:480px){
  .kpi .val{font-size:24px;}
  .page-title{font-size:21px;}
  .btn{padding:9px 14px;}
}