:root{--brand-primary:#1E63C6;--brand-secondary:#0B3C8A;--brand-accent:#C7CCD4;--brand-background:#F3F6FA;--brand-card:#FFFFFF;--brand-text:#263238;--brand-muted:#6B7785;--brand-danger:#B42318;--brand-danger-bg:#FEE4E2;--brand-warning-bg:#EAF2FF;--brand-font-heading:"Montserrat",Arial,sans-serif;--brand-font-body:"Inter",Arial,sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--brand-font-body);color:var(--brand-text);background:var(--brand-background)}.center-page{min-height:100vh;display:grid;place-items:center;padding:24px}.card{background:var(--brand-card);border-radius:18px;box-shadow:0 10px 30px rgba(38,50,56,.08);padding:26px;width:100%;max-width:650px;border:1px solid rgba(96,125,139,.16)}.pay-card{max-width:760px}.logo{width:180px;max-height:105px;object-fit:contain;display:block;margin-bottom:12px}h1,h2,h3{font-family:var(--brand-font-heading);margin-top:0}label{display:block;font-weight:700;margin:14px 0 6px}input,select,textarea{width:100%;padding:12px;border:1px solid #d6e2e7;border-radius:12px;font-size:15px;background:#FAFCFD;color:var(--brand-text)}textarea{font-family:Consolas,monospace}.button{display:inline-block;border:0;background:var(--brand-secondary);color:white;padding:12px 18px;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:700;margin-top:16px}.button.secondary{background:var(--brand-muted)}.button.danger{background:var(--brand-danger)}.button.smallBtn{padding:8px 12px;margin:0;font-size:13px}.muted{color:var(--brand-muted)}.small{font-size:13px}.message{color:var(--brand-danger);font-weight:700}.topbar{background:white;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 18px rgba(38,50,56,.07)}.brandHead{display:flex;align-items:center;gap:14px}.brandHead img{width:95px;height:42px;object-fit:contain}.badge{display:inline-block;margin-left:10px;padding:5px 10px;border-radius:999px;background:var(--brand-accent);color:var(--brand-text);font-size:12px;font-weight:700}.badge.prod{background:var(--brand-danger);color:white}.layout{padding:24px;display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:20px}.wide{grid-column:1/-1;max-width:none}.row{border:1px solid #e4eef2;border-radius:14px;padding:14px;margin-top:10px;display:flex;justify-content:space-between;gap:14px;align-items:center}.hidden{display:none!important}.resultBox{border:1px solid #d6e2e7;border-radius:12px;background:#FAFCFD;padding:14px;margin-top:12px}.warning{background:var(--brand-danger-bg);border:1px solid var(--brand-danger);color:var(--brand-danger);padding:12px;border-radius:12px;font-weight:700}.notice{background:var(--brand-warning-bg);border:1px solid var(--brand-accent);color:var(--brand-text);padding:12px;border-radius:12px;font-weight:700}.payBrand{display:flex;gap:18px;align-items:center;margin-bottom:20px}.payBrand img{width:150px;max-height:90px;object-fit:contain}.gridForm{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}@media(max-width:800px){.layout{grid-template-columns:1fr;padding:14px}.topbar{align-items:flex-start;flex-direction:column;gap:8px}.gridForm{grid-template-columns:1fr}.row{flex-direction:column;align-items:flex-start}}

.adminShell{display:grid;grid-template-columns:280px 1fr;gap:0;min-height:calc(100vh - 76px)}
.adminNav{background:#fff;border-right:1px solid #e4eef2;padding:18px;position:sticky;top:0;height:calc(100vh - 76px);overflow:auto}
.adminNav button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--brand-text);padding:12px 14px;border-radius:12px;margin-bottom:6px;font-weight:700;cursor:pointer}
.adminNav button.active,.adminNav button:hover{background:var(--brand-warning-bg);color:var(--brand-secondary)}
.adminContent{padding:24px;max-width:1380px;width:100%}
.adminTab{background:var(--brand-card);border:1px solid #e4eef2;border-radius:18px;padding:26px;box-shadow:0 10px 30px rgba(38,50,56,.06)}
.kpiGrid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin:22px 0}
.kpi{background:#FAFCFD;border:1px solid #e4eef2;border-radius:16px;padding:18px}
.kpi strong{display:block;font-size:28px;color:var(--brand-secondary)}
.kpi span{color:var(--brand-muted);font-weight:700}
.formGrid{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end}
.cardForm{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;background:#FAFCFD;border:1px solid #e4eef2;border-radius:16px;padding:18px;margin-top:12px}
.cardForm h2,.cardForm h3{grid-column:1/-1}
.cardForm textarea{min-height:80px}
.split{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(360px,1.25fr);gap:20px}
.previewCard,.diagBox{background:#FAFCFD;border:1px solid #e4eef2;border-radius:16px;padding:18px;margin-top:14px;white-space:pre-wrap;overflow:auto}
.rowActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){
  .adminShell{grid-template-columns:1fr}
  .adminNav{position:relative;height:auto;border-right:0;border-bottom:1px solid #e4eef2;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .adminContent{padding:14px}
  .kpiGrid,.formGrid,.cardForm,.split{grid-template-columns:1fr}
}


/* Ajuste v3.1.3 — generated payment link actions */
.linkResultCard{
  margin-top:16px;
  padding:18px;
  border:1px solid #dbe7ef;
  border-radius:18px;
  background:linear-gradient(135deg,#ffffff,#f7fbff);
  box-shadow:0 14px 36px rgba(15,23,42,.08);
}
.copyLinkBox{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  margin:12px 0;
}
.copyLinkBox input{
  font-family:ui-monospace,Consolas,monospace;
  font-size:13px;
  background:#f8fafc!important;
}
.rowActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
@media(max-width:700px){
  .copyLinkBox{grid-template-columns:1fr}
}


/* v4.1 — link lifecycle and testing actions */
.orderRow .rowActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
}
.smallBtn{
  min-height:34px!important;
  padding:7px 12px!important;
  font-size:13px!important;
}
.statusPill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:7px 12px;
  font-weight:900;
  border:1px solid #dbe7ef;
  background:#f8fafc;
}
.statusPill.paid{
  color:#065f46;
  background:#ecfdf5;
  border-color:#a7f3d0;
}
.paidOrder{
  background:linear-gradient(135deg,#ffffff,#f8fffb);
}


/* v4.3 — session expiration warning */
.sessionGuardOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.48);
  backdrop-filter:blur(8px);
}
.sessionGuardOverlay.hidden{display:none;}
.sessionGuardModal{
  width:min(460px,100%);
  padding:28px;
  border-radius:28px;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  border:1px solid rgba(121,139,160,.22);
  box-shadow:0 28px 90px rgba(15,23,42,.22);
  text-align:center;
}
.sessionGuardIcon{
  width:58px;
  height:58px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:20px;
  background:rgba(16,185,129,.10);
  font-size:28px;
}
.sessionGuardModal h2{
  margin:0 0 8px;
  font-size:26px;
}
.sessionGuardModal p{
  color:#475569;
}
.sessionGuardCountdown{
  margin-top:14px;
  padding:12px;
  border-radius:16px;
  background:#f1f5f9;
}
.sessionGuardActions{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:18px;
  flex-wrap:wrap;
}

/* v4.5.5 — login neutral, layout compacto y UI más aprovechada */
.loginNeutralPage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(circle at top left, rgba(30,99,198,.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(16,185,129,.16), transparent 32%),
    linear-gradient(135deg,#eef6fb,#f8fbff 48%,#eefbf5);
}
.loginShell{
  width:min(1060px,100%);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
  align-items:stretch;
}
.loginHero,.loginCard{
  border-radius:30px;
  border:1px solid rgba(148,163,184,.26);
  box-shadow:0 28px 90px rgba(15,23,42,.12);
}
.loginHero{
  padding:42px;
  color:#0f172a;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.38));
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.securityMark{width:74px;height:74px;border-radius:24px;display:grid;place-items:center;font-size:34px;background:white;box-shadow:0 16px 44px rgba(15,23,42,.12);margin-bottom:22px}
.loginHero h1{font-size:44px;line-height:1.03;margin-bottom:12px;letter-spacing:-.04em}
.loginHero p{font-size:18px;color:#475569;max-width:560px}
.loginBullets{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.loginBullets span,.neutralBadge{background:#fff;border:1px solid #dbe7ef;border-radius:999px;padding:9px 13px;font-weight:800;color:#334155;font-size:13px}.loginCard{background:white;padding:34px}.loginCardHeader h2{font-size:30px;margin:12px 0 4px}.passwordLine{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.loginButton{width:100%;margin-top:22px}.loginFooter{margin-top:18px;text-align:center}.layout{grid-template-columns:minmax(310px,.72fr) minmax(520px,1.28fr);align-items:start}.card:has(#quickForm){max-width:none}.card:has(#quickForm) form{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.card:has(#quickForm) form label{margin-top:8px}.card:has(#quickForm) form button{grid-column:1/-1;justify-self:start}.card:has(#quickForm) h2{font-size:28px}.card:has(#quickForm) .muted{max-width:760px}.card:has(#sandboxBtn){min-height:auto}.quickOpsHint{margin-top:12px;padding:12px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0}.actionFinding{border-left-color:#0ea5e9!important;background:#f0f9ff!important}.cybsSchemaFinding{border-left-color:#f97316!important;background:#fff7ed!important}.cybsControlPanel{margin-top:14px}.cybsConfigStatus{padding:12px;border:1px solid #dbe7ef;border-radius:14px;background:#f8fafc;margin-bottom:12px}.dbOn{color:#047857;font-weight:900}.dbOff{color:#b45309;font-weight:900}
@media(max-width:900px){.loginShell{grid-template-columns:1fr}.loginHero{padding:28px}.loginHero h1{font-size:34px}.card:has(#quickForm) form{grid-template-columns:1fr}}


/* v4.5.10 — landing neutral sin marca previa */
.landingNeutralPage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:
    radial-gradient(circle at top left, rgba(30,99,198,.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(14,165,233,.10), transparent 32%),
    linear-gradient(135deg,#eff4f8,#f9fbfd 48%,#eef3f7);
}
.landingShell{
  width:min(1160px,100%);
  display:grid;
  grid-template-columns:minmax(320px,1.05fr) minmax(320px,.95fr);
  gap:24px;
  align-items:stretch;
}
.landingHeroCard,.landingInfoCard{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(148,163,184,.24);
  border-radius:32px;
  box-shadow:0 28px 80px rgba(15,23,42,.10);
  backdrop-filter:blur(12px);
}
.landingHeroCard{
  padding:44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.landingIconWrap{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  flex-wrap:wrap;
}
.landingIcon{
  width:72px;
  height:72px;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-size:34px;
  background:linear-gradient(135deg,rgba(30,99,198,.12),rgba(14,165,233,.10));
  border:1px solid rgba(30,99,198,.16);
}
.landingBadge{
  display:inline-flex;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dbe7ef;
  color:#334155;
  font-weight:800;
  font-size:13px;
}
.landingHeroCard h1{
  font-size:48px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:14px;
}
.landingLead{
  font-size:19px;
  line-height:1.5;
  color:#475569;
  max-width:640px;
  margin:0 0 22px;
}
.landingPills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:22px;
}
.landingPills span{
  display:inline-flex;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  border:1px solid #dbe7ef;
  font-weight:700;
  color:#334155;
  font-size:13px;
}
.landingActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.landingPrimaryBtn{
  min-width:220px;
  text-align:center;
  font-size:16px;
  padding:14px 22px;
  border-radius:14px;
  box-shadow:0 14px 34px rgba(11,60,138,.18);
}
.landingFootnote{
  margin-top:18px;
  font-size:14px;
  color:#64748b;
}
.landingInfoCard{
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.landingInfoHeader h2{
  margin:14px 0 10px;
  font-size:30px;
  line-height:1.12;
}
.landingFeatureGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:22px;
}
.landingFeature{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  border:1px solid #e2e8f0;
}
.landingFeature strong{
  display:block;
  margin-bottom:8px;
  font-size:16px;
  color:#0f172a;
}
.landingFeature p{
  margin:0;
  color:#475569;
  line-height:1.5;
  font-size:14px;
}
@media(max-width:920px){
  .landingShell{grid-template-columns:1fr;}
  .landingHeroCard,.landingInfoCard{padding:28px;}
  .landingHeroCard h1{font-size:38px;}
  .landingLead{font-size:17px;}
}
@media(max-width:640px){
  .landingNeutralPage{padding:16px;}
  .landingHeroCard h1{font-size:32px;}
  .landingFeatureGrid{grid-template-columns:1fr;}
  .landingPrimaryBtn{width:100%;}
}


/* v4.5.12 — selector único de ambiente operativo en encabezado */
.panelTopbar{
  gap:16px;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(148,163,184,.24);
}
.brandContext{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.brandMetaLine{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.envSelectLabel{
  margin:0;
  font-size:12px;
  color:var(--brand-muted);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.envSelect{
  width:auto;
  min-width:150px;
  height:38px;
  padding:8px 34px 8px 12px;
  border-radius:999px;
  font-weight:900;
  border:1px solid color-mix(in srgb, var(--brand-primary) 34%, #d6e2e7);
  color:var(--brand-secondary);
  background:rgba(255,255,255,.92);
}
.topbarActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.panelMainCard{
  grid-column:1/-1;
  max-width:none;
}
.panelModeMessage{
  min-height:18px;
  margin-top:8px;
}
@media(max-width:800px){
  .brandMetaLine{align-items:flex-start;}
  .envSelect{width:100%;}
  .topbarActions{width:100%;}
}

/* v4.5.13 — feedback final UI */
[data-tab="webhooks"],
button[data-tab="webhooks"],
.adminNav button[onclick*="webhook"],
.adminNav button[onclick*="Webhooks"],
.adminNav button[onclick*="webhooks"]{
  display:none!important;
}
.recentOrderCompact{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 18px;
  align-items:center;
  padding:12px 14px!important;
  border-radius:14px!important;
}
.recentOrderCompact .recentMain{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  line-height:1.25;
}
.recentOrderCompact .recentOrderId{
  font-weight:900;
  color:var(--brand-secondary);
}
.recentOrderCompact .recentAmount{
  font-weight:900;
}
.recentOrderCompact .recentMeta{
  grid-column:1/-1;
  color:#475569;
  font-size:13px;
  line-height:1.35;
}
.recentOrderCompact .recentActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.recentOrderCompact .recentActions .button{
  margin-top:0!important;
  padding:8px 13px!important;
  border-radius:999px!important;
  min-height:34px!important;
}
.taxConfigMini{
  margin-top:14px;
  padding:16px;
  border:1px solid #dbe7ef;
  border-radius:18px;
  background:linear-gradient(135deg,#fff,#f8fbff);
}
.taxConfigMini table{
  width:100%;
  border-collapse:collapse;
}
.taxConfigMini th,.taxConfigMini td{
  padding:8px;
  border-bottom:1px solid #e2e8f0;
  text-align:left;
}
.prodAuthOverlay{
  position:fixed;
  inset:0;
  z-index:99998;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,23,42,.46);
  backdrop-filter:blur(7px);
}
.prodAuthOverlay.hidden{display:none!important;}
.prodAuthModal{
  width:min(460px,100%);
  background:white;
  border-radius:24px;
  padding:26px;
  border:1px solid #dbe7ef;
  box-shadow:0 28px 90px rgba(15,23,42,.22);
}
.prodAuthModal h2{margin:0 0 8px;}
.prodAuthModal .prodActions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
}
.matrixKpiGrid{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr));
  gap:12px;
  margin:18px 0;
}
.matrixKpi{
  padding:14px;
  border:1px solid #dbe7ef;
  border-radius:16px;
  background:#f8fafc;
}
.matrixKpi strong{
  display:block;
  font-size:24px;
  color:var(--brand-secondary);
}
.matrixCaseCard{
  border:1px solid #dbe7ef;
  border-radius:18px;
  padding:14px;
  margin:10px 0;
  background:#fff;
}
.matrixCaseHead{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  justify-content:space-between;
}
.matrixCaseBody{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
  font-size:13px;
  color:#334155;
}
.statusBlocked{
  color:#92400e!important;
  background:#fffbeb!important;
  border-color:#fcd34d!important;
}
@media(max-width:900px){
  .recentOrderCompact{grid-template-columns:1fr;}
  .recentOrderCompact .recentActions{justify-content:flex-start;}
  .matrixKpiGrid,.matrixCaseBody{grid-template-columns:1fr;}
}

/* v4.5.15 — configuración fiscal administrable */
.taxAdminRows{margin-top:16px}
.taxAdminTable{display:grid;gap:8px}
.taxAdminHead,.taxAdminRow{
  display:grid;
  grid-template-columns:1fr 1.4fr .55fr .85fr .65fr .65fr .55fr auto;
  gap:8px;
  align-items:center;
}
.taxAdminHead{
  font-weight:900;
  color:#334155;
  padding:0 8px;
}
.taxAdminRow{
  padding:10px;
  border:1px solid #dbe7ef;
  border-radius:16px;
  background:#fff;
}
.taxAdminRow input,.taxAdminRow select{min-height:38px;padding:8px}
@media(max-width:1100px){
  .taxAdminHead{display:none}
  .taxAdminRow{grid-template-columns:1fr 1fr}
}

/* v4.5.16 hidden admin modules */

/* v4.5.16 — módulos ocultos por decisión de alcance */
[data-tab="paymentCycle"],
[data-tab="testMatrix"],
#tab-paymentCycle,
#tab-testMatrix{
  display:none!important;
}
.diagSummary.blocked,
.resultCard.blocked{
  background:#fffbeb!important;
  border-color:#f59e0b!important;
  color:#78350f!important;
}

/* v4.5.18 — se elimina resumen fiscal estático del panel operativo */
#taxConfigHint{
  display:none!important;
}


/* v4.5.19 — Comunicación / Correos masivos */
.emailGrid{
  display:grid;
  grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr);
  gap:18px;
  align-items:start;
}
.formGrid.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:10px 16px;
}
.checkLine{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
}
.checkLine input{
  width:auto;
}
.buttonRow{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.simpleTable{
  width:100%;
  border-collapse:collapse;
}
.simpleTable th,.simpleTable td{
  padding:9px 10px;
  border-bottom:1px solid #e2e8f0;
  text-align:left;
  vertical-align:top;
}
.tableScroll{
  overflow:auto;
  max-height:420px;
}
#mailBodyText,#mailSignatureHtml{
  min-height:220px;
  font-family:Consolas,monospace;
}
#mailSignatureHtml{
  min-height:160px;
}
@media(max-width:1000px){
  .emailGrid,.formGrid.two{
    grid-template-columns:1fr;
  }
}


/* v4.5.20 — guardado de plantilla de correo */
#mailTemplateMsg{
  margin-top:8px;
}
#mailUnsubscribeText{
  min-height:70px;
  font-family:Consolas,monospace;
}


/* v4.5.21 — Responsive Mobile First Global */
html{
  -webkit-text-size-adjust:100%;
}
body{
  min-width:0;
  overflow-x:hidden;
}
img,svg,video,canvas{
  max-width:100%;
}
input,select,textarea,button{
  max-width:100%;
}
pre{
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
}

/* Base mobile-first sizing */
.card,.pay-card,.heroPanel,.adminContent .card{
  width:100%;
  max-width:100%;
}
.layout{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:14px;
}
.wide{
  grid-column:1/-1;
}

/* Header responsive */
.topbar,.modernTop{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:10px 12px;
}
.brandHead{
  min-width:0;
  flex:1 1 220px;
}
.brandHead img{
  width:56px;
  max-width:56px;
  height:42px;
  object-fit:contain;
}
.brandHead strong,
#topTitle{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topActions,.topbarUserArea{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  width:100%;
}
.contextChip,.topActions .button,.topbarUserArea .button,.topbarUserArea button{
  margin:0;
  white-space:nowrap;
}

/* Admin shell mobile first */
.adminShell{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  padding:0!important;
}
.adminNav,.modernNav{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:44vh;
  overflow:auto!important;
  display:flex!important;
  flex-direction:row!important;
  gap:8px!important;
  padding:10px!important;
  border-right:0!important;
  border-bottom:1px solid #dbe7ef!important;
  background:rgba(255,255,255,.96)!important;
  backdrop-filter:blur(10px);
}
.adminNav .navGroupTitle,.modernNav .navGroupTitle{
  flex:0 0 100%;
  padding:4px 2px!important;
  margin:2px 0!important;
}
.adminNav button,.modernNav button{
  flex:0 0 auto!important;
  min-width:max-content!important;
  margin:0!important;
  padding:10px 12px!important;
  border-radius:14px!important;
}
.adminContent{
  width:100%!important;
  min-width:0!important;
  padding:14px!important;
}
.adminTab{
  width:100%;
  min-width:0;
}
.adminTab h1{
  font-size:clamp(24px,7vw,38px);
  line-height:1.08;
}
.adminTab h2{
  font-size:clamp(20px,5vw,28px);
}

/* Forms mobile first */
.formGrid,.formGrid.two,.emailGrid,.filterBar,.quickFormGrid,.grid2,.grid3{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
}
label{
  min-width:0;
}
textarea{
  min-height:160px;
}
.button,.button.secondary,.button.danger{
  min-height:44px;
}
.buttonRow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.buttonRow .button,.buttonRow button{
  width:100%;
  text-align:center;
}

/* Email campaigns mobile first */
#mailBodyText,#mailSignatureHtml{
  min-height:240px;
}
#mailCampaignResult pre{
  max-height:340px;
  overflow:auto;
}
.tableScroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.simpleTable{
  min-width:760px;
}

/* Cards and rows compact on mobile */
.row,.resultBox,.taxAdminRow,.recentOrderCompact{
  flex-direction:column;
  align-items:stretch!important;
  gap:8px!important;
}
.recentOrderCompact{
  display:grid!important;
  grid-template-columns:1fr!important;
}
.recentOrderCompact .recentActions{
  justify-content:stretch!important;
  display:grid!important;
  grid-template-columns:1fr!important;
}
.recentOrderCompact .recentActions .button{
  width:100%;
}

/* Payment page mobile */
.center-page{
  padding:10px;
  align-items:start;
}
.pay-card{
  padding:16px!important;
  border-radius:18px!important;
}
.pay-card .logo{
  width:140px;
  height:auto;
}
.payment-container,.cybsBox,.microformShell{
  width:100%!important;
  max-width:100%!important;
  padding:12px!important;
}
#checkoutContainer,#microformContainer,#cardNumber-container,#securityCode-container{
  width:100%!important;
  max-width:100%!important;
}

/* Diagnostic/test console mobile */
.testConsoleGrid,.diagnosticsGrid,.matrixCaseBody{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
}
.codeBox,pre,textarea#requestEditor,textarea#responseBox{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:auto!important;
}

/* Tax admin responsive */
.taxAdminHead{
  display:none!important;
}
.taxAdminRow{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}
.taxAdminRow::before{
  content:"Impuesto";
  font-weight:900;
  color:var(--brand-secondary);
}

/* Better touch targets */
select,input,textarea{
  min-height:44px;
  font-size:16px;
}

/* Tablet and desktop expansion */
@media (min-width: 760px){
  .layout{
    grid-template-columns:repeat(2,minmax(280px,1fr));
    padding:22px;
  }
  .buttonRow{
    display:flex!important;
  }
  .buttonRow .button,.buttonRow button{
    width:auto;
  }
  .formGrid.two,.emailGrid{
    grid-template-columns:repeat(2,minmax(280px,1fr))!important;
  }
  .filterBar{
    grid-template-columns:repeat(3,minmax(180px,1fr))!important;
  }
  .recentOrderCompact{
    grid-template-columns:1fr auto!important;
  }
  .recentOrderCompact .recentActions{
    display:flex!important;
    justify-content:flex-end!important;
  }
  .recentOrderCompact .recentActions .button{
    width:auto;
  }
}

@media (min-width: 1100px){
  .topActions,.topbarUserArea{
    width:auto;
    justify-content:flex-end;
  }
  .brandHead img{
    width:74px;
    max-width:74px;
  }
  .adminShell{
    grid-template-columns:280px minmax(0,1fr)!important;
    align-items:start;
  }
  .adminNav,.modernNav{
    position:sticky!important;
    top:0!important;
    height:calc(100vh - 0px)!important;
    max-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    border-right:1px solid #dbe7ef!important;
    border-bottom:0!important;
  }
  .adminNav .navGroupTitle,.modernNav .navGroupTitle{
    flex:0 0 auto!important;
  }
  .adminNav button,.modernNav button{
    width:100%!important;
    min-width:0!important;
  }
  .adminContent{
    padding:24px!important;
  }
  .formGrid.two{
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
  }
  .emailGrid{
    grid-template-columns:minmax(320px,1.15fr) minmax(280px,.85fr)!important;
  }
  .taxAdminHead,.taxAdminRow{
    display:grid!important;
    grid-template-columns:1fr 1.4fr .55fr .85fr .65fr .65fr .55fr auto!important;
  }
  .taxAdminHead{
    display:grid!important;
  }
  .taxAdminRow::before{
    content:none;
  }
}

@media (max-width: 420px){
  .card,.pay-card{
    padding:14px!important;
    border-radius:16px!important;
  }
  .adminContent{
    padding:10px!important;
  }
  .adminNav button,.modernNav button{
    padding:9px 10px!important;
    font-size:13px!important;
  }
  .contextChip{
    font-size:12px!important;
    padding:6px 9px!important;
  }
  h1{
    font-size:26px!important;
  }
}


/* v4.5.22 — acceso seguro por roles */
.roleAccessNotice{
  margin-bottom:14px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#1e3a8a;
}
body.isViewerRole [data-admin-sensitive],
body.isOperationsRole [data-admin-sensitive]{
  display:none!important;
}


/* v4.5.23 — visibilidad de permisos por rol */
.roleAccessMatrixCard,.roleHelpBox{
  margin:18px 0;
  padding:20px;
  border:1px solid #dbe7ef;
  border-radius:22px;
  background:linear-gradient(135deg,#ffffff,#f8fbff);
  box-shadow:0 16px 42px rgba(15,23,42,.06);
}
.roleAccessHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.roleMatrixGrid,.roleMiniGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:14px;
  margin-top:16px;
}
.roleCard{
  padding:16px;
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
}
.roleCardTitle{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  margin-bottom:8px;
}
.roleDot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
}
.adminDot{background:#0f3b85;}
.opsDot{background:#0ea5e9;}
.viewerDot{background:#7c3aed;}
.rolePills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.rolePills span,.roleBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
}
.rolePills span{
  background:#f1f5f9;
  color:#334155;
  border:1px solid #e2e8f0;
}
.roleBadgeAdmin{background:#dbeafe;color:#0f3b85;border:1px solid #93c5fd;}
.roleBadgeOps{background:#e0f2fe;color:#075985;border:1px solid #7dd3fc;}
.roleBadgeViewer{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd;}
.adminRole{border-color:#bfdbfe;}
.opsRole{border-color:#bae6fd;}
.viewerRole{border-color:#ddd6fe;}
.rolePermissionTableWrap{
  margin-top:16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.rolePermissionTable{
  width:100%;
  min-width:760px;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid #e2e8f0;
  border-radius:16px;
  overflow:hidden;
}
.rolePermissionTable th,.rolePermissionTable td{
  padding:11px 12px;
  border-bottom:1px solid #e2e8f0;
  text-align:left;
}
.rolePermissionTable th{
  background:#f8fafc;
  color:#334155;
}
.okCell{
  color:#166534;
  background:#f0fdf4;
  font-weight:800;
}
.warnCell{
  color:#92400e;
  background:#fffbeb;
  font-weight:800;
}
.noCell{
  color:#991b1b;
  background:#fef2f2;
  font-weight:800;
}
.roleAccessNotice{
  border-left:6px solid #38bdf8!important;
}
@media(max-width:900px){
  .roleMatrixGrid,.roleMiniGrid{
    grid-template-columns:1fr;
  }
  .roleAccessMatrixCard,.roleHelpBox{
    padding:14px;
    border-radius:18px;
  }
}