:root{
  --bg:#f4f7fb;--panel:#fff;--panel2:#eef4fb;--ink:#0b172a;--muted:#627087;
  --line:#dbe4ef;--brand:#1664d8;--brand2:#0b3d91;--nav:#081426;
  --ok:#147a4b;--warn:#a85b00;--danger:#b42318;--shadow:0 10px 30px rgba(9,30,66,.08);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit}
.appShell{min-height:100vh}
.topbar{background:var(--nav);color:white;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.02em}
.logoMark{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#2b7fff,#0d4db5);display:grid;place-items:center;color:white;font-weight:900}
.topActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.container{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 56px}
.hero{background:linear-gradient(135deg,#081426 0%,#10366f 65%,#1664d8 100%);color:#fff;border-radius:28px;padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;box-shadow:var(--shadow);overflow:hidden}
.hero h1{font-size:clamp(34px,5vw,64px);line-height:.95;margin:0 0 16px;letter-spacing:-.055em}
.hero p{font-size:18px;color:#d8e6ff;max-width:680px}
.heroCard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.17);border-radius:22px;padding:24px;backdrop-filter:blur(10px)}
.grid{display:grid;gap:16px}
.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card h2,.card h3{margin-top:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.bigNumber{font-size:28px;font-weight:850;letter-spacing:-.03em}
.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px}
.btn.primary{background:var(--brand);color:white}
.btn.dark{background:var(--nav);color:white}
.btn.soft{background:#e8f1ff;color:#0c4ea5}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.danger{background:#fff0ef;color:var(--danger);border:1px solid #ffd4cf}
.btn.ok{background:#e8f8f0;color:var(--ok)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{display:grid;gap:7px}
.field label{font-size:13px;font-weight:760;color:#33445e}
.input,.select,.textarea{width:100%;border:1px solid #cbd8e8;background:#fff;border-radius:12px;padding:12px 13px;outline:none;min-height:44px}
.input:focus,.select:focus,.textarea:focus{border-color:#5b98ed;box-shadow:0 0 0 3px rgba(22,100,216,.11)}
.textarea{min-height:90px;resize:vertical}
.pillRow{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 13px;font-weight:700;color:#3e4d62}
.pill.active{background:var(--nav);color:white;border-color:var(--nav)}
.slot{border:1px solid #cddbea;border-radius:12px;padding:10px 12px;background:white;font-weight:720}
.slot.active{background:#e7f0ff;border-color:#4b88df;color:#0e4b9b}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 18px}
.tab{border:0;background:#e9eff7;color:#3c4b61;padding:10px 13px;border-radius:11px;font-weight:750}
.tab.active{background:var(--nav);color:white}
.sectionHead{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.list{display:grid;gap:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#fff}
.rowMain{min-width:0}
.rowTitle{font-weight:800}
.rowMeta{font-size:13px;color:var(--muted);margin-top:3px}
.badge{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:12px;font-weight:800;background:#edf2f7;color:#42536a}
.badge.pending{background:#fff5db;color:#825200}.badge.confirmed{background:#e6f2ff;color:#0b559e}.badge.completed{background:#e6f8ee;color:#16653f}.badge.cancelled,.badge.no_show{background:#ffecea;color:#9e241c}
.notice{border-radius:14px;padding:13px 15px;background:#eaf3ff;color:#0c4d9c;border:1px solid #c9e0ff}
.notice.warn{background:#fff6e7;color:#875600;border-color:#ffe1a8}
.notice.danger{background:#fff0ef;color:#9e241c;border-color:#ffd5d1}
.sidebarLayout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px}
.side{background:#0c1c31;color:#d6e2f0;border-radius:20px;padding:12px;height:max-content;position:sticky;top:86px}
.side button{width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:11px 12px;border-radius:10px;font-weight:700;margin:2px 0}
.side button.active{background:#1c3659;color:#fff}
.tableWrap{overflow:auto;border:1px solid var(--line);border-radius:14px}
table{border-collapse:collapse;width:100%;min-width:720px;background:white}
th,td{padding:12px 13px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#f7f9fc;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#5d6c82}
.modalBack{position:fixed;inset:0;background:rgba(7,18,32,.55);display:grid;place-items:center;padding:20px;z-index:50}
.modal{width:min(720px,100%);max-height:85vh;overflow:auto;background:#fff;border-radius:22px;padding:22px}
.check{display:flex;align-items:center;gap:9px}
.check input{width:18px;height:18px}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.empty{padding:32px;text-align:center;color:var(--muted);border:1px dashed #c8d5e5;border-radius:16px;background:#fbfcfe}
.boot{min-height:100vh;display:grid;place-items:center;align-content:center;gap:8px;text-align:center}
.toast{position:fixed;right:18px;bottom:18px;background:#0b172a;color:white;padding:12px 16px;border-radius:12px;z-index:100;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s;max-width:min(420px,calc(100% - 36px))}
.toast.show{opacity:1;transform:none}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:28px}
  .sidebarLayout{grid-template-columns:1fr}
  .side{position:static;display:flex;overflow:auto}
  .side button{white-space:nowrap;width:auto}
  .grid4,.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .container{width:min(100% - 20px,1180px);padding-top:18px}
  .topbar{padding:10px 12px}
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .hero{border-radius:20px;padding:22px}
  .row{align-items:flex-start;flex-direction:column}
  .row .pillRow{width:100%}
  .btn{width:100%}
  .topActions .btn{width:auto}
}


/* =========================================================
   CitaFlow Web V2 - menú desplegable / colapsable
   ========================================================= */
.ownerContainer{padding-top:22px}
.ownerWorkspace{
  display:grid;
  grid-template-columns:272px minmax(0,1fr);
  gap:22px;
  align-items:start;
  transition:grid-template-columns .24s ease,gap .24s ease;
}
.ownerWorkspace.menu-closed{
  grid-template-columns:0 minmax(0,1fr);
  gap:0;
}
.ownerMain{min-width:0}
.menuPanel{
  min-width:0;
  width:272px;
  position:sticky;
  top:86px;
  border-radius:24px;
  padding:14px;
  color:#dfe9f6;
  background:
    radial-gradient(circle at 10% 0%,rgba(43,127,255,.22),transparent 32%),
    linear-gradient(165deg,#0b1a2d 0%,#0c213b 55%,#0a1729 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 18px 45px rgba(8,20,38,.16);
  overflow:hidden;
  opacity:1;
  transform:translateX(0);
  transition:opacity .2s ease,transform .24s ease,width .24s ease,padding .24s ease;
}
.menuPanel.closed{
  width:0;
  padding-left:0;
  padding-right:0;
  opacity:0;
  transform:translateX(-18px);
  pointer-events:none;
}
.menuPanelHead{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 34px;
  gap:10px;
  align-items:center;
  padding:5px 3px 10px;
}
.menuBusinessAvatar{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#3588ff,#1257bc);
  color:white;font-weight:900;letter-spacing:-.03em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 18px rgba(4,70,170,.28)
}
.menuBusinessText{min-width:0}
.menuBusinessName{
  color:#fff;font-size:14px;font-weight:850;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.menuBusinessMeta{font-size:11px;color:#8fa6c2;margin-top:2px}
.menuCloseBtn{
  width:34px;height:34px;border:0;border-radius:10px;
  background:rgba(255,255,255,.07);color:#c7d5e5;
  font-size:22px;line-height:1;display:grid;place-items:center
}
.menuCloseBtn:hover{background:rgba(255,255,255,.12);color:#fff}
.menuDivider{height:1px;background:rgba(255,255,255,.08);margin:2px 2px 10px}
.menuNav{display:grid;gap:5px}
.menuItem{
  width:100%;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:#c7d5e5;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 16px;
  gap:10px;
  align-items:center;
  text-align:left;
  padding:9px 9px;
  transition:background .16s ease,border-color .16s ease,transform .16s ease
}
.menuItem:hover{background:rgba(255,255,255,.055);transform:translateX(2px)}
.menuItem.active{
  color:#fff;
  background:linear-gradient(100deg,rgba(41,122,238,.3),rgba(41,122,238,.12));
  border-color:rgba(93,157,255,.28)
}
.menuItemIcon{
  width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.065);
  color:#a9c5e8;font-size:11px;font-weight:900;letter-spacing:.04em
}
.menuItem.active .menuItemIcon{
  background:#2b78e4;color:#fff;
  box-shadow:0 7px 17px rgba(13,82,178,.32)
}
.menuItemText{display:grid;gap:2px;min-width:0}
.menuItemText b{font-size:13px}
.menuItemText small{font-size:10px;color:#8198b5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menuItem.active .menuItemText small{color:#b9d2f2}
.menuItemArrow{color:#718aa8;font-size:20px}
.menuItem.active .menuItemArrow{color:#dfeeff}
.menuFooter{
  margin-top:11px;padding:10px 8px 3px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;gap:8px;align-items:center;
  font-size:10px;color:#7f96b2
}
.menuStatusDot{width:7px;height:7px;border-radius:50%;background:#45ce88;box-shadow:0 0 0 3px rgba(69,206,136,.1)}
.ownerSectionBar{
  min-height:66px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.menuLauncher{
  border:1px solid #d5e1ef;
  background:linear-gradient(180deg,#fff,#f7fafe);
  border-radius:17px;
  min-width:142px;
  padding:9px 13px;
  display:flex;
  gap:11px;
  align-items:center;
  text-align:left;
  color:var(--ink);
  box-shadow:0 6px 18px rgba(9,30,66,.055);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease
}
.menuLauncher:hover{transform:translateY(-1px);border-color:#b6cbe3;box-shadow:0 9px 24px rgba(9,30,66,.08)}
.menuLauncherIcon{
  width:38px;height:38px;border-radius:12px;
  background:#0d213b;display:grid;place-content:center;gap:4px;
  box-shadow:0 5px 14px rgba(10,32,62,.16)
}
.menuLauncherIcon span{
  width:16px;height:2px;border-radius:2px;background:#fff;display:block
}
.menuLauncherText{display:grid;line-height:1.05}
.menuLauncherText small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#7a899d}
.menuLauncherText b{font-size:14px;margin-top:3px}
.ownerCurrentSection{
  min-width:0;
  display:grid;
  padding-left:12px;
  border-left:1px solid var(--line)
}
.ownerCurrentSection small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#8290a3}
.ownerCurrentSection strong{font-size:18px;letter-spacing:-.025em;margin-top:2px}
.menuTopBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);
  color:#fff;
  border-radius:11px;
  min-height:38px;
  padding:8px 11px;
  display:flex;align-items:center;gap:8px;
  font-weight:760
}
.menuTopBtn:hover{background:rgba(255,255,255,.11)}
.menuHamburger{display:grid;gap:3px}
.menuHamburger i{display:block;width:15px;height:2px;background:#fff;border-radius:2px}
.businessTopName{font-size:12px;color:#cbd9ea;font-weight:750;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topLogoutBtn{color:white!important;border-color:#34506f!important}
.menuBackdrop{display:none}

@media(max-width:900px){
  .ownerContainer{padding-top:14px}
  .ownerWorkspace,.ownerWorkspace.menu-open,.ownerWorkspace.menu-closed{
    display:block;
  }
  .menuPanel{
    position:fixed;
    z-index:60;
    top:72px;
    left:12px;
    width:min(330px,calc(100% - 24px));
    max-height:calc(100% - 88px);
    overflow:auto;
    opacity:1;
    transform:translateY(0) scale(1);
    transform-origin:top left;
    transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
  }
  .menuPanel.closed{
    width:min(330px,calc(100% - 24px));
    padding:14px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.985);
    pointer-events:none;
  }
  .menuBackdrop{
    display:block;
    position:fixed;inset:0;z-index:55;
    background:rgba(3,12,24,.42);
    backdrop-filter:blur(2px);
    opacity:0;visibility:hidden;
    transition:opacity .18s ease,visibility .18s ease;
  }
  .menuBackdrop.show{opacity:1;visibility:visible}
  .ownerSectionBar{margin-bottom:14px}
  .businessTopName{display:none}
}
@media(max-width:620px){
  .topPublicBtn{display:none}
  .menuTopBtn span:last-child{display:none}
  .menuTopBtn{padding:8px 10px}
  .ownerSectionBar{align-items:center}
  .menuLauncher{min-width:126px;padding:8px 11px}
  .ownerCurrentSection strong{font-size:16px}
}


/* =========================================================
   CitaFlow Web V3 - Código cliente + Caja
   ========================================================= */
.clientCodeEntry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.portalEyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:900}
.portalBusiness{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.portalAppointment{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px;
  background:linear-gradient(180deg,#fff,#fbfdff)
}
.portalDateBlock{
  min-height:58px;border-radius:13px;background:#eef5ff;
  display:grid;place-content:center;text-align:center;
  color:#174f99
}
.portalDateBlock span{font-size:11px;text-transform:uppercase;font-weight:800}
.portalDateBlock b{font-size:15px;margin-top:2px}
.bookingSuccess{text-align:center;max-width:520px}
.successCheck{
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;margin:0 auto 12px;
  background:#e8f8f0;color:#147a4b;font-size:30px;font-weight:900
}
.clientCodeBox{
  margin:18px 0;padding:18px;border-radius:18px;
  background:linear-gradient(145deg,#f0f6ff,#e7f0ff);
  border:1px solid #cadffc
}
.clientCodeValue{
  font-size:clamp(24px,5vw,38px);font-weight:950;
  letter-spacing:.06em;color:#0b438e;margin:7px 0
}
.clientMiniCode{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 12px;border-radius:12px;background:#f2f7ff;
  border:1px solid #d7e7fb;margin-bottom:14px
}
.clientMiniCode span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#73839a;font-weight:800}
.clientMiniCode b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#104b97;letter-spacing:.04em}
.accountSummaryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.accountSummaryCard{
  border:1px solid var(--line);border-radius:18px;background:#fff;
  padding:17px;text-align:left;color:var(--ink);
  box-shadow:var(--shadow);transition:.16s
}
.accountSummaryCard:hover{transform:translateY(-1px);border-color:#b9cde5}
.accountSummaryCard.active{border-color:#4b88df;box-shadow:0 0 0 3px rgba(22,100,216,.08),var(--shadow)}
.accountSummaryHead{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px;font-weight:750}
.accountNet{font-size:28px;font-weight:900;letter-spacing:-.04em;margin:8px 0}
.accountMini{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;font-weight:800}
.accountMini .income,.moneyIncome{color:#147a4b}
.accountMini .expense,.moneyExpense{color:#b42318}
.accountLedger{display:grid;gap:9px;max-height:520px;overflow:auto;padding-right:2px}
.ledgerRow{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)
}
.ledgerType{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-weight:900}
.ledgerType.income{background:#e8f8f0;color:#147a4b}
.ledgerType.expense{background:#fff0ef;color:#b42318}
@media(max-width:800px){
  .accountSummaryGrid{grid-template-columns:1fr}
  .portalAppointment{grid-template-columns:60px minmax(0,1fr)}
  .portalAppointment>div:last-child{grid-column:2}
}
@media(max-width:620px){
  .clientCodeEntry{grid-template-columns:1fr}
  .portalBusiness .btn{width:100%}
  .clientStats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ledgerRow{grid-template-columns:32px minmax(0,1fr)}
  .ledgerRow>b{grid-column:2}
}


/* =========================================================
   CitaFlow Web V4 - código cliente guardado en el teléfono
   ========================================================= */
.savedPhoneHero{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;align-items:center;
  padding:14px;border-radius:16px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16)
}
.savedPhoneIcon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:#dff7e9;color:#147a4b;font-size:22px;font-weight:950
}
.savedPhoneLabel{
  color:#8fc4ff;font-weight:900;letter-spacing:.07em;font-size:9px
}
.savedBusinessesList{display:grid;gap:7px;margin-top:9px}
.savedBusinessMini{
  display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:7px;align-items:center
}
.savedBusinessOpen{
  border:1px solid rgba(255,255,255,.11);
  border-radius:12px;background:rgba(255,255,255,.055);
  color:#fff;text-align:left;padding:9px 11px;
  display:flex;justify-content:space-between;gap:12px;align-items:center
}
.savedBusinessOpen small{color:#9eb5d0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.savedCodeRemove{
  width:32px;height:32px;border:0;border-radius:10px;
  background:rgba(255,255,255,.06);color:#aebfd2;font-size:19px
}
.savedCodeRemove:hover{background:rgba(255,255,255,.12);color:#fff}
.savedForgetLink{
  width:100%;border:0;background:transparent;color:#9db4cf;
  font-size:11px;text-decoration:underline;margin-top:9px;padding:4px
}
.deviceSavedNotice{
  margin-top:16px;padding:12px 13px;border-radius:14px;
  display:grid;grid-template-columns:32px minmax(0,1fr) auto;
  gap:10px;align-items:center;
  background:#eef9f3;border:1px solid #cfeedd
}
.deviceSavedCheck{
  width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:#d9f4e5;color:#147a4b;font-weight:950
}
.savedForgetButton{
  border:0;background:transparent;color:#6e7d91;
  font-size:11px;text-decoration:underline;padding:8px
}
.autoSavedBadge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 10px;margin:4px 0 8px;border-radius:999px;
  background:#dff7e9;color:#147a4b;font-size:12px;font-weight:850
}
@media(max-width:620px){
  .savedPhoneHero{grid-template-columns:42px minmax(0,1fr)}
  .savedPhoneHero>.btn{grid-column:1/-1;width:100%}
  .savedBusinessOpen{align-items:flex-start;flex-direction:column;gap:3px}
  .deviceSavedNotice{grid-template-columns:32px minmax(0,1fr)}
  .savedForgetButton{grid-column:2;justify-self:start;padding-left:0}
}


/* =========================================================
   CitaFlow Web V5 - Categorías + guía de negocio
   ========================================================= */
.setupContainer{max-width:1040px}
.setupHeading{display:flex;gap:14px;align-items:flex-start;margin:6px 0 18px}
.setupHeading.compact{margin-top:30px}
.setupHeading h1,.setupHeading h2{margin:0 0 5px;letter-spacing:-.035em}
.setupStep{
  width:38px;height:38px;flex:0 0 38px;border-radius:13px;
  display:grid;place-items:center;background:#0d213b;color:#fff;
  font-weight:900;box-shadow:0 7px 18px rgba(10,32,62,.12)
}
.categoryPicker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.categoryCard{
  position:relative;min-height:112px;padding:16px 15px;
  display:grid;align-content:center;gap:5px;text-align:left;
  border:1px solid #d9e3ef;border-radius:18px;background:#fff;color:var(--ink);
  box-shadow:0 6px 20px rgba(9,30,66,.04);
  transition:.16s
}
.categoryCard:hover{transform:translateY(-2px);border-color:#b7cce5;box-shadow:0 10px 24px rgba(9,30,66,.07)}
.categoryCard.active{border-color:#4b88df;background:linear-gradient(145deg,#f6faff,#eaf3ff);box-shadow:0 0 0 3px rgba(22,100,216,.07)}
.categoryCard b{font-size:15px}
.categoryCard small{color:var(--muted);line-height:1.35}
.categoryRadio{
  position:absolute;right:12px;top:12px;width:18px;height:18px;
  border-radius:50%;border:2px solid #c1cedd;background:#fff
}
.categoryCard.active .categoryRadio{border:5px solid var(--brand)}
.setupGuidePreview{
  margin-top:14px;border-radius:20px;padding:18px;
  background:linear-gradient(135deg,#0c1d33,#113663);
  color:#fff;border:1px solid rgba(255,255,255,.07);
  box-shadow:0 12px 30px rgba(8,20,38,.1)
}
.setupGuideTop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.setupGuideTop b{font-size:18px}
.setupCategoryTag{
  display:inline-flex;padding:5px 9px;border-radius:999px;
  background:#dceaff;color:#0b4d9f;font-size:11px;font-weight:900
}
.setupGuidePreview p{color:#d3e0f0;line-height:1.55}
.setupGuideMiniGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.setupGuideMiniGrid>div{padding:11px;border-radius:13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07)}
.setupGuideMiniGrid span{display:block;color:#8fa9c9;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:850;margin-bottom:4px}
.setupGuideMiniGrid b{font-size:12px;line-height:1.35}
.setupBusinessCard{margin-bottom:44px}
.setupCreateBtn{width:100%;margin-top:18px;min-height:50px}
.guideEyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--brand);font-weight:900}
.guideCategoryBadge{padding:8px 12px;border-radius:999px;background:#e9f2ff;color:#0d529e;font-size:12px;font-weight:850}
.guideChecklist{background:linear-gradient(180deg,#fff,#fbfdff)}
.guideSteps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.guideStep{padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;gap:8px}
.guideStep span{width:25px;height:25px;border-radius:8px;display:grid;place-items:center;background:#0d213b;color:#fff;font-size:11px;font-weight:900}
.guideStep b{font-size:12px;line-height:1.35}
.guideActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}
.guideGrid{align-items:stretch}
.guideInfoCard{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.guideInfoCard h3{margin-bottom:7px}
.guideInfoCard p{color:#526278;line-height:1.55;margin-top:0}
.guideCardIcon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:#eaf3ff;color:#0e52a2;font-weight:950;font-size:11px;letter-spacing:.04em
}
.guideWide{grid-column:1/-1}
.guideServiceList{display:grid;gap:7px}
.guideServiceList>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.guideServiceList span{color:var(--muted);font-size:12px;white-space:nowrap}
.guideBulletList{margin:0;padding-left:18px;color:#526278;line-height:1.6}
.guideBulletList li+li{margin-top:7px}
.categoryOverviewCard{
  margin-top:18px;padding:16px 18px;border-radius:18px;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  border:1px solid #d6e4f5;background:linear-gradient(100deg,#f7fbff,#edf5ff)
}
.categoryOverviewCard p{margin:5px 0 0;color:#66768c;font-size:13px}
.profileCategoryHint{
  border-radius:12px;padding:10px 12px;background:#f4f8fd;
  border:1px solid #dde8f4;color:#627087;font-size:12px;line-height:1.5
}
.profileGuideBanner{
  margin-top:16px;padding:14px 16px;border:1px solid #d7e5f6;border-radius:16px;
  display:flex;justify-content:space-between;gap:15px;align-items:center;background:#f7fbff
}
.profileGuideBanner span{display:block;font-size:9px;color:#73849a;text-transform:uppercase;letter-spacing:.08em;font-weight:850}
.profileGuideBanner b{display:block;margin-top:3px}

@media(max-width:900px){
  .categoryPicker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guideSteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setupGuideMiniGrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .categoryPicker{grid-template-columns:1fr}
  .categoryCard{min-height:94px}
  .guideSteps{grid-template-columns:1fr}
  .guideInfoCard{grid-template-columns:38px minmax(0,1fr)}
  .guideCardIcon{width:38px;height:38px}
  .categoryOverviewCard,.profileGuideBanner{align-items:flex-start;flex-direction:column}
  .categoryOverviewCard .btn,.profileGuideBanner .btn{width:100%}
}

/* CitaFlow Web V6 - Reportes */
.reportRangeLine{font-size:11px;color:#7b8a9e;margin:-10px 0 14px;text-transform:uppercase;letter-spacing:.07em;font-weight:800}
.reportKpi{min-height:124px}.reportKpiFoot{font-size:11px;color:#8290a3;margin-top:8px}
.reportMiniKpi{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:72px}
.reportMiniKpi span{font-size:12px;color:#6c7a8f}.reportMiniKpi b{font-size:22px}.reportMiniKpi b small{font-size:10px;color:#8a98aa}
.reportBars{display:grid;gap:13px}.reportBarRow{display:grid;gap:6px}
.reportBarHead{display:flex;justify-content:space-between;gap:14px;font-size:12px}.reportBarHead span{font-weight:750;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reportBarHead b{color:#5f7086;font-size:11px;white-space:nowrap}
.reportBarTrack{height:9px;border-radius:999px;background:#edf2f7;overflow:hidden}.reportBarFill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1557b0,#2b7fff);min-width:4px}
.reportStatusGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.reportStatusGrid>div{display:grid;justify-items:center;gap:4px;padding:12px 6px;border:1px solid var(--line);border-radius:13px;background:#fbfcfe}
.reportStatusGrid b{font-size:21px}.reportStatusGrid small{color:#738197;font-size:10px;text-align:center}.statusDot{width:8px;height:8px;border-radius:50%}.statusDot.confirmed{background:#2d7dcc}.statusDot.pending{background:#d69a18}.statusDot.completed{background:#2f9d62}.statusDot.cancelled{background:#d55d54}.statusDot.no_show{background:#8e5ab8}
.reportOverviewBanner{margin-top:18px;padding:16px 18px;border-radius:18px;display:flex;justify-content:space-between;gap:18px;align-items:center;border:1px solid #d8e6f6;background:linear-gradient(100deg,#fff,#f2f7fd)}
.reportOverviewBanner p{margin:5px 0 0;color:#68788e;font-size:13px}
@media(max-width:900px){.reportStatusGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.reportPeriods{width:100%}.reportPeriods .pill{flex:1}.reportStatusGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.reportOverviewBanner{flex-direction:column;align-items:flex-start}.reportOverviewBanner .btn{width:100%}}


/* =========================================================
   CitaFlow Web V7 - Recordatorios + WhatsApp
   ========================================================= */
.reminderOverviewBanner{
  margin-top:14px;padding:17px 18px;border-radius:18px;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  border:1px solid #cfe8dd;
  background:linear-gradient(105deg,#f7fffb,#ebfaf3)
}
.reminderOverviewBanner b{display:block;margin-top:3px}
.reminderOverviewBanner p{margin:5px 0 0;color:#62766e;font-size:13px}
.reminderKpi{min-height:112px}
.reminderList{display:grid;gap:12px}
.reminderCard{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px;box-shadow:0 5px 18px rgba(9,30,66,.035)
}
.reminderCardTop{display:flex;justify-content:space-between;gap:16px}
.reminderRight{display:flex;align-items:flex-end;gap:7px;flex-direction:column}
.reminderDayTag{
  display:inline-flex;padding:5px 9px;border-radius:999px;
  background:#eef5ff;color:#175cae;font-size:10px;font-weight:850
}
.reminderSent{
  margin-top:12px;padding:9px 11px;border-radius:12px;
  display:flex;gap:9px;align-items:center;background:#fff8ed;border:1px solid #f3dfbf
}
.reminderSent.sent{background:#effaf5;border-color:#cce8da}
.reminderSent>span{font-size:15px;font-weight:900}
.reminderSent div{display:grid;gap:1px}
.reminderSent b{font-size:11px}
.reminderSent small{font-size:10px;color:#708095}
.reminderActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;align-items:center}
.reminderMore{position:relative}
.reminderMore summary{
  cursor:pointer;list-style:none;padding:9px 12px;border:1px solid var(--line);
  border-radius:10px;font-size:12px;font-weight:750;background:#fff
}
.reminderMore summary::-webkit-details-marker{display:none}
.reminderMoreMenu{
  position:absolute;right:0;top:42px;z-index:20;min-width:180px;
  display:grid;gap:7px;padding:9px;background:#fff;border:1px solid var(--line);
  border-radius:13px;box-shadow:0 12px 28px rgba(9,30,66,.14)
}
.btn.waQuick{
  background:#eaf9f0;border-color:#bfe3cd;color:#14753f;font-weight:800
}
.agendaAppointment{
  display:grid;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)
}
.agendaAppointment:last-child{border-bottom:0}
.agendaAppointmentActions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.agendaReminderLine{font-size:10px;color:#9b7022;margin-top:6px}
.agendaReminderLine.sent{color:#258153}
.btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:620px){
  .reminderOverviewBanner{flex-direction:column;align-items:flex-start}
  .reminderOverviewBanner .btn{width:100%}
  .reminderCardTop{flex-direction:column}
  .reminderRight{align-items:flex-start;flex-direction:row}
  .reminderActions .btn{flex:1 1 135px}
  .reminderMore{width:100%}
  .reminderMore summary{text-align:center}
  .reminderMoreMenu{position:static;margin-top:7px}
}


/* =========================================================
   CitaFlow Web V8 - Portal del cliente mejorado
   ========================================================= */
.portalPrivacyNote{
  margin:12px 0 0;padding:10px 12px;border-radius:12px;
  display:flex;gap:9px;align-items:center;background:#f7f9fc;border:1px solid #e2e8f0
}
.portalPrivacyNote div{display:grid;gap:1px}
.portalPrivacyNote b{font-size:11px}
.portalPrivacyNote small{font-size:10px;color:#718096}
.portalAppointmentsV8{display:grid;gap:13px}
.portalAppointmentV8{
  border:1px solid var(--line);border-radius:18px;background:#fff;padding:15px;
  box-shadow:0 5px 18px rgba(9,30,66,.035)
}
.portalAppointmentHead{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center
}
.portalPaymentBox{
  margin-top:13px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #e3e9f1;border-radius:13px;overflow:hidden;background:#fbfcfe
}
.portalPaymentBox>div{padding:10px 12px;border-right:1px solid #e3e9f1}
.portalPaymentBox>div:last-child{border-right:0}
.portalPaymentBox span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#7b899c;font-weight:800}
.portalPaymentBox b{display:block;margin-top:2px;font-size:14px}
.portalPaymentBox .hasBalance b{color:#a75b1c}
.portalPaymentBox .paidBalance b{color:#278353}
.clientConfirmationState{
  margin-top:12px;padding:10px 12px;border-radius:12px;
  display:flex;gap:9px;align-items:center;background:#fff8ec;border:1px solid #f0dbb8
}
.clientConfirmationState.confirmed{background:#edf9f3;border-color:#c9e7d7}
.clientConfirmationState>span{font-size:17px;font-weight:900}
.clientConfirmationState div{display:grid;gap:1px}
.clientConfirmationState b{font-size:11px}
.clientConfirmationState small{font-size:10px;color:#6c7a8d}
.clientRequestState{
  margin-top:10px;padding:10px 12px;border-radius:12px;display:grid;gap:2px
}
.clientRequestState b{font-size:11px}
.clientRequestState span,.clientRequestState small{font-size:10px;color:#69778b}
.pendingRequest{background:#eef5ff;border:1px solid #d2e3fa}
.acceptedRequest{background:#edf9f3;border:1px solid #c9e7d7}
.rejectedRequest{background:#fff3f2;border:1px solid #f0d1cf}
.portalClientActions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.clientRequestModal{max-width:620px}
.clientRequestsPanel{border-color:#d8e6f6;background:linear-gradient(180deg,#fff,#fbfdff)}
.requestCountBadge{
  min-width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  background:#0e5ab8;color:white;font-size:13px;font-weight:900
}
.ownerClientRequests{display:grid;gap:10px}
.ownerClientRequestCard{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:13px;border:1px solid #dfe7f1;border-radius:15px;background:white
}
.ownerRequestIcon{
  width:42px;height:42px;border-radius:13px;background:#edf5ff;color:#145daf;
  display:grid;place-items:center;font-size:22px;font-weight:900
}
.ownerRequestMain{min-width:0}
.ownerRequestedTime{
  display:inline-flex;margin:6px 0;padding:5px 8px;border-radius:8px;
  background:#eef5ff;color:#315f94;font-size:11px
}
.ownerRequestActions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:700px){
  .portalAppointmentHead{grid-template-columns:auto 1fr}
  .portalAppointmentHead>div:last-child{grid-column:1/-1}
  .portalPaymentBox{grid-template-columns:1fr}
  .portalPaymentBox>div{border-right:0;border-bottom:1px solid #e3e9f1}
  .portalPaymentBox>div:last-child{border-bottom:0}
  .portalClientActions .btn{width:100%}
  .ownerClientRequestCard{grid-template-columns:42px 1fr}
  .ownerRequestActions{grid-column:1/-1;justify-content:stretch}
  .ownerRequestActions .btn{flex:1}
}


/* =========================================================
   CitaFlow Web V9 - Comisiones
   ========================================================= */
.commissionOverviewBanner{
  margin-top:14px;padding:17px 18px;border-radius:18px;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  border:1px solid #e0ddf7;background:linear-gradient(105deg,#fcfbff,#f4f1ff)
}
.commissionOverviewBanner b{display:block;margin-top:3px}
.commissionOverviewBanner p{margin:5px 0 0;color:#716b86;font-size:13px}
.commissionKpi{min-height:116px}
.commissionKpiFoot{font-size:11px;color:#8290a3;margin-top:7px}
.commissionStaffSettings{display:grid;gap:10px}
.commissionStaffRow{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#fbfcfe
}
.commissionPercentEditor{display:flex;align-items:center;gap:7px}
.commissionPercentEditor .input{width:92px;text-align:right}
.commissionPercentEditor>span{font-weight:850;color:#69788c}
.commissionStaffSummary{display:grid;gap:10px}
.commissionSummaryRow{
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff
}
.commissionSummaryRow>div:first-child{display:flex;justify-content:space-between;gap:10px}
.commissionSummaryRow>div:first-child span{font-size:11px;color:#7a899d}
.commissionNumbers{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px
}
.commissionNumbers>span{
  display:grid;gap:2px;padding:8px;border-radius:10px;background:#f6f8fb;
  font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:#7a899d
}
.commissionNumbers b{font-size:12px;color:#25344a;letter-spacing:0;text-transform:none}
.commissionList{display:grid;gap:10px}
.commissionAppointmentRow{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff
}
.commissionAppointmentRight{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end
}
.commissionAppointmentRight>b{font-size:16px}
.commissionPaidBadge{
  display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em
}
.commissionPaidBadge.paid{background:#eaf8f0;color:#28734b}
.commissionPaidBadge.pending{background:#fff5e7;color:#95611d}
@media(max-width:720px){
  .commissionOverviewBanner{flex-direction:column;align-items:flex-start}
  .commissionOverviewBanner .btn{width:100%}
  .commissionStaffRow,.commissionAppointmentRow{flex-direction:column;align-items:stretch}
  .commissionPercentEditor{width:100%}
  .commissionPercentEditor .input{flex:1;width:auto}
  .commissionNumbers{grid-template-columns:1fr}
  .commissionAppointmentRight{justify-content:flex-start}
}


/* =========================================================
   CitaFlow Web V10 - Acceso para profesionales
   ========================================================= */
.authContainer{max-width:650px}
.authCard{padding:24px}
.authBadge{
  display:inline-flex;padding:5px 9px;border-radius:999px;background:#eaf3ff;
  color:#1559a8;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em
}
.authDivider{display:flex;align-items:center;gap:10px;margin:17px 0;color:#8a98aa;font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.authDivider:before,.authDivider:after{content:"";height:1px;background:#e2e8f0;flex:1}
.staffLinkContainer{max-width:650px}
.staffLinkCard{display:grid;gap:14px;padding:26px}
.staffAccessIcon,.staffAccessGuideIcon{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(145deg,#0e5ab8,#1e82db);color:white;font-weight:950
}
.staffCodeInput{text-transform:uppercase;letter-spacing:.06em;font-weight:800}
.staffAccessGuide{
  display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;align-items:center;
  background:linear-gradient(110deg,#f8fbff,#edf5ff);border-color:#d7e5f6
}
.staffV10List{display:grid;gap:12px}
.staffV10Card{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.staffV10Head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.staffLinkedBadge,.staffUnlinkedBadge{
  display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap
}
.staffLinkedBadge{background:#eaf8f0;color:#28734b}
.staffUnlinkedBadge{background:#f1f4f8;color:#6e7e92}
.staffV10Actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.generatedStaffCode{
  margin-top:12px;padding:12px;border-radius:13px;background:#0d213b;color:#fff;
  display:flex;justify-content:space-between;gap:14px;align-items:center
}
.generatedStaffCode span{display:block;font-size:9px;color:#9ab3d2;text-transform:uppercase;letter-spacing:.08em}
.generatedStaffCode b{display:block;margin:3px 0;font-size:16px;letter-spacing:.07em}
.generatedStaffCode small{display:block;color:#c5d4e7;font-size:10px}
.staffPortalContainer{max-width:1180px}
.staffPortalHero{
  display:flex;gap:15px;align-items:center;padding:18px;border:1px solid #dce6f2;
  border-radius:20px;background:linear-gradient(110deg,#fff,#f2f7fd)
}
.staffPortalHero h1{margin:2px 0;font-size:26px}
.staffPortalHero p{margin:0;color:#6c7a8d}
.staffPortalAvatar{
  width:58px;height:58px;border-radius:18px;background:#0d213b;color:white;
  display:grid;place-items:center;font-weight:950;font-size:17px
}
.staffPortalTabs{
  display:flex;gap:9px;flex-wrap:wrap;margin:16px 0
}
.staffPortalTab{
  border:1px solid #d9e2ed;background:#fff;color:#526278;border-radius:14px;
  padding:11px 14px;display:flex;gap:8px;align-items:center;cursor:pointer
}
.staffPortalTab span{
  width:27px;height:27px;border-radius:9px;background:#eef3f8;display:grid;place-items:center;
  font-size:9px;font-weight:900
}
.staffPortalTab b{font-size:12px}
.staffPortalTab.active{background:#0d213b;color:#fff;border-color:#0d213b}
.staffPortalTab.active span{background:rgba(255,255,255,.12)}
.staffPortalKpis .card{min-height:108px}
.staffAgendaList{display:grid;gap:10px}
.staffAppointmentCard{
  display:flex;justify-content:space-between;gap:14px;align-items:center;
  padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff
}
.staffAppointmentActions{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.staffClientList{display:grid;gap:9px}
.staffClientRow{
  display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:11px;align-items:center;
  padding:11px;border-bottom:1px solid var(--line)
}
.staffClientRow:last-child{border-bottom:0}
.staffClientAvatar{
  width:40px;height:40px;border-radius:13px;background:#edf4fb;color:#175ba8;
  display:grid;place-items:center;font-weight:900
}
.staffClientStats{display:grid;text-align:right}
.staffClientStats b{font-size:18px}
.staffClientStats span{font-size:9px;color:#8391a4;text-transform:uppercase}
@media(max-width:700px){
  .staffV10Head,.generatedStaffCode,.staffAppointmentCard{flex-direction:column;align-items:stretch}
  .staffPortalTabs{display:grid;grid-template-columns:1fr}
  .staffPortalTab{justify-content:flex-start}
  .staffAppointmentActions{justify-content:flex-start}
  .staffAppointmentActions .btn{flex:1}
}


/* =========================================================
   CitaFlow Web V11 - Pagos rápidos + código directo
   ========================================================= */
.clientSearchWrap{width:min(420px,100%)}
.clientDirectHint{
  padding:9px 12px;border:1px solid #dce7f4;border-radius:12px;
  background:#f7fbff;color:#65768d;font-size:11px
}
.clientMiniCodeV11{
  display:flex;justify-content:space-between;gap:12px;align-items:center
}
.clientCodeActions{display:flex;gap:6px;flex-wrap:wrap}
.clientDirectAccessBox{
  margin-bottom:15px;padding:13px;border-radius:14px;background:#f3f8ff;
  border:1px solid #d4e4f7;display:flex;justify-content:space-between;
  gap:14px;align-items:center
}
.clientDirectAccessBox span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#75869b;font-weight:850}
.clientDirectAccessBox b{display:block;font-size:16px;letter-spacing:.04em;margin:2px 0}
.clientDirectAccessBox small{display:block;color:#77879a;font-size:10px}
.clientDirectAccessActions{display:flex;gap:7px;flex-wrap:wrap}

.quickPaymentCard{
  border-color:#cfe3f8;background:linear-gradient(180deg,#fff,#f9fcff)
}
.quickPaySearchLine{display:flex;gap:8px}
.quickPaySearchLine .input{flex:1}
.quickPayMatches{display:grid;gap:8px;margin-top:11px}
.quickPayMatch{
  width:100%;border:1px solid #dbe4ef;border-radius:13px;background:#fff;
  padding:11px 12px;display:flex;justify-content:space-between;gap:12px;
  align-items:center;text-align:left;cursor:pointer
}
.quickPayMatch:hover{border-color:#9fc3ed;background:#f7fbff}
.quickPayMatch div{display:grid;gap:2px}
.quickPayMatch b{font-size:13px;color:#1a2b42}
.quickPayMatch span,.quickPayMatch small{font-size:10px;color:#76869b}
.quickPaySelectedClient{display:grid;gap:14px}
.quickPayClientHead{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  padding:13px;border-radius:15px;background:#edf6ff;border:1px solid #d3e6fa
}
.quickPayClientCode{text-align:right}
.quickPayClientCode span{display:block;font-size:9px;color:#74869c;text-transform:uppercase;font-weight:850}
.quickPayClientCode b{display:block;margin-top:3px;font-size:14px;letter-spacing:.04em}
.quickPayClientActions{display:flex;gap:8px;flex-wrap:wrap}
.quickPayAppointments{display:grid;gap:9px}
.quickPayAppointments h3{margin-bottom:3px}
.quickPayAppointmentRow{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:12px;border:1px solid var(--line);border-radius:14px;background:#fff
}

.easyPaymentModal{max-width:620px}
.paymentBalanceStrip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid #dce5ef;border-radius:14px;overflow:hidden;background:#f8fafc
}
.paymentBalanceStrip>div{padding:11px 12px;border-right:1px solid #dce5ef}
.paymentBalanceStrip>div:last-child{border-right:0}
.paymentBalanceStrip span{display:block;font-size:9px;color:#7b899b;text-transform:uppercase;font-weight:850}
.paymentBalanceStrip b{display:block;margin-top:2px;font-size:16px}
.paymentBalanceStrip .due b{color:#a75b1c}
.paymentAmountBig{font-size:22px;font-weight:850;min-height:52px}
.paymentMethodChips{display:flex;gap:7px;flex-wrap:wrap}
.paymentMethodChip{
  border:1px solid #d8e1eb;background:#fff;color:#516277;padding:9px 12px;
  border-radius:11px;font-size:11px;font-weight:800;cursor:pointer
}
.paymentMethodChip.active{background:#0d213b;color:#fff;border-color:#0d213b}
.quickAmountRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

@media(max-width:700px){
  .clientMiniCodeV11,.clientDirectAccessBox,.quickPayClientHead,.quickPayAppointmentRow{
    flex-direction:column;align-items:stretch
  }
  .clientDirectAccessActions .btn,.quickPayClientActions .btn,.quickPayAppointmentRow .btn{
    width:100%
  }
  .quickPaySearchLine{flex-direction:column}
  .paymentBalanceStrip{grid-template-columns:1fr}
  .paymentBalanceStrip>div{border-right:0;border-bottom:1px solid #dce5ef}
  .paymentBalanceStrip>div:last-child{border-bottom:0}
  .quickPayClientCode{text-align:left}
}


/* =========================================================
   CitaFlow Web V12 - Recibos
   ========================================================= */
.ledgerReceiptActions{
  display:grid;justify-items:end;gap:6px;min-width:125px
}
.ledgerReceiptButtons{
  display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end
}
.miniReceiptBtn{
  border:1px solid #d9e3ee;background:#fff;color:#53657b;
  border-radius:8px;padding:5px 7px;font-size:9px;font-weight:850;cursor:pointer
}
.miniReceiptBtn:hover{background:#f3f7fb;border-color:#b9cce3}
@media(max-width:620px){
  .ledgerReceiptActions{justify-items:start;width:100%;min-width:0}
  .ledgerReceiptButtons{justify-content:flex-start}
}


/* =========================================================
   CitaFlow Web V13 - Selector de acceso antes del login
   ========================================================= */
.accessChoiceContainer,.clientAccessContainer{max-width:980px}
.accessChoiceHeading{text-align:center;max-width:650px;margin:12px auto 26px}
.accessChoiceHeading h1{margin:4px 0 8px;font-size:34px;letter-spacing:-.04em}
.accessChoiceGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.accessChoiceCard{
  position:relative;min-height:220px;padding:22px;border:1px solid #dbe4ef;
  border-radius:22px;background:#fff;text-align:left;cursor:pointer;
  display:grid;align-content:start;gap:16px;transition:.18s;
  box-shadow:0 8px 28px rgba(9,30,66,.05)
}
.accessChoiceCard:hover{
  transform:translateY(-3px);box-shadow:0 14px 32px rgba(9,30,66,.09)
}
.accessChoiceCard h2{margin:0 0 7px;font-size:20px}
.accessChoiceCard p{margin:0;color:#69788d;line-height:1.55;font-size:13px}
.accessChoiceCard.client:hover{border-color:#6ab2e7}
.accessChoiceCard.staff:hover{border-color:#63c49b}
.accessChoiceCard.owner:hover{border-color:#9b8be1}
.accessChoiceIcon{
  width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  font-size:13px;font-weight:950;background:#edf4fb;color:#145cae
}
.accessChoiceCard.staff .accessChoiceIcon{background:#eaf8f1;color:#27764c}
.accessChoiceCard.owner .accessChoiceIcon{background:#f1edff;color:#674eb2}
.accessChoiceArrow{
  position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#f2f5f8;color:#475a72;font-size:18px
}
.accessExistingOwner{
  margin:18px auto 0;padding:12px 15px;border:1px solid #e0e7ef;border-radius:14px;
  display:flex;justify-content:center;gap:12px;align-items:center;max-width:520px;
  background:#f9fbfd;color:#68788d;font-size:12px
}
.authModePill{
  display:inline-flex;padding:6px 9px;border-radius:999px;background:#eaf3ff;
  color:#1559a8;font-size:9px;font-weight:950;letter-spacing:.08em;margin-bottom:6px
}
.clientAccessGrid{align-items:stretch}
.clientActionCard{
  border:1px solid #dbe4ef;border-radius:20px;background:#fff;padding:22px;
  text-align:left;cursor:pointer;display:flex;gap:15px;align-items:flex-start;
  box-shadow:0 7px 24px rgba(9,30,66,.04)
}
.clientActionCard.static{cursor:default}
.clientActionCard:not(.static):hover{border-color:#77addf;transform:translateY(-2px)}
.clientActionCard h2{margin:0 0 6px}
.clientActionCard p{margin:0;color:#6f7f93;line-height:1.5}
.clientActionIcon{
  width:48px;height:48px;flex:0 0 48px;border-radius:15px;background:#edf5ff;
  color:#145dac;display:grid;place-items:center;font-weight:950
}
@media(max-width:760px){
  .accessChoiceGrid{grid-template-columns:1fr}
  .accessChoiceCard{min-height:145px}
  .accessExistingOwner{flex-direction:column}
  .accessExistingOwner .btn{width:100%}
  .clientAccessGrid{grid-template-columns:1fr}
}


/* =========================================================
   CitaFlow Web V14 - Privacidad de horarios
   ========================================================= */
.schedulePrivacyOwnerCard{
  border-color:#d8e4f1;
  background:linear-gradient(115deg,#fff,#f7fbff)
}
.schedulePrivacyOwnerHead{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:13px;
  align-items:center
}
.schedulePrivacyOwnerIcon,.schedulePrivacyLock{
  width:48px;height:48px;border-radius:15px;
  display:grid;place-items:center;
  background:#0d213b;color:white;font-size:11px;font-weight:950
}
.schedulePrivacyOwnerHead h3{margin:2px 0 3px}
.schedulePrivacyOwnerHead p{margin:0;color:#718096;font-size:12px}
.schedulePrivacyOwnerInfo{
  margin-top:13px;padding:11px 13px;border-radius:12px;
  background:#f4f7fb;border:1px solid #e1e8f0;
  display:grid;gap:3px;font-size:11px;color:#64758a
}
.schedulePrivacyOwnerInfo b{color:#30445d}
.privacySwitch{position:relative;width:48px;height:27px;display:block}
.privacySwitch input{position:absolute;opacity:0;pointer-events:none}
.privacySwitch span{
  position:absolute;inset:0;border-radius:999px;background:#cbd5e1;cursor:pointer;transition:.18s
}
.privacySwitch span:after{
  content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;
  border-radius:50%;background:white;box-shadow:0 2px 7px rgba(0,0,0,.18);transition:.18s
}
.privacySwitch input:checked + span{background:#14815a}
.privacySwitch input:checked + span:after{transform:translateX(21px)}

.schedulePrivacyGate{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;
  padding:16px;border-radius:17px;border:1px solid #d6e4f3;
  background:linear-gradient(120deg,#fbfdff,#eef6ff)
}
.schedulePrivacyContent h3{margin:3px 0 5px}
.schedulePrivacyContent>p{margin:0 0 12px;color:#66778d;font-size:12px}
.schedulePrivacyFields{margin-top:10px}
.schedulePrivacyInfo{
  margin:10px 0 12px;padding:9px 10px;border-radius:10px;
  background:#fff;border:1px solid #e0e8f1;color:#6b7c91;font-size:10px
}
.privacyNoSlots{
  padding:12px;border-radius:12px;background:#f7f9fc;border:1px solid #e1e7ef;
  display:grid;gap:2px;color:#53657a
}
.privacyNoSlots span{font-size:12px;font-weight:800}
.privacyNoSlots small{font-size:10px;color:#8290a2}

@media(max-width:650px){
  .schedulePrivacyOwnerHead{grid-template-columns:48px 1fr}
  .schedulePrivacyOwnerHead .privacySwitch{grid-column:1/-1}
  .schedulePrivacyGate{grid-template-columns:1fr}
  .schedulePrivacyLock{width:44px;height:44px}
  .schedulePrivacyFields{grid-template-columns:1fr}
}


/* =========================================================
   CitaFlow Web V15 - Divisas / monedas
   ========================================================= */
.currencySetupHint,.currencyProfileNote{
  margin-top:10px;padding:10px 12px;border-radius:11px;
  background:#f7f9fc;border:1px solid #e1e7ef;
  color:#6a7a8e;font-size:10px;line-height:1.5
}
.currencyProfileNote b{color:#394c63}


/* =========================================================
   CitaFlow Web V16 - Impuestos, cargos y descuentos
   ========================================================= */
.pricingBreakdown{
  display:grid;gap:7px;padding:12px 13px;border-radius:13px;
  border:1px solid #dfe7f0;background:#fbfcfe
}
.pricingBreakdown.compact{padding:9px 10px;margin-top:8px}
.pricingLine{
  display:flex;justify-content:space-between;gap:14px;
  font-size:11px;color:#65768a
}
.pricingLine b{color:#2b3e55}
.pricingLine.discount b{color:#2d7b53}
.pricingLine.total{
  margin-top:3px;padding-top:8px;border-top:1px solid #dfe6ee;
  font-size:13px;font-weight:850;color:#25384f
}
.pricingLine.total b{font-size:15px;color:#102b4c}

.bookingPricingCard{
  margin-top:15px;padding:13px;border-radius:15px;
  background:linear-gradient(120deg,#f8fbff,#eef6ff);
  border:1px solid #d5e5f6
}
.bookingPricingCard .pricingBreakdown{margin-top:8px;background:white}

.businessPricingOwnerCard{
  border-color:#dce5f0;background:linear-gradient(115deg,#fff,#fbfcff)
}
.pricingSettingsGrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px
}
.pricingSettingBlock{
  padding:13px;border:1px solid #dfe7f0;border-radius:15px;background:#fafcff
}
.pricingToggle{margin-bottom:11px}
.pricingCalculationNote{
  margin-top:12px;padding:10px 12px;border-radius:11px;background:#f6f8fb;
  border:1px solid #e1e7ef;color:#6d7b8e;font-size:10px;line-height:1.55
}
.pricingCalculationNote b{color:#33485f}
.profilePricingPreview{
  margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,420px);
  gap:14px;align-items:center
}
.profilePricingPreview>div:first-child{display:grid;gap:2px}
.profilePricingPreview>div:first-child span{font-weight:850;color:#2c4057}
.profilePricingPreview>div:first-child small{font-size:10px;color:#8390a0}

.appointmentPricingMini{
  display:flex;gap:5px;flex-wrap:wrap;margin-top:6px
}
.appointmentPricingMini span{
  padding:4px 7px;border-radius:999px;background:#f2f6fa;color:#62748a;
  font-size:9px;font-weight:750
}
.appointmentDiscountModal{max-width:620px}
.discountPreview{
  margin-top:12px;padding:11px 13px;border:1px solid #d6e4f2;
  background:#f3f8ff;border-radius:12px;display:flex;justify-content:space-between;gap:12px
}
.discountPreview span{color:#6a7d93;font-size:11px}
.discountPreview b{font-size:17px;color:#153d69}

@media(max-width:800px){
  .pricingSettingsGrid{grid-template-columns:1fr}
  .profilePricingPreview{grid-template-columns:1fr}
}


/* =========================================================
   CitaFlow Web V17 - Cupones y promociones
   ========================================================= */
.promoBookingBox{
  margin-top:15px;padding:13px;border-radius:15px;
  border:1px solid #e0e5ee;background:#fbfcfe
}
.promoBookingTitle{
  display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:9px
}
.promoBookingTitle b{font-size:12px}
.promoAppliedBadge{
  display:inline-flex;padding:5px 8px;border-radius:999px;
  background:#e9f8f0;color:#28774d;font-size:9px;font-weight:900;
  text-transform:uppercase;letter-spacing:.06em
}
.promoInputRow{display:flex;gap:8px}
.promoInputRow .input{text-transform:uppercase;font-weight:850;letter-spacing:.05em}
.promoAppliedRow{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:10px;border-radius:12px;background:#eef9f3;border:1px solid #cce8d9
}
.promoAppliedRow>div{display:grid;gap:2px}
.promoAppliedRow span{font-size:9px;color:#668074;text-transform:uppercase;font-weight:800}
.promoAppliedRow b{font-size:15px;letter-spacing:.05em;color:#1f6541}
.promoAppliedRow small{font-size:10px;color:#617b6d}
.promoPricingNotice{
  margin:8px 0;padding:8px 10px;border-radius:10px;background:#edf8f2;
  color:#4c745f;font-size:10px;border:1px solid #d3eadc
}
.promoSummaryRow{background:#f1faf5;border-radius:10px}
.promoKpi{min-height:112px}
.promoOwnerCode{text-transform:uppercase;font-weight:900;letter-spacing:.06em}
.promoOwnerList{display:grid;gap:11px}
.promoOwnerCard{
  padding:13px;border:1px solid #dfe6ef;border-radius:15px;background:#fff
}
.promoOwnerCardTop{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start
}
.promoCodeDisplay{
  display:inline-flex;padding:6px 9px;border-radius:9px;background:#0d213b;
  color:white;font-size:13px;font-weight:950;letter-spacing:.08em
}
.promoStatusBadge{
  display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em
}
.promoStatusBadge.active{background:#e9f8f0;color:#28764c}
.promoStatusBadge.inactive{background:#eef1f5;color:#69798d}
.promoStatusBadge.scheduled{background:#eef5ff;color:#2c62a3}
.promoStatusBadge.expired{background:#fff1ef;color:#a24d44}
.promoOwnerMeta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.promoOwnerMeta span{
  padding:5px 8px;border-radius:9px;background:#f4f7fa;color:#6d7d90;font-size:9px
}
.promoOwnerMeta b{color:#33485e}
.promoOwnerActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
@media(max-width:650px){
  .promoInputRow,.promoAppliedRow,.promoOwnerCardTop{flex-direction:column;align-items:stretch}
  .promoOwnerActions .btn{flex:1}
}


/* =========================================================
   CitaFlow Web V18 - Lista de espera
   ========================================================= */
.waitlistPublicCard{
  display:grid;grid-template-columns:50px minmax(0,1fr);gap:14px;
  padding:16px;border:1px solid #d8e5f2;border-radius:17px;
  background:linear-gradient(120deg,#fbfdff,#f1f7fd)
}
.waitlistPublicIcon{
  width:50px;height:50px;border-radius:15px;background:#0d213b;color:white;
  display:grid;place-items:center;font-size:11px;font-weight:950
}
.waitlistPublicContent h3{margin:3px 0 5px}
.waitlistPublicContent>p{margin:0 0 12px;color:#6b7c90;font-size:12px}
.waitlistPublicSuccess{
  display:flex;gap:12px;align-items:center;padding:15px;border-radius:15px;
  border:1px solid #cce8d8;background:#edf9f2
}
.waitlistSuccessIcon{
  width:42px;height:42px;border-radius:50%;background:#278253;color:white;
  display:grid;place-items:center;font-weight:950;font-size:18px
}
.waitlistPublicSuccess div:last-child{display:grid;gap:2px}
.waitlistPublicSuccess b{font-size:13px;color:#255c40}
.waitlistPublicSuccess span{font-size:11px;color:#617c6d}

.waitlistOverviewBanner{
  margin-top:14px;padding:17px 18px;border-radius:18px;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
  border:1px solid #d7e6f6;background:linear-gradient(105deg,#fff,#f1f7ff)
}
.waitlistOverviewBanner b{display:block;margin-top:3px}
.waitlistOverviewBanner p{margin:5px 0 0;color:#6e7e91;font-size:13px}

.waitlistKpi{min-height:112px}
.waitlistOwnerList{display:grid;gap:11px}
.waitlistOwnerCard{
  padding:13px;border:1px solid #dfe6ef;border-radius:15px;background:#fff
}
.waitlistOwnerHead{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:11px;align-items:start
}
.waitlistClientAvatar{
  width:42px;height:42px;border-radius:13px;background:#edf4fb;color:#155cac;
  display:grid;place-items:center;font-weight:900
}
.waitlistStatusBadge{
  display:inline-flex;padding:5px 8px;border-radius:999px;font-size:9px;
  font-weight:900;text-transform:uppercase;letter-spacing:.05em
}
.waitlistStatusBadge.waiting{background:#fff5e8;color:#98641f}
.waitlistStatusBadge.contacted{background:#edf5ff;color:#2d63a5}
.waitlistStatusBadge.booked{background:#eaf8f0;color:#28764c}
.waitlistStatusBadge.closed{background:#eef1f4;color:#6c7a8b}
.waitlistNote{
  margin-top:6px;padding:6px 8px;border-radius:8px;background:#f7f9fc;
  color:#66778c;font-size:10px
}
.waitlistOwnerActions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}

@media(max-width:700px){
  .waitlistPublicCard{grid-template-columns:1fr}
  .waitlistOwnerHead{grid-template-columns:42px 1fr}
  .waitlistStatusBadge{grid-column:1/-1;width:max-content}
  .waitlistOverviewBanner{flex-direction:column;align-items:stretch}
  .waitlistOverviewBanner .btn{width:100%}
  .waitlistOwnerActions .btn{flex:1}
}


/* =========================================================
   CitaFlow Web V19 - Políticas de cancelación / no-show
   ========================================================= */
.policySummary{
  border:1px solid #dce5ef;border-radius:15px;background:#fff;padding:13px
}
.policySummary.compact{padding:11px}
.policySummaryHead{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.policySummaryHead>span{
  width:38px;height:38px;border-radius:12px;background:#0d213b;color:#fff;
  display:grid;place-items:center;font-size:10px;font-weight:950;flex:0 0 38px
}
.policySummaryHead>div{display:grid;gap:2px}
.policySummaryHead b{font-size:12px;color:#243850}
.policySummaryHead small{font-size:9px;color:#7a899b}
.policySummaryGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.policySummaryGrid>div{
  padding:8px 9px;border-radius:10px;background:#f6f8fb;display:grid;gap:2px
}
.policySummaryGrid span{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#8592a2;font-weight:800}
.policySummaryGrid b{font-size:10px;color:#40536a}
.policyCustomText{
  margin-top:9px;padding-top:9px;border-top:1px dashed #dbe3ec;
  color:#65768b;font-size:10px;line-height:1.5
}
.bookingPolicyCard{margin-top:14px}
.policyAgreementCheck{
  margin-top:10px;padding:10px 11px;border-radius:11px;
  background:#f7f9fc;border:1px solid #e0e7ef;align-items:flex-start
}
.portalPolicyBanner{
  margin-top:13px;padding:12px;border-radius:14px;border:1px solid #dce5ef;
  background:#f7faff;display:flex;gap:10px;align-items:flex-start
}
.portalPolicyBannerIcon{
  width:38px;height:38px;border-radius:12px;background:#183b65;color:white;
  display:grid;place-items:center;font-size:9px;font-weight:950;flex:0 0 38px
}
.portalPolicyBanner>div:last-child{display:grid;gap:2px}
.portalPolicyBanner b{font-size:11px}
.portalPolicyBanner span,.portalPolicyBanner small{font-size:9px;color:#6d7d90;line-height:1.45}
.policyLateAction{border-color:#e5b77a!important;color:#9b641d!important}
.policyRequestWarning{display:grid;gap:3px}
.lateRequestText{color:#a76b1c!important;font-weight:750}
.portalPolicyFee{
  margin-top:10px;padding:10px 11px;border-radius:11px;
  border:1px solid #e2e7ed;background:#f8fafc;
  display:flex;justify-content:space-between;gap:12px;align-items:center
}
.portalPolicyFee>div{display:grid;gap:2px}
.portalPolicyFee b{font-size:11px}
.portalPolicyFee span{font-size:9px;color:#748396}
.portalPolicyFee strong{font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.portalPolicyFee.pending{background:#fff8ef;border-color:#f0d5ae}
.portalPolicyFee.paid{background:#eef9f3;border-color:#cde8d8}
.portalPolicyFee.waived{background:#f3f5f7}
.lateOwnerRequestBadge{
  display:inline-flex;margin-left:5px;padding:3px 6px;border-radius:999px;
  background:#fff0dd;color:#a36816;font-size:8px;font-weight:900;letter-spacing:.05em
}
.policyViolationLine{
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:6px;
  color:#728094;font-size:9px
}
.policyViolationBadge{
  display:inline-flex;padding:4px 7px;border-radius:999px;font-size:8px;
  font-weight:900;text-transform:uppercase;letter-spacing:.04em
}
.policyViolationBadge.noshow{background:#fff0ef;color:#a04943}
.policyViolationBadge.late{background:#fff4e5;color:#9b651f}
.policyFeeCollectionCard{border-color:#ead7ba}
.policyFeeCount{
  min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:#9a651e;color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:950
}
.policyFeeList{display:grid;gap:9px}
.policyFeeRow{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:11px;border:1px solid #e5e9ef;border-radius:13px;background:#fff
}
.policyFeeRow>b{font-size:14px;color:#8a5819}
.policyFeeActions{display:flex;gap:6px;flex-wrap:wrap}
.cancellationPolicyOwnerCard{
  border-color:#d7e2ef;background:linear-gradient(115deg,#fff,#f8fbff)
}
.policyOwnerSettings{display:grid;gap:13px}
.policyAcceptanceToggle{
  padding:10px 11px;border-radius:11px;background:#f6f8fb;border:1px solid #e0e6ee
}
.policyHoursInput{display:flex;align-items:center;gap:7px}
.policyHoursInput .input{min-width:0}
.policyHoursInput span{font-size:10px;color:#7a899b;font-weight:800}
.policyFeeConfigGrid{align-items:start}
.policyFeeConfig{
  padding:12px;border-radius:14px;border:1px solid #dfe6ef;background:#fbfcfe;
  display:grid;gap:10px
}
.policyDisabledPreview{
  padding:11px;border-radius:11px;background:#f5f7f9;color:#7b8998;font-size:10px
}
#policyOwnerPreview{margin-top:2px}
.policyFeePaymentModal{max-width:520px}
@media(max-width:700px){
  .policySummaryGrid{grid-template-columns:1fr}
  .policyFeeRow{grid-template-columns:1fr}
  .policyFeeActions .btn{flex:1}
}


/* =========================================================
   CitaFlow Web V20 - Refresh visual completo
   Estilo elegido: A) Moderno elegante
   ========================================================= */
:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel2:#f7faff;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e3eaf3;
  --brand:#2563eb;
  --brand2:#123d91;
  --nav:#091a2f;
  --ok:#15803d;
  --warn:#b45309;
  --danger:#b42318;
  --shadow:0 18px 55px rgba(15,23,42,.08);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.07),transparent 26%),
    radial-gradient(circle at right center,rgba(14,165,233,.05),transparent 22%),
    linear-gradient(180deg,#f7f9fd 0%,#f3f6fb 100%);
  color:var(--ink);
}

.appShell{position:relative}
.container{
  width:min(1220px,calc(100% - 34px));
  padding:28px 0 64px;
}

.topbar{
  background:rgba(9,26,47,.86);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 28px rgba(2,6,23,.12);
}
.brand{
  gap:14px;
  letter-spacing:-.03em;
  font-size:15px;
}
.logoMark{
  width:44px;
  height:44px;
  border-radius:15px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.25),transparent 25%),
    linear-gradient(145deg,#3b82f6 0%,#1d4ed8 45%,#0f2d77 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 25px rgba(15,53,145,.32);
}
.topActions{gap:10px}

.hero{
  position:relative;
  border-radius:34px;
  padding:44px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.16),transparent 28%),
    linear-gradient(135deg,#081425 0%,#0b2a54 48%,#1d4ed8 100%);
  box-shadow:0 26px 70px rgba(8,20,38,.18);
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
}
.hero h1{
  letter-spacing:-.065em;
  line-height:.92;
}
.hero p{
  color:#d8e5fb;
}
.heroCard{
  border-radius:24px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

.guideEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#1d4ed8;
  font-weight:950;
}
.guideEyebrow:before{
  content:"";
  width:22px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#1d4ed8,#60a5fa);
}

.card{
  border:1px solid rgba(223,231,241,.95);
  border-radius:24px;
  box-shadow:0 14px 44px rgba(15,23,42,.06);
  background:rgba(255,255,255,.96);
}
.card.flat{
  background:rgba(255,255,255,.9);
  border-color:#e7edf5;
}
.card h1,.card h2,.card h3{letter-spacing:-.03em}
.sectionHead{margin-bottom:18px}
.bigNumber{
  font-size:31px;
  font-weight:900;
  letter-spacing:-.045em;
}
.small{font-size:12px}
.muted{color:#708198}

.btn{
  min-height:46px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:800;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 55%,#123d91 100%);
  box-shadow:0 10px 24px rgba(37,99,235,.24);
}
.btn.primary:hover{box-shadow:0 14px 28px rgba(37,99,235,.3)}
.btn.dark{
  background:linear-gradient(135deg,#0f172a 0%,#13243d 100%);
  box-shadow:0 8px 22px rgba(15,23,42,.18);
}
.btn.soft{
  background:linear-gradient(180deg,#eef5ff,#e4efff);
  color:#114ca1;
  border:1px solid #d3e2fb;
}
.btn.ghost{
  background:rgba(255,255,255,.84);
  border:1px solid #d7e0eb;
  color:#25364c;
}
.btn.danger{
  background:#fff4f3;
  border:1px solid #ffd7d2;
}
.btn.ok{
  background:#ecfbf2;
  border:1px solid #cfeeda;
}
.btn:focus-visible,.input:focus-visible,.select:focus-visible,.textarea:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.field label{
  color:#31445d;
  font-size:12px;
  font-weight:820;
  letter-spacing:.01em;
}
.input,.select,.textarea{
  min-height:47px;
  border:1px solid #d6e0eb;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#fcfdff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.input:focus,.select:focus,.textarea:focus{
  border-color:#79a8ef;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.textarea{min-height:108px}

.notice{
  border-radius:16px;
  background:linear-gradient(180deg,#eff6ff,#e7f0ff);
  border:1px solid #d4e4ff;
}
.notice.warn{
  background:linear-gradient(180deg,#fff7eb,#fff1d6);
  border-color:#ffdca1;
}
.notice.danger{
  background:linear-gradient(180deg,#fff3f2,#ffe8e6);
  border-color:#ffd2cd;
}

.pillRow{gap:10px}
.pill{
  border:1px solid #dbe4ef;
  background:rgba(255,255,255,.92);
  padding:9px 14px;
  font-size:12px;
  box-shadow:0 6px 20px rgba(15,23,42,.04);
}
.pill.active{
  background:linear-gradient(135deg,#0f172a,#1d3557);
  border-color:#0f172a;
}

.slot{
  border:1px solid #d8e2ee;
  border-radius:14px;
  padding:11px 13px;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
  transition:.16s ease;
}
.slot:hover{
  border-color:#9cbff2;
  transform:translateY(-1px);
}
.slot.active{
  background:linear-gradient(180deg,#edf4ff,#e3efff);
  border-color:#60a5fa;
  box-shadow:0 10px 26px rgba(37,99,235,.10);
}

.tabs{gap:9px}
.tab{
  border-radius:13px;
  padding:11px 14px;
  background:#edf2f8;
  color:#4b5f77;
}
.tab.active{
  background:linear-gradient(135deg,#0f172a,#1d3557);
  box-shadow:0 10px 22px rgba(15,23,42,.13);
}

.row{
  border-radius:18px;
  border:1px solid #e1e8f1;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.rowTitle{font-size:14px;letter-spacing:-.015em}
.rowMeta{font-size:12px}
.badge{
  padding:6px 10px;
  font-size:10px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:900;
}
.badge.pending{background:#fff6dc;color:#8b5a00}
.badge.confirmed{background:#e8f1ff;color:#134f9d}
.badge.completed{background:#e8f8ef;color:#176540}
.badge.cancelled,.badge.no_show{background:#ffecea;color:#a62b22}

.empty{
  border-radius:20px;
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px dashed #cfd9e6;
}

.tableWrap{
  border-radius:18px;
  border:1px solid #dde6ef;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
  background:#fff;
}
table{background:transparent}
th{
  background:linear-gradient(180deg,#f8fbff,#f3f7fc);
  color:#63748a;
  font-size:11px;
}
td{font-size:13px}

.modalBack{
  background:rgba(9,18,32,.54);
  backdrop-filter:blur(5px);
}
.modal{
  border-radius:26px;
  border:1px solid rgba(223,231,241,.98);
  box-shadow:0 24px 70px rgba(15,23,42,.18);
  padding:24px;
}

.toast{
  background:linear-gradient(135deg,#0f172a,#1e293b);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 40px rgba(15,23,42,.22);
  border-radius:16px;
}

/* --- Pantalla de acceso y autenticación --- */
.accessChoiceContainer,
.clientAccessContainer,
.authContainer{
  position:relative;
}
.accessChoiceHeading h1{
  font-size:38px;
  letter-spacing:-.06em;
}
.accessChoiceHeading p{
  font-size:15px;
  color:#6f8097;
}
.accessChoiceGrid{
  gap:18px;
}
.accessChoiceCard{
  min-height:238px;
  border-radius:26px;
  border:1px solid #dfe7f1;
  background:
    radial-gradient(circle at top right,rgba(37,99,235,.06),transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f9fbfe 100%);
  box-shadow:0 16px 38px rgba(15,23,42,.06);
}
.accessChoiceCard:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 44px rgba(15,23,42,.10);
}
.accessChoiceCard.client:hover{border-color:#8ec5ff}
.accessChoiceCard.staff:hover{border-color:#90dcc0}
.accessChoiceCard.owner:hover{border-color:#b3a7f7}
.accessChoiceIcon{
  width:58px;
  height:58px;
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.accessChoiceArrow{
  width:38px;
  height:38px;
  background:#edf3fa;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.accessExistingOwner{
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f9fbfe);
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}

.authCard{
  max-width:670px;
  margin:6px auto 0;
  border-radius:28px;
  padding:30px;
  background:
    radial-gradient(circle at top right,rgba(37,99,235,.05),transparent 20%),
    linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:0 18px 48px rgba(15,23,42,.08);
}
.authModePill{
  padding:7px 10px;
  font-size:9px;
  border:1px solid #d6e6ff;
  box-shadow:0 5px 14px rgba(37,99,235,.08);
}
.clientActionCard{
  border-radius:24px;
  padding:24px;
  border:1px solid #dfe7f1;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 14px 35px rgba(15,23,42,.05);
}
.clientActionCard:not(.static):hover{
  transform:translateY(-3px);
  box-shadow:0 20px 40px rgba(15,23,42,.08);
}
.clientActionIcon{
  width:52px;
  height:52px;
  border-radius:17px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.clientCodeEntry{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
}
.savedPhoneHero,
.clientCodeBox,
.savedBusinessMini{
  border-radius:20px;
  box-shadow:0 10px 30px rgba(15,23,42,.05);
}

/* --- Menú lateral y área dueño --- */
.ownerWorkspace{
  gap:24px;
}
.menuPanel{
  border-radius:28px;
  background:
    radial-gradient(circle at 0% 0%,rgba(59,130,246,.20),transparent 30%),
    linear-gradient(170deg,#0a1930 0%,#0d223d 52%,#102b4a 100%);
  box-shadow:0 22px 55px rgba(8,20,38,.18);
}
.menuItem{
  border-radius:16px;
}
.menuItemIcon{
  border-radius:12px;
}
.menuLauncher{
  border-radius:18px;
  min-width:156px;
}
.ownerSectionBar{
  margin-bottom:20px;
}
.ownerMain .card{
  background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.accountSummaryCard,
.reportKpi,
.promoKpi,
.reminderKpi,
.commissionKpi{
  border-radius:22px;
}
.accountSummaryGrid .card,
.staffPortalKpis .card,
.grid4 .card,
.grid3 .card{
  min-height:100%;
}

/* --- Pantallas cliente / reservas --- */
.bookingPricingCard,
.bookingPolicyCard,
.portalBusiness,
.portalAppointmentV8,
.portalPaymentBox,
.portalPrivacyNote{
  border-radius:22px;
  box-shadow:0 12px 30px rgba(15,23,42,.05);
}
.bookingPricingCard,
.bookingPolicyCard{
  border:1px solid #dfe8f2;
  background:linear-gradient(180deg,#fff,#fbfdff);
}
.portalBusiness{
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid #dfe7f1;
  padding:16px;
}
.portalAppointmentV8,
.staffAppointmentCard,
.agendaAppointment,
.quickPayAppointmentRow,
.commissionAppointmentRow{
  border-radius:18px;
  box-shadow:0 8px 22px rgba(15,23,42,.04);
}
.clientRequestState,
.clientConfirmationState{
  border-radius:16px;
}

/* --- Listas / recordatorios / reportes --- */
.reminderCard,
.ownerClientRequestCard,
.promoOwnerCard,
.waitlistClientAvatar,
.categoryCard,
.setupBusinessCard,
.staffV10Card,
.guideInfoCard{
  border-radius:22px;
}
.reportOverviewBanner,
.reminderOverviewBanner,
.commissionOverviewBanner,
.staffPortalHero{
  border-radius:24px;
  background:linear-gradient(120deg,#ffffff,#f4f8fe);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}
.reportBarTrack{
  border-radius:999px;
  background:#eaf0f7;
}
.reportBarFill{
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#60a5fa);
}

/* --- Formularios especiales y blocks --- */
.quickPaymentCard,
.businessPricingOwnerCard,
.cancellationPolicyOwnerCard,
.schedulePrivacyOwnerCard{
  border-radius:24px;
}
.paymentMethodChip{
  border-radius:12px;
  font-size:10px;
  box-shadow:0 6px 16px rgba(15,23,42,.04);
}
.paymentMethodChip.active{
  background:linear-gradient(135deg,#0f172a,#233a60);
}
.paymentBalanceStrip{
  border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.quickAmountRow .btn{
  min-height:40px;
  padding:10px 14px;
}

.policySummary,
.policyDisabledPreview,
.policyFeeConfig,
.staffAccessGuide,
.clientDirectAccessBox,
.quickPayClientHead,
.clientDirectHint{
  border-radius:18px;
}

/* --- Responsive refinado --- */
@media (max-width:900px){
  .hero{padding:30px;border-radius:26px}
  .authCard{padding:24px}
}
@media (max-width:760px){
  .container{width:min(100% - 20px,1220px)}
  .topbar{padding:10px 12px}
  .accessChoiceHeading h1{font-size:31px}
  .authCard{border-radius:22px}
  .clientCodeEntry{grid-template-columns:1fr}
}


/* =========================================================
   CitaFlow V20.1 - VISUAL FORZADO / CAMBIO CLARAMENTE VISIBLE
   ========================================================= */

/* Fondo general más premium */
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 5% -10%,rgba(37,99,235,.16),transparent 30%),
    radial-gradient(circle at 95% 15%,rgba(14,165,233,.10),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#eef3f9 100%) !important;
}

/* TOPBAR BLANCA/GLASS: cambio muy evidente */
.topbar{
  background:rgba(255,255,255,.91) !important;
  color:#0f172a !important;
  border-bottom:1px solid rgba(207,219,233,.9) !important;
  box-shadow:0 12px 34px rgba(15,23,42,.08) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
}
.topbar .brand{color:#0f172a !important}
.topbar .btn.ghost{
  color:#233a58 !important;
  border-color:#d4dfeb !important;
  background:#f8fbff !important;
}
.topbar .btn.primary{
  color:#fff !important;
}
.topbar .topPublicBtn,
.topbar .topLogoutBtn,
.topbar .menuTopBtn{
  color:#233a58 !important;
  border-color:#d4dfeb !important;
  background:#f8fbff !important;
}

/* Marca más limpia */
.logoMark{
  border-radius:14px !important;
  background:linear-gradient(145deg,#2563eb,#123d91) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.28) !important;
}

/* Contenido principal */
.container{
  width:min(1240px,calc(100% - 36px)) !important;
}

/* Cards más premium */
.card{
  border:1px solid rgba(216,226,238,.96) !important;
  border-radius:26px !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 18px 50px rgba(15,23,42,.07) !important;
}

/* Dashboard: tarjetas con detalle superior azul */
.ownerMain > .grid .card,
.ownerMain .accountSummaryCard,
.ownerMain .reportKpi,
.ownerMain .reminderKpi,
.ownerMain .commissionKpi,
.ownerMain .promoKpi,
.staffPortalKpis .card{
  position:relative;
  overflow:hidden;
}
.ownerMain > .grid .card:before,
.ownerMain .accountSummaryCard:before,
.ownerMain .reportKpi:before,
.ownerMain .reminderKpi:before,
.ownerMain .commissionKpi:before,
.ownerMain .promoKpi:before,
.staffPortalKpis .card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:4px;
  background:linear-gradient(90deg,#2563eb,#60a5fa,#38bdf8);
}

/* MENÚ LATERAL */
.menuPanel{
  border-radius:30px !important;
  padding:15px !important;
  background:
    radial-gradient(circle at 15% 0%,rgba(59,130,246,.28),transparent 27%),
    linear-gradient(175deg,#07172a 0%,#0b203a 50%,#102f53 100%) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 26px 65px rgba(2,8,23,.22) !important;
}
.menuItem{
  border-radius:16px !important;
  padding:10px !important;
}
.menuItem.active{
  background:linear-gradient(105deg,#2563eb 0%,#1d4ed8 65%,#194694 100%) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 10px 24px rgba(37,99,235,.24) !important;
}
.menuItem.active .menuItemIcon{
  background:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
.menuBusinessAvatar{
  background:linear-gradient(145deg,#4f8fff,#1e55c9) !important;
}

/* Encabezado de la sección */
.ownerSectionBar{
  padding:8px 0 !important;
}
.ownerCurrentSection{
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  color:#15253b !important;
}

/* Botones */
.btn{
  border-radius:15px !important;
  font-weight:830 !important;
}
.btn.primary{
  background:linear-gradient(135deg,#3478f6 0%,#2563eb 45%,#1949a7 100%) !important;
  box-shadow:0 10px 25px rgba(37,99,235,.25) !important;
}
.btn.soft{
  background:#eef5ff !important;
  color:#1d55a6 !important;
  border:1px solid #d2e3fb !important;
}
.btn.ghost{
  background:#fff !important;
  border:1px solid #d9e3ed !important;
}

/* Formulario */
.input,.select,.textarea{
  border-radius:15px !important;
  min-height:48px !important;
  border:1px solid #d5e0eb !important;
  background:#fff !important;
}
.input:focus,.select:focus,.textarea:focus{
  border-color:#6fa3f5 !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.11) !important;
}

/* LOGIN / SELECTOR DE ACCESO: cambio fuerte */
.accessChoiceHeading{
  margin-top:28px !important;
  margin-bottom:34px !important;
}
.accessChoiceHeading h1{
  font-size:clamp(35px,5vw,50px) !important;
  letter-spacing:-.065em !important;
  color:#0f172a !important;
}
.accessChoiceHeading p{
  font-size:15px !important;
}
.accessChoiceGrid{
  gap:20px !important;
}
.accessChoiceCard{
  min-height:250px !important;
  border-radius:28px !important;
  padding:26px !important;
  border:1px solid #dbe5f0 !important;
  background:#fff !important;
  box-shadow:0 18px 50px rgba(15,23,42,.07) !important;
}
.accessChoiceCard:before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:5px;
  border-radius:28px 28px 0 0;
}
.accessChoiceCard.client:before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.accessChoiceCard.staff:before{background:linear-gradient(90deg,#059669,#34d399)}
.accessChoiceCard.owner:before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.accessChoiceCard:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 26px 58px rgba(15,23,42,.11) !important;
}
.accessChoiceIcon{
  width:62px !important;
  height:62px !important;
  border-radius:20px !important;
}
.accessChoiceCard h2{
  font-size:22px !important;
  letter-spacing:-.035em !important;
}
.accessChoiceArrow{
  width:42px !important;
  height:42px !important;
  background:#f1f5f9 !important;
}

/* Login */
.authCard{
  margin-top:30px !important;
  border-radius:30px !important;
  padding:34px !important;
  box-shadow:0 24px 65px rgba(15,23,42,.10) !important;
}
.authCard h1{
  font-size:34px !important;
  letter-spacing:-.055em !important;
}

/* Reserva cliente */
.clientActionCard{
  border-radius:26px !important;
  padding:26px !important;
  box-shadow:0 16px 42px rgba(15,23,42,.06) !important;
}
.clientActionIcon{
  width:56px !important;
  height:56px !important;
  border-radius:18px !important;
}
.bookingPricingCard,
.bookingPolicyCard,
.promoBookingBox,
.schedulePrivacyGate,
.waitlistPublicCard{
  border-radius:22px !important;
  box-shadow:0 12px 34px rgba(15,23,42,.05) !important;
}

/* Agenda / listas */
.agendaAppointment,
.staffAppointmentCard,
.quickPayAppointmentRow,
.commissionAppointmentRow,
.reminderCard,
.ownerClientRequestCard,
.promoOwnerCard,
.waitlistOwnerCard{
  border-radius:20px !important;
  border-color:#dde6ef !important;
  box-shadow:0 10px 26px rgba(15,23,42,.045) !important;
}

/* Tablas */
.tableWrap{
  border-radius:22px !important;
  box-shadow:0 14px 36px rgba(15,23,42,.055) !important;
}
th{
  background:#f3f7fc !important;
  color:#52657d !important;
}

/* Modales */
.modal{
  border-radius:30px !important;
  box-shadow:0 30px 90px rgba(15,23,42,.22) !important;
}

/* Indicador para verificar que el archivo NUEVO sí cargó */
body:after{
  content:"Visual V20.1";
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:9999;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.82);
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  pointer-events:none;
  opacity:.72;
}

/* Mobile */
@media(max-width:760px){
  .topbar{
    padding:10px 12px !important;
  }
  .accessChoiceHeading{
    margin-top:12px !important;
  }
  .accessChoiceCard{
    min-height:170px !important;
  }
  .authCard{
    padding:24px !important;
  }
}


/* =========================================================
   CitaFlow V20.2 - Opciones optimizadas / menú más limpio
   ========================================================= */

/* Quitar indicador temporal Visual V20.1 */
body:after{display:none!important}

/* Topbar del dueño simplificada */
.businessTopName{
  font-weight:900;
  letter-spacing:-.025em;
  font-size:14px;
  color:#16263b;
}
.topActions{
  gap:8px!important;
}

/* Menú lateral más compacto */
.menuPanel{
  width:252px!important;
  padding:13px!important;
}
.ownerWorkspace{
  grid-template-columns:252px minmax(0,1fr)!important;
}
.ownerWorkspace.menu-closed{
  grid-template-columns:0 minmax(0,1fr)!important;
}
.menuPanelHead.clean{
  padding:4px 2px 9px!important;
}
.menuBusinessAvatar{
  width:40px!important;
  height:40px!important;
  border-radius:13px!important;
}
.menuBusinessName{
  font-size:13px!important;
}
.menuBusinessMeta{
  font-size:9px!important;
  color:#8ca1bb!important;
}
.menuCloseBtn{
  width:30px!important;
  height:30px!important;
  border-radius:9px!important;
  font-size:18px!important;
}

/* Estado simple */
.menuQuickStatus{
  display:flex;
  align-items:center;
  gap:7px;
  margin:3px 2px 10px;
  padding:8px 9px;
  border-radius:11px;
  background:rgba(255,255,255,.045);
  color:#91a8c3;
  font-size:9px;
  font-weight:750;
}

/* Grupos plegables */
.cleanMenuNav{
  display:grid!important;
  gap:7px!important;
}
.menuGroup{
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
.menuGroup[open]{
  background:rgba(255,255,255,.04);
}
.menuGroupTitle{
  list-style:none;
  display:grid;
  grid-template-columns:27px minmax(0,1fr) 16px;
  gap:8px;
  align-items:center;
  padding:9px 9px;
  cursor:pointer;
  color:#b9c8d9;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.07em;
  user-select:none;
}
.menuGroupTitle::-webkit-details-marker{display:none}
.menuGroupIcon{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#8fb7e8;
  font-size:8px;
  font-weight:950;
  letter-spacing:.04em;
}
.menuGroupChevron{
  color:#7087a3;
  font-size:15px;
  transition:transform .15s ease;
}
.menuGroup[open] .menuGroupChevron{
  transform:rotate(180deg);
}
.menuGroupItems{
  display:grid;
  gap:3px;
  padding:0 6px 7px;
}

/* Opciones sin descripción: mucho más limpias */
.menuItem.compact{
  grid-template-columns:31px minmax(0,1fr) 13px!important;
  gap:8px!important;
  min-height:39px;
  padding:6px 7px!important;
  border-radius:11px!important;
}
.menuItem.compact .menuItemIcon{
  width:31px!important;
  height:31px!important;
  border-radius:10px!important;
  font-size:8px!important;
}
.menuItem.compact .menuItemText{
  display:block!important;
}
.menuItem.compact .menuItemText b{
  font-size:11px!important;
  font-weight:800!important;
}
.menuItem.compact .menuItemArrow{
  font-size:16px!important;
}
.menuItem.compact.active{
  background:linear-gradient(105deg,#2563eb,#1d4ed8)!important;
  box-shadow:0 8px 18px rgba(37,99,235,.22)!important;
}
.menuItem.compact.active .menuItemIcon{
  background:rgba(255,255,255,.16)!important;
}

/* Pie mínimo */
.menuFooter.clean{
  justify-content:center;
  gap:5px;
  padding:9px 4px 1px!important;
  font-size:8px!important;
  color:#7187a1!important;
}

/* Barra superior de contenido más despejada */
.ownerSectionBar{
  min-height:54px!important;
  margin-bottom:14px!important;
  gap:10px!important;
}
.menuLauncher.clean{
  min-width:auto!important;
  padding:8px 11px!important;
  border-radius:14px!important;
}
.menuLauncher.clean .menuLauncherIcon{
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
}
.menuLauncher.clean .menuLauncherText b{
  font-size:11px!important;
}
.ownerCurrentSection.clean{
  display:grid;
  gap:0;
}
.ownerCurrentSection.clean small{
  color:#8a99ab;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:850;
}
.ownerCurrentSection.clean strong{
  font-size:17px;
  letter-spacing:-.035em;
  color:#17283d;
}

/* Más espacio visual en el contenido */
.ownerMain{
  min-width:0;
}
.ownerMain > #ownerContent{
  animation:cleanFadeIn .16s ease;
}
@keyframes cleanFadeIn{
  from{opacity:.5;transform:translateY(3px)}
  to{opacity:1;transform:none}
}

/* Mobile */
@media(max-width:900px){
  .ownerWorkspace,
  .ownerWorkspace.menu-closed{
    grid-template-columns:1fr!important;
  }
  .menuPanel{
    width:min(330px,88vw)!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    height:100dvh!important;
    z-index:80!important;
    border-radius:0 24px 24px 0!important;
    overflow:auto!important;
  }
  .menuPanel.closed{
    width:min(330px,88vw)!important;
    transform:translateX(-105%)!important;
    opacity:1!important;
  }
  .menuGroupTitle{
    padding:10px!important;
  }
  .menuItem.compact{
    min-height:42px;
  }
}


/* =========================================================
   CitaFlow V20.4 - Resumen, Agenda y Recordatorios más limpios
   ========================================================= */
.cleanPageHead{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
  margin-bottom:18px;
}
.cleanPageHead h1{
  margin:3px 0 4px;
  font-size:30px;
  letter-spacing:-.055em;
}
.cleanPageHead p{
  margin:0;
  color:#708198;
  font-size:13px;
}
.cleanIconBtn{min-height:40px!important;padding:9px 13px!important}

.cleanKpiGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.cleanKpiCard{
  min-height:120px;
  padding:17px;
  border:1px solid #dfe7f1;
  border-radius:21px;
  background:linear-gradient(180deg,#fff,#fbfdff);
  box-shadow:0 10px 28px rgba(15,23,42,.045);
  display:grid;
  align-content:center;
}
.cleanKpiCard span{
  color:#7d8da1;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.cleanKpiCard strong{
  margin-top:3px;
  font-size:28px;
  line-height:1.05;
  color:#15263c;
  letter-spacing:-.045em;
}
.cleanKpiCard small{
  margin-top:5px;
  color:#91a0b2;
  font-size:9px;
}
.cleanKpiCard.accent{
  background:linear-gradient(135deg,#153c78,#1d4ed8);
  border-color:#2659b2;
}
.cleanKpiCard.accent span,
.cleanKpiCard.accent small{color:#c8dafe}
.cleanKpiCard.accent strong{color:white}

.cleanAttentionCard{
  margin-top:14px;
  padding:14px 15px;
  border:1px solid #e6d5bb;
  border-radius:19px;
  background:linear-gradient(110deg,#fffdf9,#fff8eb);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}
.cleanAttentionIcon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:#fff0d9;color:#9d6115;
  font-size:18px;font-weight:950;
}
.cleanAttentionMain{display:grid;gap:2px}
.cleanAttentionMain>b{font-size:13px}
.cleanAttentionChips{
  display:flex;gap:5px;flex-wrap:wrap;margin-top:4px
}
.cleanAttentionChips span{
  padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.8);
  border:1px solid #eadfcf;color:#7f6c51;font-size:8px;font-weight:800
}

.cleanQuickActions{
  margin-top:14px;
  border:1px solid #dfe7f1;
  border-radius:22px;
  background:#fff;
  padding:16px;
  box-shadow:0 10px 28px rgba(15,23,42,.04);
}
.cleanQuickActionsHead,
.cleanCardHead{
  display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px
}
.cleanQuickActionsHead h3,
.cleanCardHead h3{margin:2px 0 0;font-size:16px}
.cleanCategoryPill{
  padding:6px 9px;border-radius:999px;background:#eef5ff;color:#245eaf;
  font-size:9px;font-weight:850
}
.cleanActionGrid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.cleanActionBtn{
  border:1px solid #e1e8f1;
  border-radius:15px;
  background:#fbfdff;
  padding:11px;
  display:flex;gap:9px;align-items:center;text-align:left;
  transition:.15s ease;
}
.cleanActionBtn:hover{
  transform:translateY(-1px);
  border-color:#bcd1ec;
  background:#f6faff;
}
.cleanActionIcon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#edf4fc;color:#346aa9;
  font-size:8px;font-weight:950;flex:0 0 34px
}
.cleanActionBtn>span:last-child{display:grid;gap:1px;min-width:0}
.cleanActionBtn b{font-size:11px;color:#263950}
.cleanActionBtn small{font-size:8px;color:#8998a9}

.cleanOverviewBottom{margin-top:14px!important}
.cleanListCard,.cleanShareCard{min-height:100%}
.cleanShareCard{
  display:grid;align-content:start;gap:14px;
  background:linear-gradient(145deg,#fff,#f7faff)!important
}
.cleanBusinessCode{
  padding:14px;border-radius:15px;background:#0e2139;color:#fff;
  font-size:19px;font-weight:900;letter-spacing:.06em;text-align:center
}

.cleanMetricStrip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid #dfe7f1;
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.04);
  margin-bottom:14px;
}
.cleanMetricStrip>div{
  padding:13px 15px;
  border-right:1px solid #e6ecf3;
  display:flex;justify-content:space-between;align-items:center;gap:8px
}
.cleanMetricStrip>div:last-child{border-right:0}
.cleanMetricStrip span{
  color:#75869b;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.05em
}
.cleanMetricStrip b{font-size:20px;color:#1c3048}
.cleanRequestsPanel{margin-bottom:14px!important}
.cleanFilterBar{
  display:flex;gap:7px;flex-wrap:wrap;
  margin-bottom:12px;
  padding:3px
}
.cleanReminderList{display:grid;gap:9px}
.cleanReminderCard{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  padding:14px!important
}
.cleanReminderStatus{
  margin-top:8px;
  display:flex;gap:7px;align-items:center;
  color:#8a98aa;font-size:9px
}
.cleanReminderStatus.sent{color:#42775c}
.cleanReminderStatus>span{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#f0f4f8;font-size:9px;font-weight:950
}
.cleanReminderStatus.sent>span{background:#e9f8ef}
.cleanReminderStatus>div{display:grid;gap:0}
.cleanReminderStatus b{font-size:9px}
.cleanReminderStatus small{font-size:8px;color:inherit}
.cleanReminderActions{
  display:flex;gap:7px;align-items:center;justify-content:flex-end
}

.cleanActionMore{
  position:relative;
}
.cleanActionMore summary{
  list-style:none;cursor:pointer;
  padding:10px 12px;border-radius:12px;
  border:1px solid #dce5ee;background:#fff;
  font-size:10px;font-weight:850;color:#51657d
}
.cleanActionMore summary::-webkit-details-marker{display:none}
.cleanActionMoreMenu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  min-width:190px;padding:7px;border:1px solid #dce5ee;border-radius:14px;
  background:#fff;box-shadow:0 18px 45px rgba(15,23,42,.14);
  display:grid;gap:5px
}
.cleanActionMoreMenu .btn{
  width:100%;justify-content:flex-start;min-height:38px!important;
  padding:8px 10px!important;font-size:10px
}
.cleanFootNote{
  margin-top:12px;text-align:center;color:#8998aa;font-size:9px
}

.cleanDateScroller{
  display:flex;gap:8px;overflow:auto;
  padding:3px 2px 8px;
  scrollbar-width:thin;
}
.cleanDateBtn{
  flex:0 0 68px;
  border:1px solid #dce5ef;
  border-radius:16px;
  background:#fff;
  min-height:76px;
  padding:8px 5px;
  display:grid;place-items:center;
  color:#6e8096;
  box-shadow:0 7px 20px rgba(15,23,42,.035)
}
.cleanDateBtn span,.cleanDateBtn small{
  font-size:8px;text-transform:uppercase;font-weight:850
}
.cleanDateBtn b{
  font-size:21px;color:#1a2d45;line-height:1
}
.cleanDateBtn.active{
  background:linear-gradient(145deg,#1d4ed8,#153c78);
  border-color:#2451a5;color:#dbe8ff;
  box-shadow:0 12px 26px rgba(29,78,216,.22)
}
.cleanDateBtn.active b{color:#fff}

.cleanAgendaGrid{
  grid-template-columns:minmax(0,1.55fr) minmax(270px,.65fr)!important;
  gap:14px!important;
  margin-top:8px
}
.cleanAgendaAppointments{min-width:0}
.cleanCountBadge{
  min-width:30px;height:30px;padding:0 8px;border-radius:999px;
  display:grid;place-items:center;background:#eef4fb;color:#3f638e;
  font-size:10px;font-weight:900
}
.cleanAgendaList{display:grid;gap:8px}
.cleanAgendaAppointment{
  display:grid!important;
  grid-template-columns:68px minmax(0,1fr) auto;
  gap:12px!important;
  align-items:center!important;
  padding:12px!important;
  position:relative
}
.cleanAgendaTime{
  min-height:58px;border-radius:13px;background:#f3f7fb;
  display:grid;place-content:center;text-align:center;padding:6px
}
.cleanAgendaTime b{font-size:13px;color:#1a3556}
.cleanAgendaTime span{font-size:8px;color:#8a98a9;margin-top:2px}
.cleanAgendaStatus{align-self:start}
.cleanAgendaActions{
  grid-column:2/-1;
  display:flex;gap:7px;align-items:center;justify-content:flex-end;
  padding-top:8px;border-top:1px solid #edf1f5
}
.cleanAgendaReminder{
  margin-top:5px;font-size:8px;color:#708097
}
.cleanAgendaReminder.sent{color:#3d7655}

.cleanAgendaSide{display:grid;gap:12px;align-content:start}
.cleanDisclosure{
  padding:0!important;
  overflow:visible!important
}
.cleanDisclosure>summary{
  list-style:none;cursor:pointer;
  padding:15px 16px;
  display:flex;justify-content:space-between;gap:12px;align-items:center
}
.cleanDisclosure>summary::-webkit-details-marker{display:none}
.cleanDisclosure>summary>span:first-child{display:grid;gap:2px}
.cleanDisclosure>summary b{font-size:12px}
.cleanDisclosure>summary small{font-size:8px;color:#8593a5}
.cleanDisclosureArrow{color:#8493a6}
.cleanDisclosure[open] .cleanDisclosureArrow{transform:rotate(180deg)}
.cleanDisclosureBody{
  padding:0 16px 16px;border-top:1px solid #edf1f5;padding-top:14px
}
.cleanBlocksCard{padding:16px!important}
.cleanBlockRow{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid #edf1f5
}
.cleanBlockRow:last-child{border-bottom:0}
.cleanBlockRow>div{display:grid;gap:2px}
.cleanBlockRow b{font-size:10px}
.cleanBlockRow span{font-size:8px;color:#728399}
.cleanBlockRow small{font-size:8px;color:#93a0ae}
.cleanMiniDanger{
  border:0;background:#fff1ef;color:#a54a42;border-radius:9px;
  padding:7px 8px;font-size:8px;font-weight:850
}

@media(max-width:1000px){
  .cleanKpiGrid,.cleanActionGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanAgendaGrid{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  .cleanPageHead{align-items:flex-start;flex-direction:column}
  .cleanPageHead .btn{width:auto}
  .cleanKpiGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanKpiCard{min-height:105px}
  .cleanMetricStrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanMetricStrip>div:nth-child(2){border-right:0}
  .cleanMetricStrip>div:nth-child(-n+2){border-bottom:1px solid #e6ecf3}
  .cleanAttentionCard{grid-template-columns:38px minmax(0,1fr)}
  .cleanAttentionCard .btn{grid-column:1/-1}
  .cleanActionGrid{grid-template-columns:1fr}
  .cleanReminderCard{grid-template-columns:1fr!important}
  .cleanReminderActions{justify-content:flex-start}
  .cleanActionMoreMenu{left:0;right:auto}
  .cleanAgendaAppointment{grid-template-columns:58px minmax(0,1fr)}
  .cleanAgendaStatus{grid-column:2}
  .cleanAgendaActions{grid-column:1/-1;justify-content:flex-start}
}


/* =========================================================
   CitaFlow V20.5 - Clientes, Caja y Reportes más limpios
   ========================================================= */

/* CLIENTES */
.cleanClientSearch{width:min(390px,100%)}
.cleanClientMetrics{margin-bottom:12px}
.cleanClientList{
  display:grid;
  gap:8px;
}
.cleanClientRow{
  display:grid;
  grid-template-columns:46px minmax(180px,1fr) minmax(250px,.9fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 13px;
  border:1px solid #dfe7f1;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 22px rgba(15,23,42,.035);
}
.cleanClientAvatar{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#edf5ff,#dcecff);
  color:#235ca7;font-size:11px;font-weight:950
}
.cleanClientIdentity{
  min-width:0;display:grid;gap:2px
}
.cleanClientName{
  display:flex;gap:6px;align-items:center;min-width:0
}
.cleanClientName>b{
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cleanClientIdentity>span{
  color:#738398;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cleanClientIdentity>small{
  color:#55708e;font-size:8px;font-weight:850;letter-spacing:.04em
}
.cleanVipBadge{
  padding:3px 6px;border-radius:999px;
  background:#fff2ca;color:#8a5c00;font-size:7px;font-weight:950
}
.cleanClientMiniStats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px
}
.cleanClientMiniStats>div{
  padding:7px;border-radius:10px;background:#f6f8fb;
  display:grid;gap:1px;text-align:center
}
.cleanClientMiniStats b{font-size:10px;color:#2a3e57}
.cleanClientMiniStats span{font-size:7px;color:#8997a8;text-transform:uppercase}
.cleanClientActions{
  display:flex;gap:6px;align-items:center;justify-content:flex-end
}

/* CAJA */
.cleanCashSummary{
  display:grid;
  grid-template-columns:repeat(3,140px) minmax(240px,1fr);
  gap:8px;
  margin-bottom:14px
}
.cleanCashPeriod{
  border:1px solid #dfe7f1;border-radius:16px;background:#fff;
  padding:11px;text-align:left;display:grid;gap:2px;
  box-shadow:0 8px 22px rgba(15,23,42,.035)
}
.cleanCashPeriod span{
  color:#7d8da1;font-size:8px;text-transform:uppercase;font-weight:850
}
.cleanCashPeriod b{font-size:15px;color:#273b54}
.cleanCashPeriod.active{
  background:linear-gradient(145deg,#163d79,#1d4ed8);
  border-color:#2458ad
}
.cleanCashPeriod.active span{color:#c8dafe}
.cleanCashPeriod.active b{color:#fff}
.cleanCashBalance{
  padding:11px 14px;border-radius:16px;
  background:#0e2139;color:#fff;
  display:grid;align-content:center
}
.cleanCashBalance span{font-size:8px;color:#96afd0;text-transform:uppercase;font-weight:850}
.cleanCashBalance b{font-size:20px;margin-top:1px}
.cleanCashBalance small{font-size:8px;color:#bac9dc;margin-top:2px}
.cleanQuickPayment{margin-bottom:14px}
.cleanCashMain{
  gap:14px!important;
  margin-top:14px!important;
  align-items:start
}
.cleanLedgerCard{min-width:0}
.cleanLedger{display:grid;gap:2px}
.cleanLedgerRow{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:10px!important;
  align-items:center!important;
  padding:10px 0!important;
  border:0!important;
  border-bottom:1px solid #edf1f5!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.cleanLedgerRow:last-child{border-bottom:0!important}
.cleanLedgerAmount{
  display:flex;gap:8px;align-items:center;justify-content:flex-end
}
.cleanLedgerAmount>b{font-size:12px}
.cleanManualMovement{padding:0!important}
.cleanPolicyFees{
  padding:0!important;
  margin-bottom:14px
}
.cleanPolicyFeeRow{
  grid-template-columns:minmax(0,1fr) auto auto!important
}
.cleanAppointmentPayments{
  padding:0!important;
  margin-top:14px
}
.cleanPaymentList{display:grid;gap:0}
.cleanPaymentRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf1f5
}
.cleanPaymentRow:last-child{border-bottom:0}
.cleanPaymentProgress{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:5px;
  font-size:8px;color:#7b8a9d
}
.cleanPaymentProgress b{color:#465e79}
.cleanPaymentActions{
  display:flex;gap:6px;align-items:center;justify-content:flex-end
}

/* REPORTES */
.cleanReportPeriods{display:flex;gap:6px;flex-wrap:wrap}
.cleanReportRange{
  margin:-7px 0 11px;
  color:#8a98aa;font-size:9px
}
.cleanReportHero{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(0,1.4fr);
  gap:12px;
  margin-bottom:14px
}
.cleanReportNet{
  border-radius:23px;
  padding:20px;
  background:linear-gradient(145deg,#0d2038,#16437f);
  color:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.12);
  display:grid;align-content:center
}
.cleanReportNet span{
  color:#9fb7d6;font-size:9px;text-transform:uppercase;font-weight:850
}
.cleanReportNet strong{
  font-size:34px;letter-spacing:-.05em;margin-top:3px
}
.cleanReportNet small{color:#c2d0e2;font-size:8px;margin-top:5px}
.cleanReportHeroStats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px
}
.cleanReportHeroStats>div{
  padding:14px;border:1px solid #dfe7f1;border-radius:18px;
  background:#fff;display:grid;align-content:center;
  box-shadow:0 8px 22px rgba(15,23,42,.035)
}
.cleanReportHeroStats span{
  font-size:8px;color:#8190a2;text-transform:uppercase;font-weight:850
}
.cleanReportHeroStats b{
  margin-top:2px;font-size:20px;color:#223750
}
.cleanReportHeroStats small{font-size:8px;color:#8a98aa}
.cleanReportCharts,.cleanReportBottom{gap:14px!important}
.cleanReportBottom{margin-top:14px!important}
.cleanStatusList{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px
}
.cleanStatusList>div{
  padding:10px 7px;border-radius:12px;background:#f6f8fb;
  display:grid;place-items:center;text-align:center
}
.cleanStatusList b{font-size:14px;margin-top:3px}
.cleanStatusList small{font-size:7px;color:#8493a5;margin-top:1px}
.cleanExportCard{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:14px;align-items:center
}
.cleanExportCard h3{margin:2px 0 4px}
.cleanExportActions{display:flex;gap:7px;flex-wrap:wrap}

/* Responsive */
@media(max-width:1050px){
  .cleanClientRow{
    grid-template-columns:46px minmax(0,1fr) auto
  }
  .cleanClientMiniStats{grid-column:2/-1}
  .cleanCashSummary{grid-template-columns:repeat(3,1fr)}
  .cleanCashBalance{grid-column:1/-1}
}
@media(max-width:800px){
  .cleanReportHero{grid-template-columns:1fr}
  .cleanReportHeroStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanStatusList{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cleanExportCard{grid-template-columns:1fr}
}
@media(max-width:700px){
  .cleanClientRow{
    grid-template-columns:42px minmax(0,1fr);
    align-items:start
  }
  .cleanClientMiniStats{
    grid-column:1/-1;
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .cleanClientActions{
    grid-column:1/-1;
    justify-content:flex-start
  }
  .cleanClientActions .btn{width:auto}
  .cleanCashSummary{grid-template-columns:1fr}
  .cleanCashBalance{grid-column:auto}
  .cleanCashMain{grid-template-columns:1fr!important}
  .cleanPolicyFeeRow{grid-template-columns:1fr!important}
  .cleanPaymentRow{grid-template-columns:1fr}
  .cleanPaymentActions{justify-content:flex-start}
  .cleanReportHeroStats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanStatusList{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanExportActions{display:grid}
}


/* =========================================================
   CitaFlow V20.6 - Selector múltiple de servicios en Caja
   ========================================================= */
.manualServiceSelector{
  border:1px solid #d7e2ee;
  border-radius:15px;
  background:#fff;
  overflow:visible;
}
.manualServiceSelector>summary{
  list-style:none;
  cursor:pointer;
  min-height:48px;
  padding:10px 13px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.manualServiceSelector>summary::-webkit-details-marker{display:none}
.manualServiceSelector>summary>span:first-child{
  display:grid;
  gap:1px;
}
.manualServiceSelector>summary b{
  font-size:11px;
  color:#2c4058;
}
.manualServiceSelector>summary small{
  color:#8594a6;
  font-size:8px;
}
.manualServiceSelector[open]{
  border-color:#91b7ec;
  box-shadow:0 0 0 3px rgba(37,99,235,.07);
}
.manualServiceSelector[open] .cleanDisclosureArrow{
  transform:rotate(180deg);
}
.manualServiceOptions{
  display:grid;
  gap:6px;
  max-height:250px;
  overflow:auto;
  padding:8px;
  border-top:1px solid #edf1f5;
  background:#fafcff;
}
.manualServiceOption{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:.14s ease;
}
.manualServiceOption:hover{
  border-color:#b7ceed;
  background:#f7fbff;
}
.manualServiceOption:has(input:checked){
  border-color:#7aa8eb;
  background:#eef5ff;
}
.manualServiceOption input{
  width:17px;
  height:17px;
  accent-color:#2563eb;
}
.manualServiceOptionText{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.manualServiceOptionText b{
  font-size:10px;
  color:#2d4058;
}
.manualServiceOptionText small{
  font-size:9px;
  color:#55718e;
  font-weight:850;
}
.manualServiceSelectionSummary{
  display:grid;
  gap:7px;
  margin-top:8px;
}
.manualSelectedServices{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}
.manualSelectedServices span{
  padding:5px 8px;
  border-radius:999px;
  background:#edf5ff;
  border:1px solid #d7e6fb;
  color:#315e96;
  font-size:8px;
  font-weight:800;
}
.manualSelectedTotal{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:8px 10px;
  border-radius:11px;
  background:#f6f8fb;
}
.manualSelectedTotal span{
  color:#7c8b9e;
  font-size:8px;
  text-transform:uppercase;
  font-weight:850;
}
.manualSelectedTotal b{
  font-size:11px;
  color:#263b55;
}


/* =========================================================
   CitaFlow V20.7 - Servicios, Equipo y Horarios más limpios
   ========================================================= */

/* Servicios */
.cleanServiceMetrics{margin-bottom:12px}
.cleanAddService{padding:0!important;margin-bottom:12px}
.cleanServiceListCard{padding:16px!important}
.cleanServiceList{display:grid;gap:0}
.cleanServiceRow{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto;
  gap:11px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf1f5
}
.cleanServiceRow:last-child{border-bottom:0}
.cleanServiceRow.inactive{opacity:.62}
.cleanServiceIcon{
  width:42px;height:42px;border-radius:13px;
  display:grid;place-items:center;
  background:#edf4fc;color:#2c64a6;
  font-size:11px;font-weight:950
}
.cleanServiceMain{display:grid;gap:2px;min-width:0}
.cleanServiceName{display:flex;gap:7px;align-items:center;min-width:0}
.cleanServiceName>b{
  font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cleanServiceMain>span{font-size:9px;color:#8190a2}
.cleanServiceStatus{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  font-size:7px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em
}
.cleanServiceStatus.active{background:#eaf8f0;color:#2e7650}
.cleanServiceStatus.inactive{background:#eff2f5;color:#738294}
.cleanServicePrice{
  min-width:72px;
  text-align:right;
  font-size:13px;
  font-weight:900;
  color:#203852
}
.cleanInputSuffix{display:flex;align-items:center;gap:7px}
.cleanInputSuffix .input{flex:1}
.cleanInputSuffix>span{
  font-size:9px;color:#8190a2;font-weight:800
}
.cleanServiceEditModal{max-width:560px}

/* Equipo */
.cleanTeamMetrics{margin-bottom:12px}
.cleanAddStaff{padding:0!important;margin-bottom:12px}
.cleanCheckGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px
}
.cleanCheckOption{
  display:flex;gap:8px;align-items:center;
  padding:9px 10px;border:1px solid #e0e7ef;border-radius:11px;
  background:#fbfdff;font-size:10px;color:#40556f;cursor:pointer
}
.cleanCheckOption input{width:16px;height:16px;accent-color:#2563eb}
.cleanTeamList{display:grid;gap:10px}
.cleanStaffCard{padding:14px!important}
.cleanStaffCard.inactive{opacity:.68}
.cleanStaffTop{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  gap:11px;
  align-items:center
}
.cleanStaffAvatar{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#e8f2ff,#d5e7ff);
  color:#245da7;font-size:10px;font-weight:950
}
.cleanStaffIdentity{display:grid;gap:2px;min-width:0}
.cleanStaffName{display:flex;gap:6px;align-items:center;min-width:0}
.cleanStaffName>b{
  font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cleanStaffIdentity>span{font-size:9px;color:#74859a}
.cleanStaffIdentity>small{font-size:8px;color:#95a1af}
.cleanStaffBadges{
  display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:wrap
}
.cleanStaffSettings{
  margin-top:11px;
  border-top:1px solid #edf1f5
}
.cleanStaffSettings>summary{
  list-style:none;
  cursor:pointer;
  min-height:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#53677e;
  font-size:9px;
  font-weight:850
}
.cleanStaffSettings>summary::-webkit-details-marker{display:none}
.cleanStaffSettings[open] .cleanDisclosureArrow{transform:rotate(180deg)}
.cleanStaffSettingsBody{display:grid;gap:11px;padding:2px 0 2px}
.cleanStaffSettingSection{
  padding:11px;border-radius:13px;background:#f7f9fc
}
.cleanSettingTitle{display:grid;gap:1px;margin-bottom:8px}
.cleanSettingTitle b{font-size:10px}
.cleanSettingTitle small{font-size:8px;color:#8a98aa}
.cleanServicePills{display:flex;gap:6px;flex-wrap:wrap}
.cleanServicePills .pill{font-size:9px;padding:7px 9px}
.cleanStaffActions{display:flex;gap:7px;flex-wrap:wrap}
.cleanGeneratedStaffCode{margin-top:0!important}

/* Horarios */
.cleanHoursStaffSelect{
  width:min(280px,100%);
  display:grid;gap:5px
}
.cleanHoursStaffSelect label{
  font-size:9px;color:#7c8b9d;text-transform:uppercase;font-weight:850
}
.cleanHoursSummary{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:8px;
  margin-bottom:12px
}
.cleanHoursSummary>div{
  padding:12px 14px;border:1px solid #dfe7f1;border-radius:16px;background:#fff;
  display:grid;gap:1px;box-shadow:0 8px 22px rgba(15,23,42,.035)
}
.cleanHoursSummary span{
  font-size:8px;color:#8392a4;text-transform:uppercase;font-weight:850
}
.cleanHoursSummary b{font-size:14px;color:#263b55}
.cleanHoursSummary small{font-size:8px;color:#98a4b1}
.cleanHoursWeek{display:grid;gap:8px}
.hoursDayRow{
  padding:13px 14px!important;
  transition:.15s ease
}
.hoursDayRow.closed{
  background:#f8fafc!important;
  box-shadow:none!important
}
.hoursDayRow.closed .hoursDayTimes,
.hoursDayRow.closed .hoursBreakDetails{
  opacity:.48
}
.hoursDayTop{
  display:flex;justify-content:space-between;gap:12px;align-items:center
}
.hoursDayName{display:flex;gap:8px;align-items:center}
.hoursDayName>b{font-size:12px}
.hoursDayStatus{
  padding:4px 7px;border-radius:999px;
  background:#eaf8f0;color:#2e7650;
  font-size:7px;font-weight:900;text-transform:uppercase
}
.hoursDayRow.closed .hoursDayStatus{
  background:#eef1f4;color:#7a8898
}
.cleanToggle{
  display:inline-flex;
  position:relative;
  width:42px;height:24px
}
.cleanToggle input{
  position:absolute;opacity:0;pointer-events:none
}
.cleanToggle span{
  width:42px;height:24px;border-radius:999px;
  background:#ced7e2;
  position:relative;transition:.15s ease
}
.cleanToggle span:after{
  content:"";
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.18);
  transition:.15s ease
}
.cleanToggle input:checked+span{background:#2563eb}
.cleanToggle input:checked+span:after{transform:translateX(18px)}
.hoursDayTimes{
  display:grid;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);
  gap:8px;align-items:end;
  margin-top:10px
}
.hoursTimeArrow{
  display:grid;place-items:center;
  min-height:47px;
  color:#95a3b3;font-size:14px
}
.hoursBreakDetails{
  margin-top:9px;
  border-top:1px solid #edf1f5
}
.hoursBreakDetails>summary{
  list-style:none;cursor:pointer;
  min-height:38px;
  display:flex;justify-content:space-between;align-items:center;
  color:#53677e
}
.hoursBreakDetails>summary::-webkit-details-marker{display:none}
.hoursBreakDetails>summary>span:first-child{display:flex;gap:7px;align-items:center}
.hoursBreakDetails>summary b{font-size:9px}
.hoursBreakDetails>summary small{font-size:8px;color:#8a98aa}
.hoursBreakDetails[open] .cleanDisclosureArrow{transform:rotate(180deg)}
.hoursBreakBody{
  padding:8px 0 2px;
  display:grid;gap:9px
}
.hoursBreakSwitch{font-size:9px}
.cleanHoursSaveBar{
  position:sticky;
  bottom:12px;
  z-index:15;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #d8e3ef;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(15,23,42,.12);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.cleanHoursSaveBar>div{display:grid;gap:1px}
.cleanHoursSaveBar b{font-size:11px}
.cleanHoursSaveBar span{font-size:8px;color:#8a98aa}

@media(max-width:760px){
  .cleanServiceRow{
    grid-template-columns:42px minmax(0,1fr) auto
  }
  .cleanServiceRow>.cleanActionMore{grid-column:2/-1;justify-self:start}
  .cleanServicePrice{font-size:12px}
  .cleanCheckGrid{grid-template-columns:1fr}
  .cleanStaffTop{grid-template-columns:44px minmax(0,1fr)}
  .cleanStaffBadges{grid-column:1/-1;justify-content:flex-start}
  .cleanStaffActions{display:grid}
  .cleanHoursSummary{grid-template-columns:1fr}
  .hoursDayTimes{grid-template-columns:1fr}
  .hoursTimeArrow{display:none}
  .cleanHoursSaveBar{align-items:stretch;flex-direction:column}
}


/* =========================================================
   CitaFlow V20.8 - Lista de espera, Promociones y Perfil
   ========================================================= */

/* Lista de espera */
.cleanWaitlistMetrics{margin-bottom:10px}
.cleanWaitlistFilters{margin-bottom:10px}
.cleanWaitlistList{display:grid;gap:8px}
.cleanWaitlistRow{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:12px 13px!important
}
.cleanWaitlistRow .waitlistClientAvatar{
  width:44px;height:44px;border-radius:13px
}
.cleanWaitlistMain{
  min-width:0;display:grid;gap:2px
}
.cleanWaitlistName{
  display:flex;gap:7px;align-items:center;flex-wrap:wrap
}
.cleanWaitlistName>b{font-size:12px}
.cleanWaitlistMain>span{
  font-size:9px;color:#6f8095;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cleanWaitlistMain>small{font-size:8px;color:#91a0b2}
.cleanWaitlistMain .waitlistNote{
  margin-top:4px;padding:6px 8px;border-radius:9px;font-size:8px
}
.cleanWaitlistActions{
  display:flex;gap:6px;align-items:center;justify-content:flex-end
}

/* Promociones */
.cleanPromoMetrics{margin-bottom:10px}
.cleanPromoCreate{
  padding:0!important;
  margin-bottom:12px
}
.cleanPromoListCard{padding:16px!important}
.cleanPromoList{display:grid;gap:0}
.cleanPromoRow{
  display:grid;
  grid-template-columns:100px minmax(0,1fr) auto auto;
  gap:11px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf1f5
}
.cleanPromoRow:last-child{border-bottom:0}
.cleanPromoRow .promoCodeDisplay{
  justify-content:center;
  min-width:0;
  font-size:11px
}
.cleanPromoMain{
  display:grid;gap:2px;min-width:0
}
.cleanPromoMain>b{font-size:11px;color:#293d56}
.cleanPromoMain>span{font-size:9px;color:#708197}
.cleanPromoMain>small{font-size:8px;color:#93a0ae}
.cleanPromoActions{
  display:flex;gap:6px;align-items:center;justify-content:flex-end
}

/* Perfil */
.cleanProfileTop{
  align-items:start;
  margin-bottom:14px
}
.cleanProfileCard{
  padding:18px!important;
}
.cleanProfileCard>h3{
  margin:3px 0 13px!important;
  font-size:17px
}
.schedulePrivacyOwnerCard,
.cancellationPolicyOwnerCard,
.businessPricingOwnerCard{
  box-shadow:0 10px 28px rgba(15,23,42,.045)!important
}
.schedulePrivacyOwnerCard{
  padding:16px!important
}
.cancellationPolicyOwnerCard,
.businessPricingOwnerCard{
  padding:18px!important
}
.profileGuideBanner{
  margin-top:14px!important;
  border-radius:18px!important;
  padding:13px 15px!important;
  background:linear-gradient(110deg,#fff,#f6f9fe)!important;
  border:1px solid #dfe7f1!important;
  box-shadow:0 8px 22px rgba(15,23,42,.035)
}
.cleanProfileSaveBar{
  position:sticky;
  bottom:12px;
  z-index:20;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #d8e3ef;
  border-radius:18px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);
  box-shadow:0 16px 40px rgba(15,23,42,.12);
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}
.cleanProfileSaveBar>div{display:grid;gap:1px}
.cleanProfileSaveBar b{font-size:11px}
.cleanProfileSaveBar span{font-size:8px;color:#8a98aa}

/* Hacer bloques largos del perfil visualmente más respirables */
.policyOwnerSettings,
.pricingSettingsGrid{
  gap:10px!important
}
.policyFeeConfig,
.pricingSettingBlock{
  padding:11px!important;
  border-radius:13px!important;
  background:#f8fafc!important
}
.schedulePrivacyOwnerInfo,
.currencyProfileNote,
.pricingCalculationNote{
  border-radius:12px!important;
  font-size:9px!important
}

@media(max-width:850px){
  .cleanPromoRow{
    grid-template-columns:90px minmax(0,1fr) auto
  }
  .cleanPromoActions{
    grid-column:2/-1;
    justify-content:flex-start
  }
}
@media(max-width:700px){
  .cleanWaitlistRow{
    grid-template-columns:42px minmax(0,1fr)
  }
  .cleanWaitlistActions{
    grid-column:1/-1;
    justify-content:flex-start
  }
  .cleanPromoRow{
    grid-template-columns:1fr
  }
  .cleanPromoRow .promoCodeDisplay{
    width:max-content
  }
  .cleanPromoActions{
    grid-column:auto
  }
  .cleanProfileTop{
    grid-template-columns:1fr!important
  }
  .cleanProfileSaveBar{
    flex-direction:column;
    align-items:stretch
  }
}


/* =========================================================
   CitaFlow V20.9 - Avisos, Comisiones y Guía más limpios
   ========================================================= */

/* Avisos */
.cleanAlertMetrics{margin-bottom:10px}
.cleanAlertsList{display:grid;gap:8px}
.cleanAlertRow{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:12px 13px!important
}
.cleanAlertRow.read{opacity:.72}
.cleanAlertDot{
  width:8px;height:8px;border-radius:50%;
  background:#2d73df;
  box-shadow:0 0 0 4px rgba(45,115,223,.10)
}
.cleanAlertRow.read .cleanAlertDot{
  background:#b3becb;box-shadow:none
}
.cleanAlertMain{
  min-width:0;display:grid;gap:2px
}
.cleanAlertTitle{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.cleanAlertTitle>b{font-size:12px}
.cleanAlertMain>span{
  font-size:9px;color:#718198;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cleanAlertMain>small{font-size:8px;color:#98a4b1}
.cleanReadBadge,.cleanUnreadBadge{
  padding:3px 6px;border-radius:999px;
  font-size:7px;font-weight:900;text-transform:uppercase
}
.cleanReadBadge{background:#eef2f5;color:#718092}
.cleanUnreadBadge{background:#eaf3ff;color:#2861a7}

/* Comisiones */
.cleanCommissionHero{
  display:grid;
  grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);
  gap:12px;
  margin-bottom:14px
}
.cleanCommissionMain{
  padding:20px;
  border-radius:23px;
  background:linear-gradient(145deg,#0e2139,#184a89);
  color:#fff;
  display:grid;align-content:center;
  box-shadow:0 14px 34px rgba(15,23,42,.12)
}
.cleanCommissionMain span{
  color:#9fb7d6;font-size:9px;text-transform:uppercase;font-weight:850
}
.cleanCommissionMain strong{
  font-size:34px;letter-spacing:-.05em;margin-top:2px
}
.cleanCommissionMain small{font-size:8px;color:#c1d0e2;margin-top:3px}
.cleanCommissionStats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px
}
.cleanCommissionStats>div{
  padding:14px;
  border:1px solid #dfe7f1;
  border-radius:18px;
  background:#fff;
  display:grid;align-content:center;
  box-shadow:0 8px 22px rgba(15,23,42,.035)
}
.cleanCommissionStats span{
  font-size:8px;color:#8090a2;text-transform:uppercase;font-weight:850
}
.cleanCommissionStats b{font-size:17px;color:#263b54;margin-top:2px}
.cleanCommissionTop{gap:14px!important;align-items:start}
.cleanCommissionSettings{display:grid;gap:7px}
.cleanCommissionStaffRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #edf1f5
}
.cleanCommissionStaffRow:last-child{border-bottom:0}
.cleanCommissionEditor{
  display:grid;
  grid-template-columns:82px 18px auto;
  gap:6px;
  align-items:center
}
.cleanCommissionEditor .input{min-height:40px!important}
.cleanCommissionEditor>span{font-size:10px;color:#728298}
.cleanCommissionSummaryCard{padding:16px!important}
.cleanCommissionSummary{display:grid;gap:0}
.cleanCommissionSummaryRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #edf1f5
}
.cleanCommissionSummaryRow:last-child{border-bottom:0}
.cleanCommissionSummaryRow>div:first-child{display:grid;gap:1px}
.cleanCommissionSummaryRow>div:first-child b{font-size:11px}
.cleanCommissionSummaryRow>div:first-child span{font-size:8px;color:#8998aa}
.cleanCommissionSummaryRow>div:last-child{text-align:right;display:grid}
.cleanCommissionSummaryRow strong{font-size:13px;color:#a45c1e}
.cleanCommissionSummaryRow small{font-size:7px;color:#98a4b1;text-transform:uppercase}
.cleanCommissionDetail{padding:0!important;margin-top:14px}
.cleanCommissionList{display:grid;gap:0}
.cleanCommissionAppointment{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:11px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #edf1f5
}
.cleanCommissionAppointment:last-child{border-bottom:0}
.cleanCommissionAmount{
  display:grid;gap:4px;justify-items:end
}
.cleanCommissionAmount>b{font-size:13px}

/* Guía */
.cleanGuideStart{padding:17px!important}
.cleanGuideSteps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
  margin-top:6px
}
.cleanGuideStep{
  min-height:78px;
  padding:10px;
  border-radius:13px;
  background:#f6f8fb;
  display:grid;
  align-content:start;
  gap:7px
}
.cleanGuideStep>span{
  width:24px;height:24px;border-radius:8px;
  display:grid;place-items:center;
  background:#e7f0ff;color:#2b63a8;
  font-size:8px;font-weight:950
}
.cleanGuideStep>b{
  font-size:9px;line-height:1.35;color:#3b5069
}
.cleanGuideActions{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-top:12px
}
.cleanGuideSections{
  display:grid;
  gap:9px;
  margin-top:12px
}
.cleanGuideSections>.cleanDisclosure{padding:0!important}
.cleanGuideServiceList{display:grid;gap:0}
.cleanGuideServiceList>div{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid #edf1f5
}
.cleanGuideServiceList>div:last-child{border-bottom:0}
.cleanGuideServiceList b{font-size:10px}
.cleanGuideServiceList span{font-size:9px;color:#708197}
.cleanGuideBullets{margin:0!important}
.cleanGuideText{
  margin:0 0 10px;
  color:#66788d;
  font-size:10px;
  line-height:1.55
}

@media(max-width:900px){
  .cleanCommissionHero{grid-template-columns:1fr}
  .cleanGuideSteps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cleanGuideActions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .cleanAlertRow{grid-template-columns:9px minmax(0,1fr)}
  .cleanAlertRow>.btn,.cleanAlertRow>.cleanActionMore{grid-column:2}
  .cleanCommissionStats{grid-template-columns:1fr}
  .cleanCommissionTop{grid-template-columns:1fr!important}
  .cleanCommissionStaffRow{grid-template-columns:1fr}
  .cleanCommissionEditor{grid-template-columns:minmax(0,1fr) 18px auto}
  .cleanCommissionAppointment{grid-template-columns:1fr}
  .cleanCommissionAmount{justify-items:start}
  .cleanGuideSteps{grid-template-columns:1fr}
  .cleanGuideActions{grid-template-columns:1fr}
}


/* =========================================================
   CitaFlow V21 - Suscripciones + Panel Maestro
   ========================================================= */

.topAdminBtn{
  border-color:#b7cfff!important;
  background:#eef5ff!important;
  color:#1d56a3!important;
}

/* Mi suscripción */
.subscriptionOwnerHero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.7fr);
  gap:14px;
}
.subscriptionPlanCard{
  padding:22px;
  border-radius:25px;
  background:linear-gradient(145deg,#0d2038,#174a89);
  color:#fff;
  box-shadow:0 16px 42px rgba(15,23,42,.15);
}
.subscriptionPlanTop{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.subscriptionPlanTop>div>span{
  color:#9fb7d6;
  font-size:9px;
  text-transform:uppercase;
  font-weight:850;
}
.subscriptionPlanTop h2{
  margin:4px 0 0;
  font-size:22px;
}
.subscriptionStatus{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.subscriptionStatus.trialing{background:#fff1ce;color:#885b00}
.subscriptionStatus.active{background:#e6f8ed;color:#28734c}
.subscriptionStatus.past_due{background:#fff0e9;color:#a14c2d}
.subscriptionStatus.paused{background:#edf1f5;color:#67778a}
.subscriptionStatus.canceled{background:#ffe9e7;color:#a33f39}
.subscriptionPriceBig{
  margin-top:26px;
  font-size:38px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.055em;
}
.subscriptionPriceBig small{
  font-size:11px;
  color:#bfd0e5;
  font-weight:750;
  letter-spacing:0;
}
.subscriptionFxNote{
  margin-top:8px;
  color:#b8cbe2;
  font-size:9px;
}
.subscriptionOfferApplied{
  margin-top:18px;
  padding:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:rgba(255,255,255,.08);
  display:grid;
  gap:2px;
}
.subscriptionOfferApplied span{
  color:#9fb7d6;
  font-size:8px;
  text-transform:uppercase;
  font-weight:850;
}
.subscriptionOfferApplied b{font-size:12px}
.subscriptionOfferApplied small{font-size:8px;color:#c6d5e7}
.subscriptionTrialBox{
  margin-top:12px;
  padding:11px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  display:grid;
  gap:2px;
}
.subscriptionTrialBox b{font-size:10px}
.subscriptionTrialBox span{font-size:8px;color:#c5d4e5}

.subscriptionDetailsCard{
  padding:18px!important;
}
.subscriptionDetailRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid #edf1f5;
}
.subscriptionDetailRow span{font-size:9px;color:#78899d}
.subscriptionDetailRow b{font-size:10px;color:#273d57}
.subscriptionPaymentPending{
  margin-top:12px;
  padding:10px;
  border-radius:12px;
  background:#f5f8fc;
  color:#6d7f94;
  font-size:8px;
  line-height:1.45;
}
.platformClaimCard{
  margin-top:14px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
}

/* Panel Maestro */
.platformAdminContainer{
  padding-top:22px;
  padding-bottom:60px;
}
.platformAdminMetrics{margin-bottom:14px}
.platformAdminGrid{
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(0,1.28fr);
  gap:14px;
  align-items:start;
}
.platformPlanCard,.platformFxCard{
  padding:18px!important;
}
.platformFxList{
  display:grid;
  max-height:520px;
  overflow:auto;
  border:1px solid #e1e8f0;
  border-radius:14px;
}
.platformFxRow{
  display:grid;
  grid-template-columns:minmax(130px,1fr) 130px 110px;
  gap:9px;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid #edf1f5;
}
.platformFxRow:last-child{border-bottom:0}
.platformFxRow>div{
  display:grid;
  gap:1px;
}
.platformFxRow>div b{font-size:10px}
.platformFxRow>div span{font-size:8px;color:#8594a6}
.platformFxRow .input{
  min-height:36px!important;
  padding:7px 9px!important;
  font-size:9px!important;
}
.platformFxRow>strong{
  text-align:right;
  font-size:10px;
  color:#2b4058;
}
.platformFxActions{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.platformFxActions small{
  color:#909dab;
  font-size:7px;
}
.platformCustomersCard{
  margin-top:14px;
  padding:17px!important;
}
.platformCustomersHead .input{
  width:min(330px,100%);
}
.platformBusinessList{display:grid;gap:0}
.platformBusinessRow{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto 120px auto;
  gap:11px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf1f5;
}
.platformBusinessRow:last-child{border-bottom:0}
.platformBusinessAvatar{
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:#e9f2ff;
  color:#2b64a9;
  font-size:9px;
  font-weight:950;
}
.platformBusinessMain{
  display:grid;
  gap:2px;
  min-width:0;
}
.platformBusinessMain>b{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.platformBusinessMain>span{
  font-size:8px;
  color:#73849a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.platformBusinessMain>small{
  font-size:8px;
  color:#95a2b0;
}
.platformBusinessPrice{
  display:grid;
  justify-items:end;
  gap:1px;
}
.platformBusinessPrice b{font-size:12px}
.platformBusinessPrice small{font-size:7px;color:#8a98a8}

/* Modal cliente SaaS */
.platformBusinessModal{
  max-width:820px!important;
}
.platformClientQuote{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:8px 0 14px;
}
.platformClientQuote>div{
  padding:11px;
  border-radius:13px;
  background:#f6f8fb;
  display:grid;
  gap:2px;
}
.platformClientQuote>div.final{
  background:#edf5ff;
}
.platformClientQuote span{
  font-size:8px;
  color:#7d8c9f;
  text-transform:uppercase;
  font-weight:850;
}
.platformClientQuote b{
  font-size:13px;
  color:#263d58;
}
.platformClientControls{
  align-items:start;
}
.platformClientControls .inset{
  padding:14px!important;
  box-shadow:none!important;
  background:#fbfcfe!important;
}
.platformExtendTrial{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
}
.platformOfferButtons{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.platformBillingNote{
  margin-top:12px;
}

@media(max-width:950px){
  .platformAdminGrid{grid-template-columns:1fr}
  .platformBusinessRow{
    grid-template-columns:44px minmax(0,1fr) auto;
  }
  .platformBusinessRow>.platformBusinessPrice{
    grid-column:2;
    justify-items:start;
  }
  .platformBusinessRow>.managePlatformBusiness{
    grid-column:3;
  }
}
@media(max-width:760px){
  .subscriptionOwnerHero{grid-template-columns:1fr}
  .platformClaimCard{
    align-items:stretch;
    flex-direction:column;
  }
  .platformFxRow{
    grid-template-columns:1fr 120px;
  }
  .platformFxRow>strong{
    grid-column:1/-1;
    text-align:left;
  }
  .platformCustomersHead{
    align-items:stretch!important;
    flex-direction:column;
  }
  .platformCustomersHead .input{width:100%}
  .platformBusinessRow{
    grid-template-columns:42px minmax(0,1fr);
  }
  .platformBusinessRow>.subscriptionStatus,
  .platformBusinessRow>.platformBusinessPrice,
  .platformBusinessRow>.managePlatformBusiness{
    grid-column:2;
    justify-self:start;
  }
  .platformClientQuote{grid-template-columns:1fr}
  .platformClientControls{grid-template-columns:1fr!important}
}


/* =========================================================
   CitaFlow V21.1 - Divisas automáticas + edición por unidad
   ========================================================= */

.platformFxAutoInfo{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:11px 12px;
  margin:10px 0;
  border:1px solid #d6e7da;
  border-radius:13px;
  background:#f3fbf5;
}
.platformFxAutoInfo>div{
  display:grid;
  gap:2px;
}
.platformFxAutoInfo b{
  font-size:10px;
  color:#2d6944;
}
.platformFxAutoInfo span{
  font-size:8px;
  color:#648071;
  line-height:1.4;
}
.platformAutoBadge{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  background:#dff4e6;
  color:#237143!important;
  font-size:7px!important;
  font-weight:950;
}

.platformFxRow{
  grid-template-columns:minmax(135px,1fr) minmax(150px,.9fr) minmax(115px,.7fr) auto!important;
  gap:10px!important;
}
.platformFxRow.manual{
  background:#fffdf7;
}
.platformFxRow.editing{
  background:#f6faff;
  box-shadow:inset 3px 0 0 #3b82f6;
}

.platformFxCurrency{
  display:grid!important;
  gap:2px!important;
}
.platformFxCurrencyTop{
  display:flex!important;
  gap:6px;
  align-items:center;
}
.platformFxCurrencyTop>b{
  font-size:11px!important;
}
.platformFxCurrency>span{
  font-size:8px!important;
  color:#7b8a9c!important;
}
.platformFxCurrency>small{
  font-size:7px;
  color:#a0abb7;
}

.platformRateMode{
  display:inline-flex;
  width:max-content;
  padding:3px 6px;
  border-radius:999px;
  font-size:6px;
  line-height:1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.platformRateMode.auto{
  background:#e8f7ee;
  color:#2f7751;
}
.platformRateMode.manual{
  background:#fff1d7;
  color:#936116;
}
.platformRateMode.base{
  background:#edf1f5;
  color:#667789;
}

.platformFxRateControl{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px;
  align-items:center;
}
.platformFxRateControl label{
  font-size:7px;
  color:#8291a3;
  font-weight:850;
  white-space:nowrap;
}
.platformFxRateControl .input[readonly]{
  background:#f5f7fa!important;
  color:#607085!important;
  cursor:default;
}
.platformFxRow.manual .platformFxRateControl .input{
  background:#fff!important;
  border-color:#e7c778!important;
}

.platformFxConverted{
  display:grid;
  justify-items:end;
  gap:1px;
}
.platformFxConverted span{
  font-size:7px;
  color:#8997a7;
  text-transform:uppercase;
  font-weight:850;
}
.platformFxConverted strong{
  font-size:11px;
  color:#263c56;
}

.platformFxRowActions{
  display:flex;
  gap:5px;
  align-items:center;
  justify-content:flex-end;
  min-width:118px;
}
.platformFxRowActions .btn{
  min-height:34px!important;
  padding:7px 9px!important;
  font-size:8px!important;
}
.platformRateLocked{
  padding:5px 8px;
  border-radius:999px;
  background:#eef2f5;
  color:#758497;
  font-size:7px;
  font-weight:850;
}

.platformFxActions{
  align-items:center!important;
}
.platformFxActions small{
  max-width:420px;
  line-height:1.35;
}

@media(max-width:850px){
  .platformFxRow{
    grid-template-columns:minmax(120px,1fr) minmax(145px,1fr)!important;
  }
  .platformFxConverted{
    justify-items:start;
  }
  .platformFxRowActions{
    justify-content:flex-start;
  }
}
@media(max-width:620px){
  .platformFxRow{
    grid-template-columns:1fr!important;
  }
  .platformFxRateControl{
    grid-template-columns:52px minmax(0,1fr);
  }
  .platformFxRowActions{
    min-width:0;
  }
}


/* =========================================================
   CitaFlow V21.2 - 3 Planes editables + permisos por plan
   ========================================================= */

/* Comparación para el dueño del negocio */
.subscriptionCurrentDescription{
  margin-top:12px;
  max-width:620px;
  color:#d1ddec;
  font-size:10px;
  line-height:1.5;
}
.subscriptionCompareHead{
  margin:22px 0 11px;
}
.subscriptionCompareHead h2{
  margin:3px 0 3px;
  font-size:22px;
  letter-spacing:-.035em;
}
.subscriptionCompareHead p{
  margin:0;
  color:#7e8da0;
  font-size:9px;
}
.subscriptionPlanCompareGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.subscriptionCompareCard{
  padding:17px!important;
  position:relative;
  overflow:hidden;
}
.subscriptionCompareCard.current{
  border-color:#7eaaf0!important;
  box-shadow:0 14px 34px rgba(37,99,235,.12)!important;
}
.subscriptionCompareCard.current:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:4px;
  background:linear-gradient(90deg,#3b82f6,#1d4ed8);
}
.subscriptionCompareTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.subscriptionCompareTop>div>span{
  font-size:7px;
  color:#8190a2;
  text-transform:uppercase;
  font-weight:900;
}
.subscriptionCompareTop h3{
  margin:3px 0 0;
  font-size:17px;
}
.currentPlanBadge{
  padding:5px 7px;
  border-radius:999px;
  background:#eaf3ff;
  color:#255da5;
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
}
.subscriptionComparePrice{
  margin-top:14px;
  font-size:25px;
  font-weight:950;
  letter-spacing:-.045em;
  color:#1e334d;
}
.subscriptionComparePrice small{
  font-size:9px;
  color:#8795a5;
  font-weight:700;
  letter-spacing:0;
}
.subscriptionCompareCard>p{
  min-height:44px;
  margin:8px 0;
  color:#6d7e92;
  font-size:9px;
  line-height:1.5;
}
.subscriptionTrialMini{
  width:max-content;
  margin-bottom:10px;
  padding:5px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#61748a;
  font-size:7px;
  font-weight:850;
}
.planFeatureList{
  display:grid;
  gap:7px;
}
.planFeatureItem{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:7px;
  align-items:start;
}
.planFeatureCheck{
  width:18px;height:18px;border-radius:6px;
  display:grid;place-items:center;
  background:#e9f7ef;color:#2e7750;
  font-size:8px;font-weight:950;
}
.planFeatureItem>div{
  display:grid;
  gap:1px;
}
.planFeatureItem b{
  font-size:9px;
  color:#334961;
}
.planFeatureItem small{
  font-size:7px;
  color:#8998a9;
  line-height:1.35;
}
.planFeatureMore{
  padding-left:27px;
  font-size:8px;
  color:#60758d;
  font-weight:850;
}
.subscriptionFeatureDetails{
  margin-top:11px;
  border-top:1px solid #edf1f5;
}
.subscriptionFeatureDetails>summary{
  list-style:none;
  cursor:pointer;
  padding-top:10px;
  color:#416994;
  font-size:8px;
  font-weight:900;
}
.subscriptionFeatureDetails>summary::-webkit-details-marker{display:none}
.subscriptionFeatureDetails[open]>.planFeatureList{
  margin-top:10px;
}

/* Panel maestro - tres planes */
.platformPlansSection{
  margin-bottom:14px;
}
.platformPlansSection>.cleanCardHead{
  margin-bottom:10px;
}
.platformPlansAdminGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.platformPlanEditor{
  padding:16px!important;
}
.platformPlanEditor.default{
  border-color:#9ac4ec!important;
  background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.platformPlanEditorHead{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:12px;
}
.platformPlanEditorHead>div:first-child>span{
  font-size:7px;
  color:#8291a3;
  text-transform:uppercase;
  font-weight:900;
}
.platformPlanEditorHead h3{
  margin:3px 0 0;
  font-size:17px;
}
.platformPlanHeadBadges{
  display:flex;
  gap:5px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.defaultPlanBadge{
  padding:5px 7px;
  border-radius:999px;
  background:#e7f2ff;
  color:#2862a7;
  font-size:7px;
  font-weight:950;
  text-transform:uppercase;
}
.planFeaturesEditor{
  border:1px solid #e0e7ef;
  border-radius:13px;
  overflow:hidden;
}
.planFeaturesEditor>summary{
  list-style:none;
  cursor:pointer;
  padding:10px 11px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.planFeaturesEditor>summary::-webkit-details-marker{display:none}
.planFeaturesEditor>summary>span:first-child{
  display:grid;
  gap:1px;
}
.planFeaturesEditor>summary b{
  font-size:9px;
}
.planFeaturesEditor>summary small{
  font-size:7px;
  color:#8b98a7;
}
.planFeaturesEditor[open] .cleanDisclosureArrow{
  transform:rotate(180deg);
}
.planFeatureToggleGrid{
  display:grid;
  gap:5px;
  max-height:360px;
  overflow:auto;
  padding:8px;
  border-top:1px solid #edf1f5;
  background:#fafcff;
}
.planFeatureToggleRow{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  gap:7px;
  align-items:center;
  padding:8px;
  border:1px solid #e4eaf1;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.planFeatureToggleRow.required{
  background:#f5f8fb;
}
.planFeatureToggleRow input{
  width:15px;height:15px;
  accent-color:#2563eb;
}
.planFeatureToggleRow>span{
  display:grid;gap:1px;
}
.planFeatureToggleRow b{
  font-size:8px;
}
.planFeatureToggleRow small{
  font-size:7px;
  color:#8b98a8;
  line-height:1.25;
}
.planFeatureToggleRow em{
  font-style:normal;
  padding:3px 5px;
  border-radius:999px;
  background:#eef2f6;
  color:#758396;
  font-size:6px;
  font-weight:900;
  text-transform:uppercase;
}
.platformPlanEditorActions{
  display:flex;
  justify-content:space-between;
  gap:7px;
  align-items:center;
}
.platformDefaultNote{
  font-size:7px;
  color:#57718d;
  font-weight:850;
}

.platformFxFull{
  padding:18px!important;
  margin-bottom:14px;
}
.platformFxRowMulti{
  grid-template-columns:minmax(135px,.8fr) minmax(145px,.65fr) minmax(260px,1.4fr) auto!important;
}
.platformFxPlanPrices{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
}
.platformFxPlanPrices>div{
  padding:6px 7px;
  border-radius:9px;
  background:#f6f8fb;
  display:grid;
  gap:1px;
}
.platformFxPlanPrices span{
  font-size:6px;
  color:#8493a5;
  text-transform:uppercase;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.platformFxPlanPrices b{
  font-size:8px;
  color:#2d435d;
}

.platformBusinessRowV212{
  grid-template-columns:44px minmax(0,1fr) auto auto 115px auto!important;
}
.platformBusinessPlanBadge{
  padding:5px 7px;
  border-radius:999px;
  background:#f0f4f8;
  color:#526a83;
  font-size:7px;
  font-weight:900;
  white-space:nowrap;
}
.platformClientQuote{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.platformClientPlanDetails{
  margin-top:12px;
  padding:14px!important;
}
.platformClientPlanDetails h3{
  margin:3px 0 4px;
}

@media(max-width:1100px){
  .platformPlansAdminGrid{
    grid-template-columns:1fr;
  }
  .subscriptionPlanCompareGrid{
    grid-template-columns:1fr;
  }
  .platformFxRowMulti{
    grid-template-columns:150px minmax(145px,1fr)!important;
  }
  .platformFxPlanPrices{
    grid-column:1/-1;
  }
  .platformBusinessRowV212{
    grid-template-columns:44px minmax(0,1fr) auto!important;
  }
  .platformBusinessRowV212>.platformBusinessPlanBadge,
  .platformBusinessRowV212>.subscriptionStatus,
  .platformBusinessRowV212>.platformBusinessPrice,
  .platformBusinessRowV212>.managePlatformBusiness{
    grid-column:2/-1;
    justify-self:start;
  }
}
@media(max-width:700px){
  .platformClientQuote{
    grid-template-columns:1fr!important;
  }
  .platformPlanEditorActions{
    align-items:stretch;
    flex-direction:column;
  }
}


/* =========================================================
   CitaFlow V21.3 - Control manual de suscripciones
   ========================================================= */

.subscriptionAccessLimitNotice{
  margin-top:14px;
  padding:13px 15px;
  border:1px solid #efc8c2;
  border-radius:16px;
  background:#fff7f5;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}
.subscriptionAccessLimitNotice>div{display:grid;gap:2px}
.subscriptionAccessLimitNotice b{font-size:11px;color:#934238}
.subscriptionAccessLimitNotice span{font-size:8px;color:#8a625d}

.platformManualMetrics{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.platformSubscriptionFilters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 11px;
}
.platformExpiryText{
  font-weight:800!important;
  color:#6c8197!important;
}
.platformExpiryText.soon{color:#a86b18!important}
.platformExpiryText.expired{color:#ad4d45!important}
.platformBusinessRow.expired{background:#fffafa}

.platformManualControlCard{
  margin-top:12px;
  padding:16px!important;
  border-color:#d7e3ef!important;
  background:linear-gradient(180deg,#fff,#fbfdff)!important;
}
.platformManualCurrent{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-bottom:12px;
}
.platformManualCurrent>div{
  padding:9px 10px;
  border-radius:11px;
  background:#f5f8fb;
  display:grid;
  gap:2px;
}
.platformManualCurrent span{
  font-size:7px;
  color:#8190a2;
  text-transform:uppercase;
  font-weight:850;
}
.platformManualCurrent b{font-size:10px;color:#2a4059}
.platformManualGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.platformManualDateRow,.platformManualMonthsRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:7px;
}
.platformManualControlCard .field>small{
  display:block;
  margin-top:5px;
  font-size:7px;
}
.platformManualQuickActions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #edf1f5;
}

@media(max-width:1050px){
  .platformManualMetrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:700px){
  .platformManualMetrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .platformManualCurrent{grid-template-columns:1fr}
  .platformManualGrid{grid-template-columns:1fr}
  .platformManualDateRow,.platformManualMonthsRow{grid-template-columns:1fr}
  .platformManualQuickActions{display:grid}
}


/* =========================================================
   CitaFlow V21.4 - Cobradores + plataforma de cobros
   ========================================================= */

/* Selector de acceso */
.accessChoiceGrid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.accessChoiceCard.collector{
  border-color:#d9e4f0!important;
}
.accessChoiceCard.collector .accessChoiceIcon{
  background:#eaf3ff!important;
  color:#245fa8!important;
}

/* Vinculación cobrador */
.collectorLinkContainer{
  max-width:760px!important;
}
.collectorLinkCard{
  max-width:620px;
  margin:30px auto 0;
  padding:24px!important;
}
.collectorAccessIcon{
  width:54px;height:54px;border-radius:17px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#e7f2ff,#d7e9ff);
  color:#235ca4;font-size:12px;font-weight:950;
}
.collectorCodeInput{
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
}

/* Portal cobrador */
.collectorPortalContainer{
  padding-top:22px;
  padding-bottom:60px;
}
.collectorMetrics{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  margin-bottom:12px;
}
.collectorPermissionCard{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:13px 15px!important;
  margin-bottom:12px;
}
.collectorPermissionCard>div:first-child{
  display:grid;gap:2px;
}
.collectorPermissionCard>div:first-child>b{
  font-size:10px;color:#344b65;
}
.collectorCommissionRule{
  display:grid;
  justify-items:end;
  gap:1px;
}
.collectorCommissionRule span{
  font-size:7px;color:#8493a5;text-transform:uppercase;font-weight:900;
}
.collectorCommissionRule b{
  font-size:11px;color:#275d9c;
}
.collectorClientsCard{
  padding:16px!important;
}
.collectorClientsHead .input{
  width:min(360px,100%);
}
.collectorBusinessList{
  display:grid;gap:0;
}
.collectorBusinessRow{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto 120px auto;
  gap:11px;
  align-items:center;
  padding:11px 0;
  border-bottom:1px solid #edf1f5;
}
.collectorBusinessRow:last-child{border-bottom:0}
.collectorBusinessRow.expired{
  background:linear-gradient(90deg,rgba(255,241,239,.55),transparent);
}
.collectorBusinessMain{
  min-width:0;
  display:grid;
  gap:2px;
}
.collectorBusinessMain>b{
  font-size:11px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.collectorBusinessMain>span{
  font-size:8px;color:#75869b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.collectorBusinessMain>small{
  font-size:8px;color:#95a1ae;
}
.collectorBusinessPrice{
  display:grid;justify-items:end;gap:1px;
}
.collectorBusinessPrice>b{font-size:12px}
.collectorBusinessPrice>small{font-size:7px;color:#8997a7}
.collectorBusinessActions{
  display:flex;gap:5px;align-items:center;justify-content:flex-end;flex-wrap:wrap;
}
.collectorBusinessActions .btn{
  min-height:34px!important;
  padding:7px 9px!important;
  font-size:8px!important;
}
.collectorBottomGrid{
  margin-top:14px!important;
  gap:14px!important;
  align-items:start;
}
.collectorPendingBig{
  font-size:16px;
  color:#9a611f;
}
.collectorCollectionHistory{
  display:grid;gap:0;
}
.collectorHistoryRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #edf1f5;
}
.collectorHistoryRow:last-child{border-bottom:0}
.collectorHistoryRow>div{
  display:grid;gap:1px;
}
.collectorHistoryRow>div:last-child{text-align:right}
.collectorHistoryRow b{font-size:10px}
.collectorHistoryRow span,.collectorHistoryRow small{font-size:7px;color:#8796a7}

/* Cobro */
.collectorPaymentSuggested,
.collectorPayoutAmount{
  padding:13px 14px;
  margin:6px 0 13px;
  border-radius:15px;
  background:#f1f6fd;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.collectorPaymentSuggested span,
.collectorPayoutAmount span{
  font-size:8px;color:#6e8095;text-transform:uppercase;font-weight:850;
}
.collectorPaymentSuggested b,
.collectorPayoutAmount b{
  font-size:18px;color:#1f4f88;
}
.collectorRenewCheck{
  padding:10px 11px;
  border:1px solid #e0e7ef;
  border-radius:11px;
  background:#fafcff;
}
.collectorUpgradeOptions{
  display:grid;gap:8px;
}
.collectorUpgradeOption{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  gap:9px;
  padding:11px;
  border:1px solid #dfe7ef;
  border-radius:13px;
  background:#fff;
  cursor:pointer;
}
.collectorUpgradeOption:has(input:checked){
  border-color:#78a8e8;
  background:#eef5ff;
}
.collectorUpgradeOption input{
  margin-top:3px;
  accent-color:#2563eb;
}
.collectorUpgradeOption>div{
  display:grid;gap:2px;
}
.collectorUpgradeOption b{font-size:11px}
.collectorUpgradeOption span{font-size:9px;color:#2c619f;font-weight:850}
.collectorUpgradeOption small{font-size:8px;color:#8291a3;line-height:1.4}

/* Administración de cobradores */
.platformCollectorsContainer{
  padding-top:22px;
  padding-bottom:60px;
}
.platformCollectorMetrics{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  margin-bottom:12px;
}
.collectorCreateCard{
  padding:0!important;
  margin-bottom:12px;
}
.collectorPermissionGrid{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 11px;
  border-radius:12px;
  background:#f7f9fc;
}
.platformCollectorsListCard{
  padding:16px!important;
}
.platformCollectorsHead .input{
  width:min(330px,100%);
}
.platformCollectorsList{
  display:grid;gap:0;
}
.platformCollectorCard{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) minmax(230px,.7fr) auto;
  gap:12px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #edf1f5;
}
.platformCollectorCard:last-child{border-bottom:0}
.platformCollectorCard.inactive{opacity:.6}
.platformCollectorAvatar{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:#e8f2ff;color:#275fa2;
  font-size:10px;font-weight:950;
}
.platformCollectorMain{
  min-width:0;display:grid;gap:2px;
}
.platformCollectorName{
  display:flex;gap:5px;align-items:center;flex-wrap:wrap;
}
.platformCollectorName>b{font-size:12px}
.platformCollectorMain>span{font-size:8px;color:#75869a}
.platformCollectorMain>small{font-size:8px;color:#929fad}
.collectorStatusBadge{
  padding:3px 6px;border-radius:999px;
  font-size:6px;font-weight:950;text-transform:uppercase;
}
.collectorStatusBadge.active{background:#e8f7ee;color:#2d7650}
.collectorStatusBadge.inactive{background:#eef1f4;color:#6f7e8f}
.collectorStatusBadge.linked{background:#e9f2ff;color:#2b64a8}
.collectorStatusBadge.pending{background:#fff2d7;color:#906116}
.collectorInviteMini{
  display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:3px;
}
.collectorInviteMini b{
  padding:4px 6px;border-radius:7px;background:#f0f4f8;
  font-size:8px;letter-spacing:.05em;
}
.collectorInviteMini span{font-size:7px;color:#98a4b1}
.platformCollectorStats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.platformCollectorStats>div{
  padding:8px;border-radius:10px;background:#f7f9fc;
  display:grid;gap:1px;
}
.platformCollectorStats span{
  font-size:6px;color:#8594a6;text-transform:uppercase;font-weight:850;
}
.platformCollectorStats b{font-size:10px;color:#2c425c}
.platformCollectorActions{
  display:flex;gap:6px;align-items:center;justify-content:flex-end;
}
.collectorAdminNotice{
  margin-top:12px!important;
}
.collectorAssignmentList{
  display:grid;gap:6px;
  max-height:460px;
  overflow:auto;
}
.collectorAssignmentRow{
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #e0e7ef;
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}
.collectorAssignmentRow:has(input:checked){
  background:#f1f7ff;
  border-color:#a8c8ef;
}
.collectorAssignmentRow input{accent-color:#2563eb}
.collectorAssignmentRow>div{display:grid;gap:1px}
.collectorAssignmentRow b{font-size:9px}
.collectorAssignmentRow span{font-size:7px;color:#8291a3}
.collectorAssignmentRow>small{font-size:7px;color:#63758a}
.platformAdminCollectionAction{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:11px 13px;
  margin-bottom:12px;
  border:1px solid #d7e4f3;
  border-radius:14px;
  background:#f7fbff;
}
.platformAdminCollectionAction>div{
  display:grid;gap:1px;
}
.platformAdminCollectionAction b{font-size:10px}
.platformAdminCollectionAction span{font-size:8px;color:#74869b}

/* Responsive */
@media(max-width:1000px){
  .collectorMetrics,.platformCollectorMetrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .collectorBusinessRow{
    grid-template-columns:44px minmax(0,1fr) auto;
  }
  .collectorBusinessPrice,
  .collectorBusinessActions{
    grid-column:2/-1;
    justify-items:start;
    justify-content:flex-start;
  }
  .platformCollectorCard{
    grid-template-columns:46px minmax(0,1fr) auto;
  }
  .platformCollectorStats{
    grid-column:2/-1;
  }
}
@media(max-width:700px){
  .accessChoiceGrid{grid-template-columns:1fr!important}
  .collectorPermissionCard{
    align-items:flex-start;
    flex-direction:column;
  }
  .collectorCommissionRule{justify-items:start}
  .collectorClientsHead,.platformCollectorsHead{
    align-items:stretch!important;
    flex-direction:column;
  }
  .collectorClientsHead .input,.platformCollectorsHead .input{width:100%}
  .collectorBusinessRow{
    grid-template-columns:42px minmax(0,1fr);
  }
  .collectorBusinessRow>.subscriptionStatus,
  .collectorBusinessPrice,
  .collectorBusinessActions{
    grid-column:2;
  }
  .collectorBottomGrid{grid-template-columns:1fr!important}
  .platformCollectorCard{
    grid-template-columns:42px minmax(0,1fr);
  }
  .platformCollectorStats,.platformCollectorActions{
    grid-column:1/-1;
  }
  .platformCollectorActions{justify-content:flex-start}
  .collectorAssignmentRow{
    grid-template-columns:18px minmax(0,1fr);
  }
  .collectorAssignmentRow>small{grid-column:2}
  .platformAdminCollectionAction{
    align-items:stretch;
    flex-direction:column;
  }
}


/* =========================================================
   CitaFlow V21.5 - Selector de acceso optimizado
   ========================================================= */

.accessChoiceShell{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 10%,rgba(59,130,246,.08),transparent 34%),
    radial-gradient(circle at 88% 12%,rgba(14,165,233,.07),transparent 28%),
    linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%);
}

.accessChoiceV215{
  max-width:1180px!important;
  padding-top:18px!important;
  padding-bottom:36px!important;
}

.accessChoiceV215 .accessChoiceHeading{
  max-width:720px!important;
  margin:12px auto 24px!important;
  text-align:center;
}

.accessChoiceV215 .accessChoiceHeading .guideEyebrow{
  margin-bottom:7px;
}

.accessChoiceV215 .accessChoiceHeading h1{
  margin:0!important;
  font-size:clamp(34px,4vw,48px)!important;
  line-height:1.02!important;
  letter-spacing:-.06em!important;
}

.accessChoiceV215 .accessChoiceHeading p{
  max-width:650px;
  margin:10px auto 0!important;
  color:#687b94!important;
  font-size:13px!important;
  line-height:1.5!important;
}

.accessChoiceGridV215{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  align-items:stretch;
}

.accessChoiceGridV215 .accessRoleCard{
  min-height:292px!important;
  padding:17px!important;
  border-radius:21px!important;
  border:1px solid #dce5ef!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 12px 32px rgba(15,23,42,.055)!important;
  position:relative;
  overflow:hidden;
  display:flex!important;
  flex-direction:column;
  text-align:left;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.accessChoiceGridV215 button.accessRoleCard{
  width:100%;
  color:inherit;
  font:inherit;
  cursor:pointer;
}

.accessChoiceGridV215 .accessRoleCard:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
}

.accessChoiceGridV215 .accessRoleCard.client:before{
  background:linear-gradient(90deg,#2563eb,#60a5fa);
}
.accessChoiceGridV215 .accessRoleCard.staff:before{
  background:linear-gradient(90deg,#059669,#34d399);
}
.accessChoiceGridV215 .accessRoleCard.collector:before{
  background:linear-gradient(90deg,#1976d2,#4f9df1);
}
.accessChoiceGridV215 .accessRoleCard.business:before{
  background:linear-gradient(90deg,#7c3aed,#a78bfa);
}

.accessChoiceGridV215 .accessRoleCard:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.085)!important;
}

.accessChoiceGridV215 .accessRoleCard.client:hover{border-color:#9fc5fa!important}
.accessChoiceGridV215 .accessRoleCard.staff:hover{border-color:#9cdcc2!important}
.accessChoiceGridV215 .accessRoleCard.collector:hover{border-color:#a4c8ee!important}
.accessChoiceGridV215 .accessRoleCard.business:hover{border-color:#c0b4f4!important}

.accessRoleTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}

.accessChoiceGridV215 .accessChoiceIcon{
  width:44px!important;
  height:44px!important;
  min-width:44px;
  border-radius:14px!important;
  display:grid;
  place-items:center;
  font-size:9px!important;
  font-weight:950;
  letter-spacing:.02em;
}

.accessChoiceGridV215 .client .accessChoiceIcon{
  background:#eaf3ff!important;
  color:#245fa8!important;
}
.accessChoiceGridV215 .staff .accessChoiceIcon{
  background:#e9f8f0!important;
  color:#28734c!important;
}
.accessChoiceGridV215 .collector .accessChoiceIcon{
  background:#edf5ff!important;
  color:#2b66a9!important;
}
.accessChoiceGridV215 .business .accessChoiceIcon{
  background:#f0ebff!important;
  color:#6546b4!important;
}

.accessRoleType{
  padding:4px 7px;
  border-radius:999px;
  background:#f4f7fa;
  color:#7c8999;
  font-size:6px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.accessRoleContent{
  margin-top:18px;
  display:grid;
  align-content:start;
  flex:1;
}

.accessChoiceGridV215 .accessRoleContent h2{
  margin:0!important;
  color:#101828!important;
  font-size:18px!important;
  line-height:1.15;
  letter-spacing:-.035em!important;
}

.accessChoiceGridV215 .accessRoleContent p{
  min-height:42px;
  margin:7px 0 12px!important;
  color:#718197!important;
  font-size:9px!important;
  line-height:1.55!important;
}

.accessRoleFeatures{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

.accessRoleFeatures span{
  padding:5px 7px;
  border:1px solid #e3e9f0;
  border-radius:999px;
  background:#f8fafc;
  color:#607187;
  font-size:7px;
  font-weight:800;
  line-height:1;
}

.accessRoleFooter{
  min-height:39px;
  margin-top:15px;
  padding-top:11px;
  border-top:1px solid #edf1f5;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#52687f;
  font-size:8px;
  font-weight:900;
}

.accessChoiceGridV215 .accessChoiceArrow{
  width:31px!important;
  height:31px!important;
  border-radius:10px!important;
  background:#f2f5f8!important;
  display:grid!important;
  place-items:center;
  color:#405972!important;
  font-size:12px!important;
}

.businessAccessActions{
  min-height:39px;
  margin-top:15px;
  padding-top:11px;
  border-top:1px solid #edf1f5;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.businessAccessActions .btn{
  min-height:36px!important;
  padding:7px 9px!important;
  font-size:8px!important;
  border-radius:10px!important;
}

.accessChoiceHelp{
  max-width:820px;
  margin:14px auto 0;
  padding:10px 13px;
  border:1px solid #e0e7ef;
  border-radius:13px;
  background:rgba(255,255,255,.72);
  color:#75859a;
  text-align:center;
  font-size:8px;
  line-height:1.5;
}

.accessChoiceHelp>span{
  margin-right:5px;
  color:#41566f;
  font-weight:900;
}

.accessChoiceHelp b{
  color:#405975;
}

@media(max-width:1050px){
  .accessChoiceGridV215{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .accessChoiceGridV215 .accessRoleCard{
    min-height:250px!important;
  }
}

@media(max-width:650px){
  .accessChoiceV215{
    padding-top:8px!important;
  }
  .accessChoiceV215 .accessChoiceHeading{
    margin:8px auto 18px!important;
    text-align:left;
  }
  .accessChoiceV215 .accessChoiceHeading h1{
    font-size:34px!important;
  }
  .accessChoiceV215 .accessChoiceHeading p{
    margin-left:0!important;
    font-size:11px!important;
  }
  .accessChoiceGridV215{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .accessChoiceGridV215 .accessRoleCard{
    min-height:0!important;
    padding:14px!important;
    border-radius:17px!important;
  }
  .accessRoleContent{
    margin-top:12px;
  }
  .accessChoiceGridV215 .accessRoleContent p{
    min-height:0;
  }
  .accessRoleFooter,
  .businessAccessActions{
    margin-top:11px;
  }
  .accessChoiceHelp{
    text-align:left;
  }
}


/* =========================================================
   CitaFlow V21.6 - Onboarding + solicitudes de plan
   ========================================================= */
.setupWelcomeV216{max-width:760px;margin:20px auto 26px;text-align:center}
.setupWelcomeV216 h1{margin:4px 0 7px;font-size:34px;letter-spacing:-.045em}
.setupWelcomeV216 p{margin:0;color:#708196;font-size:11px;line-height:1.5}
.setupPlanGridV216{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:24px}
.setupPlanV216{padding:15px;border:1px solid #dfe7ef;border-radius:18px;background:#fff;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:.18s}
.setupPlanV216:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.07)}
.setupPlanV216.active{border-color:#4b8de6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.setupPlanTopV216{display:flex;justify-content:space-between;gap:10px}
.setupPlanTopV216 span{font-size:7px;color:#8291a2;text-transform:uppercase;font-weight:900}
.setupPlanTopV216 h3{margin:3px 0 0;font-size:17px}
.setupPlanTopV216 i{width:18px;height:18px;border-radius:50%;border:2px solid #c5d0dc}
.setupPlanV216.active .setupPlanTopV216 i{border:5px solid #347fe1}
.setupPlanPriceV216{margin-top:12px;font-size:23px;font-weight:950;color:#223850;letter-spacing:-.04em}
.setupPlanPriceV216 small{font-size:8px;color:#8795a5;font-weight:700;letter-spacing:0}
.setupPlanV216>p{min-height:40px;margin:7px 0;color:#718197;font-size:8px;line-height:1.45}
.setupTrialV216{display:inline-block;margin-bottom:9px;padding:4px 7px;border-radius:999px;background:#f1f5f9;color:#61748a;font-size:7px}
.setupPlanV216 .planFeatureItem small{display:none}
.setupPlanV216 .planFeatureCheck{width:16px;height:16px}

.ownerSetupCardV216{padding:0!important;overflow:hidden;margin-bottom:14px}
.ownerSetupV216{padding:18px}
.ownerSetupHead{display:flex;justify-content:space-between;gap:18px}
.ownerSetupHead h2{margin:3px 0 4px;font-size:20px}
.ownerSetupHead p{margin:0;color:#75869a;font-size:9px}
.ownerSetupPct{text-align:right;display:grid;min-width:70px}
.ownerSetupPct b{font-size:24px;color:#2862a3}.ownerSetupPct span{font-size:7px;color:#8695a6}
.ownerSetupBar{height:7px;margin:14px 0;border-radius:999px;background:#e9eef4;overflow:hidden}
.ownerSetupBar span{display:block;height:100%;background:linear-gradient(90deg,#2d73df,#32a36f)}
.ownerSetupList{display:grid;gap:7px}
.ownerSetupRow{width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid #e1e8ef;border-radius:12px;background:#fff;text-align:left;color:inherit;font:inherit;cursor:pointer}
.ownerSetupRow.done{background:#f6fbf8;border-color:#d8ebdf}
.ownerSetupRow>span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eaf3ff;color:#2b64a8;font-size:8px;font-weight:950}
.ownerSetupRow.done>span{background:#e5f6eb;color:#2d754e}
.ownerSetupRow>div{display:grid;gap:1px}.ownerSetupRow b{font-size:10px}.ownerSetupRow small{font-size:8px;color:#8392a3}
.ownerSetupRow em{font-style:normal;font-size:8px;color:#4f6f92;font-weight:900}
.ownerSetupV216>#dismissOwnerSetup{margin-top:10px}

.staffGuideV216{margin-bottom:14px;padding:17px!important;border-color:#bcd3ed!important;background:linear-gradient(180deg,#fff,#f8fbff)!important}
.staffGuideHeadV216{display:flex;justify-content:space-between;gap:14px}.staffGuideHeadV216 h2{margin:3px 0 4px;font-size:20px}.staffGuideHeadV216 p{margin:0;color:#74859a;font-size:9px}
.staffGuideGridV216{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:14px}
.staffGuideGridV216>div{padding:10px;border:1px solid #e1e8f0;border-radius:12px;background:#fff;display:grid;align-content:start;gap:4px}
.staffGuideGridV216 span{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#eaf3ff;color:#2b64a8;font-size:8px;font-weight:950}
.staffGuideGridV216 b{font-size:9px}.staffGuideGridV216 small{font-size:7px;color:#8291a3;line-height:1.4}
.staffGuideActionsV216{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}

.subscriptionUpgradePendingV216{margin:16px 0 0;padding:13px 15px;border:1px solid #d4e4f6;border-radius:15px;background:#f4f9ff;display:flex;justify-content:space-between;gap:14px;align-items:center}
.subscriptionUpgradePendingV216>div{display:grid;gap:2px}.subscriptionUpgradePendingV216 b{font-size:11px}.subscriptionUpgradePendingV216 span{font-size:8px;color:#6f8297}
.subscriptionPlanActionV216{margin-top:12px;padding-top:10px;border-top:1px solid #edf1f5}
.subscriptionPlanActionV216 .btn{width:100%}.subscriptionPlanActionV216>span{display:block;padding:8px;text-align:center;border-radius:10px;background:#f3f6f9;color:#708196;font-size:8px;font-weight:850}
.planRequestsV216{margin-bottom:14px;padding:16px!important;border-color:#cbdff5!important}
.planRequestRowV216{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f5}
.planRequestRowV216:last-child{border-bottom:0}.planRequestRowV216>div:first-child{display:grid;gap:2px}.planRequestRowV216 b{font-size:11px}.planRequestRowV216 span{font-size:8px;color:#718297}.planRequestRowV216 strong{color:#2862a3}.planRequestRowV216 small{font-size:7px;color:#98a4b1}
.planRequestRowV216>div:last-child{display:flex;gap:6px}.planRequestMiniV216{color:#2862a6!important;font-weight:900!important}

@media(max-width:900px){
  .setupPlanGridV216{grid-template-columns:1fr}
  .staffGuideGridV216{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .setupWelcomeV216{text-align:left}.setupWelcomeV216 h1{font-size:28px}
  .ownerSetupHead,.staffGuideHeadV216,.subscriptionUpgradePendingV216,.planRequestRowV216{flex-direction:column;align-items:stretch}
  .ownerSetupPct{text-align:left}
  .ownerSetupRow{grid-template-columns:30px minmax(0,1fr)}.ownerSetupRow em{grid-column:2}
  .staffGuideGridV216{grid-template-columns:1fr}
}


/* =========================================================
   CitaFlow V21.7 - Plan profesional + servicios + cobros
   ========================================================= */

.staffPlanHeroBadge{
  margin-top:7px;
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}
.staffPlanHeroBadge b{
  padding:5px 8px;
  border-radius:999px;
  background:#eaf3ff;
  color:#285fa2;
  font-size:7px;
  text-transform:uppercase;
}
.staffPlanHeroBadge span{
  font-size:7px;
  color:#8493a4;
}

/* Mi plan profesional */
.staffPlanSummaryV217{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr);
  gap:12px;
  margin-bottom:14px;
}
.staffPlanCurrentV217{
  padding:20px;
  border-radius:22px;
  background:linear-gradient(145deg,#10243e,#1c5b9f);
  color:#fff;
}
.staffPlanCurrentV217>span{
  font-size:8px;
  color:#a9bfd8;
  text-transform:uppercase;
  font-weight:900;
}
.staffPlanCurrentV217 h2{
  margin:4px 0 3px;
  font-size:25px;
}
.staffPlanCurrentV217>p{
  margin:0 0 14px;
  color:#c3d2e3;
  font-size:8px;
}
.staffPlanCurrentV217>strong{
  font-weight:400;
}
.staffPlanCurrentV217 .staffPlanFeatureList b{color:#fff}
.staffPlanCurrentV217 .staffPlanFeatureList small{color:#b9c9db}
.staffPlanCurrentV217 .staffPlanFeatureList>div>span{
  background:rgba(255,255,255,.12);
  color:#d9ecff;
}
.staffPlanInheritanceV217{
  padding:17px!important;
}
.staffPlanInheritanceRow{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #edf1f5;
}
.staffPlanInheritanceRow.final{border-bottom:0}
.staffPlanInheritanceRow span{font-size:8px;color:#78899c}
.staffPlanInheritanceRow b{font-size:10px;color:#2b4059}
.staffPlanFeatureList{
  display:grid;
  gap:7px;
}
.staffPlanFeatureList>div{
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:7px;
  align-items:start;
}
.staffPlanFeatureList>div>span{
  width:17px;height:17px;border-radius:6px;
  display:grid;place-items:center;
  background:#e7f6ed;color:#2b7650;
  font-size:7px;font-weight:950;
}
.staffPlanFeatureList p{
  margin:0;
  display:grid;
  gap:1px;
}
.staffPlanFeatureList b{font-size:9px;color:#334a63}
.staffPlanFeatureList small{font-size:7px;color:#8695a6}
.staffPlanPendingV217{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid #cfe0f4;
  border-radius:14px;
  background:#f4f9ff;
}
.staffPlanPendingV217>div{display:grid;gap:2px}
.staffPlanPendingV217 b{font-size:10px}
.staffPlanPendingV217 span{font-size:8px;color:#708297}
.staffProfessionalPlansV217{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
}
.staffProfessionalPlanCardV217{
  padding:16px!important;
  position:relative;
  overflow:hidden;
}
.staffProfessionalPlanCardV217.current{
  border-color:#79a9e8!important;
  box-shadow:0 10px 28px rgba(37,99,235,.10)!important;
}
.staffProfessionalPlanTopV217{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.staffProfessionalPlanTopV217 span{
  font-size:7px;color:#8190a2;text-transform:uppercase;font-weight:900;
}
.staffProfessionalPlanTopV217 h3{
  margin:3px 0 0;font-size:17px;
}
.staffProfessionalPlanTopV217 em{
  font-style:normal;
  padding:4px 6px;border-radius:999px;
  background:#eaf3ff;color:#2862a7;
  font-size:6px;font-weight:950;text-transform:uppercase;
}
.staffProfessionalPlanPriceV217{
  margin:13px 0 7px;
  font-size:22px;
  font-weight:950;
  letter-spacing:-.04em;
}
.staffProfessionalPlanPriceV217 small{
  font-size:7px;
  color:#8997a7;
  font-weight:700;
  letter-spacing:0;
}
.staffProfessionalPlanCardV217>p{
  min-height:42px;
  margin:0 0 11px;
  color:#718197;
  font-size:8px;
  line-height:1.45;
}
.staffProfessionalPlanActionV217{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #edf1f5;
}
.staffProfessionalPlanActionV217 .btn{width:100%}
.staffProfessionalPlanActionV217>span{
  display:block;
  padding:8px;
  border-radius:10px;
  background:#f3f6f9;
  text-align:center;
  color:#708196;
  font-size:8px;
  font-weight:850;
}

/* Servicios profesional */
.staffServiceColumnsV217{
  align-items:start;
  gap:12px!important;
  margin-top:12px!important;
}
.staffServiceListV217{display:grid;gap:0}
.staffServiceRowV217{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #edf1f5;
}
.staffServiceRowV217:last-child{border-bottom:0}
.staffServiceRowV217.inactive{opacity:.55}
.staffServiceRowV217>div:first-child{display:grid;gap:2px}
.staffServiceRowV217>div:first-child b{font-size:10px}
.staffServiceRowV217>div:first-child span{font-size:8px;color:#8493a4}
.staffServiceRowV217>div:last-child{
  display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;
}
.staffServiceRowV217 .btn{
  min-height:32px!important;
  padding:6px 8px!important;
  font-size:7px!important;
}
.staffReadOnlyBadgeV217{
  padding:4px 6px;border-radius:999px;
  background:#eef2f5;color:#738294;
  font-size:6px;font-weight:900;text-transform:uppercase;
}

/* Cobros profesional */
.staffPaymentKpisV217{margin-bottom:12px!important}
.staffPaymentKpisV217 .card{
  padding:13px!important;
  display:grid;gap:2px;
}
.staffPaymentKpisV217 span{
  font-size:7px;color:#8291a2;text-transform:uppercase;font-weight:850;
}
.staffPaymentKpisV217 b{font-size:17px;color:#2b415b}
.staffPaymentsGridV217{
  align-items:start;
  gap:12px!important;
}
.staffCollectionsListV217{display:grid;gap:0}
.staffCollectionRowV217{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #edf1f5;
}
.staffCollectionRowV217:last-child{border-bottom:0}
.staffCollectionRowV217>div{display:grid;gap:1px}
.staffCollectionRowV217>div:last-child{text-align:right}
.staffCollectionRowV217 b{font-size:10px}
.staffCollectionRowV217 span,.staffCollectionRowV217 small{font-size:7px;color:#8493a4}

/* Caja dueño - cobros profesionales */
.ownerStaffCollectionsV217{
  padding:0!important;
  margin-bottom:12px;
}
.ownerStaffCollectionListV217{display:grid;gap:0}
.ownerStaffCollectionRowV217{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #edf1f5;
}
.ownerStaffCollectionRowV217:last-child{border-bottom:0}
.ownerStaffCollectionRowV217>div{display:grid;gap:2px}
.ownerStaffCollectionRowV217>div:last-child{text-align:right}
.ownerStaffCollectionRowV217 b{font-size:10px}
.ownerStaffCollectionRowV217 span,.ownerStaffCollectionRowV217 small{font-size:7px;color:#8191a3}

/* Admin profesional */
.staffPlanRequestsAdminV217{
  margin-bottom:14px;
  padding:16px!important;
  border-color:#d3e1f1!important;
}
.staffPlanRequestAdminListV217{display:grid;gap:0}
.staffPlanRequestAdminRowV217{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #edf1f5;
}
.staffPlanRequestAdminRowV217:last-child{border-bottom:0}
.staffPlanRequestAdminRowV217>div:first-child{display:grid;gap:2px}
.staffPlanRequestAdminRowV217 b{font-size:10px}
.staffPlanRequestAdminRowV217 span{font-size:8px;color:#708297}
.staffPlanRequestAdminRowV217 strong{color:#2862a6}
.staffPlanRequestAdminRowV217 small{font-size:7px;color:#97a3b0}
.staffPlanRequestAdminRowV217>div:last-child{display:flex;gap:5px}
.professionalPlansAdminV217{
  padding:0!important;
  margin-bottom:14px;
}
.professionalPlansAdminGridV217{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.professionalPlanAdminCardV217{
  padding:12px;
  border:1px solid #e0e7ef;
  border-radius:13px;
  background:#fafcff;
  display:grid;
  gap:9px;
}
.professionalPlanAdminCardV217>div:first-child span{
  font-size:6px;color:#8493a4;text-transform:uppercase;font-weight:900;
}
.professionalPlanAdminCardV217>div:first-child h3{
  margin:2px 0 0;font-size:15px;
}

@media(max-width:900px){
  .staffPlanSummaryV217{grid-template-columns:1fr}
  .staffProfessionalPlansV217{grid-template-columns:1fr}
  .professionalPlansAdminGridV217{grid-template-columns:1fr}
}
@media(max-width:650px){
  .staffPlanPendingV217,
  .staffPlanRequestAdminRowV217{
    flex-direction:column;
    align-items:stretch;
  }
  .staffServiceColumnsV217,
  .staffPaymentsGridV217{
    grid-template-columns:1fr!important;
  }
  .staffServiceRowV217,
  .staffCollectionRowV217,
  .ownerStaffCollectionRowV217{
    align-items:flex-start;
    flex-direction:column;
  }
  .staffCollectionRowV217>div:last-child,
  .ownerStaffCollectionRowV217>div:last-child{
    text-align:left;
  }
}


/* =========================================================
   CitaFlow V21.8 - Cobrador como acceso secundario inferior
   ========================================================= */

.accessChoiceV218{
  max-width:1080px!important;
}

.accessChoiceGridV218{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.collectorAccessStripV218{
  margin:14px auto 0;
  width:min(820px,100%);
  min-height:74px;
  padding:11px 13px;
  border:1px solid #dce5ef;
  border-radius:17px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(15,23,42,.045);
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto auto;
  gap:11px;
  align-items:center;
}

.collectorAccessStripIconV218{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#edf5ff;
  color:#2b66a9;
  font-size:8px;
  font-weight:950;
}

.collectorAccessStripTextV218{
  min-width:0;
  display:grid;
  gap:1px;
}

.collectorAccessStripTextV218>span{
  font-size:6px;
  color:#8392a3;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:950;
}

.collectorAccessStripTextV218>b{
  font-size:10px;
  color:#273d57;
}

.collectorAccessStripTextV218>small{
  font-size:7px;
  color:#7d8da0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.collectorAccessStripFeaturesV218{
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.collectorAccessStripFeaturesV218 span{
  padding:4px 6px;
  border:1px solid #e1e8ef;
  border-radius:999px;
  background:#f8fafc;
  color:#607187;
  font-size:6px;
  font-weight:850;
}

.collectorAccessStripBtnV218{
  min-height:36px!important;
  padding:7px 11px!important;
  border-radius:10px!important;
  white-space:nowrap;
  font-size:8px!important;
}

@media(max-width:900px){
  .accessChoiceGridV218{
    grid-template-columns:1fr!important;
  }

  .collectorAccessStripV218{
    grid-template-columns:42px minmax(0,1fr) auto;
  }

  .collectorAccessStripFeaturesV218{
    display:none;
  }
}

@media(max-width:620px){
  .collectorAccessStripV218{
    grid-template-columns:38px minmax(0,1fr);
    align-items:start;
  }

  .collectorAccessStripIconV218{
    width:36px;
    height:36px;
  }

  .collectorAccessStripTextV218>small{
    white-space:normal;
    line-height:1.4;
  }

  .collectorAccessStripBtnV218{
    grid-column:1/-1;
    width:100%;
  }
}


/* =========================================================
   CitaFlow V21.9 - Cobrador inicia SOLO con código
   ========================================================= */

.collectorCodeLoginContainer{
  max-width:760px!important;
  padding-top:34px!important;
}

.collectorCodeLoginCard{
  max-width:610px;
  margin:0 auto;
  padding:26px!important;
  border-radius:22px!important;
}

.collectorCodeLoginIcon{
  width:58px;
  height:58px;
  margin-bottom:16px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#eaf4ff,#d9eaff);
  color:#245fa7;
  font-size:12px;
  font-weight:950;
}

.collectorCodeLoginCard h1{
  margin:4px 0 6px;
  font-size:28px;
  letter-spacing:-.04em;
}

.collectorCodeLoginCard>div>p{
  max-width:500px;
  line-height:1.55;
}

.collectorCodeField{
  margin-top:18px;
}

.collectorCodeInput{
  min-height:54px!important;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.075em;
  font-size:14px!important;
  font-weight:900!important;
}

.collectorCodeLoginBtn{
  width:100%;
  min-height:48px!important;
  margin-top:5px;
}

.collectorCodeSecurity{
  margin-top:13px;
  padding:11px 12px;
  border:1px solid #dfe7ef;
  border-radius:13px;
  background:#f8fafc;
  display:grid;
  gap:2px;
}

.collectorCodeSecurity b{
  font-size:9px;
  color:#3c536d;
}

.collectorCodeSecurity span{
  font-size:8px;
  color:#7a8a9d;
  line-height:1.45;
}

.collectorGeneratedCodeBox{
  margin:12px 0;
  padding:16px;
  border:1px solid #c8dbf1;
  border-radius:15px;
  background:#f5f9ff;
  display:grid;
  gap:5px;
  text-align:center;
}

.collectorGeneratedCodeBox span{
  color:#75879b;
  font-size:7px;
  text-transform:uppercase;
  font-weight:900;
}

.collectorGeneratedCodeBox b{
  color:#1f4f88;
  font-size:18px;
  letter-spacing:.065em;
  word-break:break-all;
}

.collectorStatusBadge.linked{
  background:#e7f6ed!important;
  color:#2c754e!important;
}

.collectorInviteMini{
  margin-top:4px;
}

@media(max-width:650px){
  .collectorCodeLoginContainer{
    padding-top:16px!important;
  }
  .collectorCodeLoginCard{
    padding:18px!important;
  }
  .collectorCodeInput{
    font-size:11px!important;
    letter-spacing:.045em;
  }
  .collectorGeneratedCodeBox b{
    font-size:14px;
  }
}


/* =========================================================
   CitaFlow V21.10 - Servicio realizado en cobros profesionales
   ========================================================= */

.staffCustomServiceFieldV2110{
  padding:10px;
  border:1px dashed #cbd8e7;
  border-radius:12px;
  background:#f8fbff;
}

.staffCollectionServiceV2110,
.ownerStaffCollectionServiceV2110{
  color:#285f9e!important;
  font-weight:900!important;
  font-size:8px!important;
}

.staffCollectionRowV217>div:first-child{
  min-width:0;
}

.staffCollectionRowV217>div:first-child .staffCollectionServiceV2110{
  width:max-content;
  max-width:100%;
  padding:3px 6px;
  border-radius:999px;
  background:#eef5ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.ownerStaffCollectionServiceV2110{
  width:max-content;
  max-width:100%;
  padding:3px 6px;
  border-radius:999px;
  background:#eef5ff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =========================================================
   CitaFlow V21.11 - Multiservicio + descuento + recibo
   ========================================================= */

.staffPaymentsGridV2111{
  align-items:start!important;
}

.staffPaymentCreateV2111{
  padding:16px!important;
}

.staffMultiServiceBoxV2111{
  padding:12px;
  border:1px solid #dfe7ef;
  border-radius:14px;
  background:#fafcff;
}

.staffMultiServiceHeadV2111{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:9px;
}

.staffMultiServiceHeadV2111>div{
  display:grid;
  gap:2px;
}

.staffMultiServiceHeadV2111 b{
  font-size:10px;
  color:#2f455f;
}

.staffMultiServiceHeadV2111 span{
  font-size:7px;
  color:#8191a3;
}

.staffServiceChecksV2111{
  display:grid;
  gap:6px;
}

.staffServiceCheckRowV2111{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) 72px;
  gap:8px;
  align-items:center;
  padding:8px 9px;
  border:1px solid #e2e8ef;
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}

.staffServiceCheckRowV2111:has(.staffPaymentServiceCheck:checked){
  border-color:#8eb8ea;
  background:#f3f8ff;
}

.staffPaymentServiceCheck{
  width:15px;
  height:15px;
  accent-color:#2563eb;
}

.staffServiceCheckMainV2111{
  display:grid;
  gap:1px;
}

.staffServiceCheckMainV2111 b{
  font-size:9px;
  color:#334961;
}

.staffServiceCheckMainV2111 small{
  font-size:7px;
  color:#788a9e;
}

.staffServiceQtyWrapV2111{
  display:grid;
  grid-template-columns:auto 46px;
  gap:5px;
  align-items:center;
}

.staffServiceQtyWrapV2111 small{
  font-size:6px;
  color:#8997a7;
  text-transform:uppercase;
  font-weight:850;
}

.staffServiceQtyWrapV2111 .input{
  min-height:31px!important;
  padding:5px!important;
  text-align:center;
  font-size:8px!important;
}

.staffCustomServicesHolderV2111{
  display:grid;
  gap:6px;
  margin-top:8px;
}

.staffCustomServiceRowV2111{
  display:grid;
  grid-template-columns:minmax(0,1fr) 100px 62px auto;
  gap:6px;
  align-items:center;
  padding:8px;
  border:1px dashed #bfcfe0;
  border-radius:11px;
  background:#f8fbff;
}

.staffCustomServiceRowV2111 .input{
  min-height:34px!important;
  padding:7px!important;
  font-size:8px!important;
}

.staffCustomServiceRowV2111 .btn{
  min-height:34px!important;
  padding:7px 8px!important;
  font-size:7px!important;
}

.staffAddCustomServiceV2111{
  margin-top:8px;
  width:100%;
}

.staffDiscountBoxV2111{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.staffPaymentSummaryV2111{
  padding:11px 12px;
  border:1px solid #dce5ef;
  border-radius:14px;
  background:#f7f9fc;
  display:grid;
  gap:5px;
}

.staffPaymentSummaryV2111>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:9px;
}

.staffPaymentSummaryV2111 span{
  color:#718297;
}

.staffPaymentSummaryV2111 b{
  color:#314861;
}

.staffPaymentSummaryV2111 .total{
  margin-top:3px;
  padding-top:9px;
  border-top:1px solid #dce5ef;
  font-size:13px;
}

.staffPaymentSummaryV2111 .total b{
  color:#205d9f;
  font-size:17px;
}

.staffCollectionRowV2111{
  align-items:flex-start!important;
}

.staffCollectionRightV2111{
  min-width:126px;
}

.staffCollectionActionsV2111{
  display:flex;
  gap:4px;
  justify-content:flex-end;
  margin-top:5px;
}

.staffCollectionActionsV2111 .btn{
  min-height:30px!important;
  padding:5px 7px!important;
  font-size:7px!important;
}

@media(max-width:700px){
  .staffDiscountBoxV2111{
    grid-template-columns:1fr;
  }

  .staffServiceCheckRowV2111{
    grid-template-columns:18px minmax(0,1fr);
  }

  .staffServiceQtyWrapV2111{
    grid-column:2;
    justify-content:start;
    grid-template-columns:auto 58px;
  }

  .staffCustomServiceRowV2111{
    grid-template-columns:1fr 1fr;
  }

  .staffCustomServiceRowV2111 .staffCustomServiceNameV2111{
    grid-column:1/-1;
  }

  .staffCustomServiceRowV2111 .staffRemoveCustomServiceV2111{
    grid-column:1/-1;
  }

  .staffCollectionRightV2111{
    min-width:0;
    width:100%;
  }

  .staffCollectionActionsV2111{
    justify-content:flex-start;
  }
}

.bootVersionV21113{margin-top:10px;font-size:10px;color:#687b94;font-weight:900;letter-spacing:.04em}


/* =========================================================
   NextCita V22.0 - Identidad oficial HQ
   ========================================================= */
:root{
  --brand:#2563EB!important;
  --brand2:#1D4ED8!important;
  --nav:#0F172A!important;
  --nextcita-blue:#2563EB;
  --nextcita-navy:#0F172A;
  --nextcita-teal:#14B8A6;
  --nextcita-gray:#E5E7EB;
  --nextcita-display:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --nextcita-ui:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family:var(--nextcita-ui);
}
body,button,input,select,textarea{font-family:var(--nextcita-ui)}
h1,h2,h3,h4,.bigNumber,.menuBusinessName,.accessRoleContent h2{font-family:var(--nextcita-display)}

.topbar{
  min-height:72px;
  background:
    radial-gradient(circle at 8% -40%,rgba(37,99,235,.34),transparent 36%),
    linear-gradient(105deg,#0F172A 0%,#0B1F3A 58%,#0F172A 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nextCitaTopBrand{min-width:168px;height:45px;display:flex;align-items:center}
.nextCitaTopLogo{display:block;width:180px;max-width:34vw;height:45px;object-fit:contain;object-position:left center}

.hero{
  background:
    radial-gradient(circle at 92% 12%,rgba(20,184,166,.30),transparent 30%),
    radial-gradient(circle at 8% 110%,rgba(37,99,235,.50),transparent 34%),
    linear-gradient(135deg,#0F172A 0%,#102A55 58%,#1D4ED8 100%)!important;
}
.nextCitaHeroBrand{display:flex;align-items:center;gap:11px;margin-bottom:17px}
.nextCitaHeroBrand img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.nextCitaHeroBrand>div{display:grid;gap:1px}
.nextCitaHeroBrand b{font-family:var(--nextcita-display);font-size:19px;letter-spacing:-.03em}
.nextCitaHeroBrand span{font-size:11px;color:#cce2ff;font-weight:650}
.nextCitaHeroBadge{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18);margin-bottom:14px;backdrop-filter:blur(8px)}
.btn.primary{background:#2563EB!important;box-shadow:0 8px 18px rgba(37,99,235,.18)}
.btn.primary:hover{background:#1D4ED8!important}
.btn.soft{background:#EAF1FF!important;color:#1D4ED8!important}
.input:focus,.select:focus,.textarea:focus{border-color:#2563EB!important;box-shadow:0 0 0 3px rgba(37,99,235,.12)!important}

.menuPanel{
  background:
    radial-gradient(circle at 10% 0%,rgba(20,184,166,.14),transparent 30%),
    radial-gradient(circle at 90% 10%,rgba(37,99,235,.22),transparent 34%),
    linear-gradient(165deg,#0F172A 0%,#10213A 58%,#0B1425 100%)!important;
}
.menuBusinessAvatar{background:linear-gradient(145deg,#2563EB,#14B8A6)!important}
.menuFooter{color:#a8bdd8!important}

.nextCitaClientIcon{background:#fff!important;padding:7px!important}
.nextCitaClientIcon img{width:100%;height:100%;object-fit:contain;display:block}

.boot .nextCitaBootLogo{width:94px;height:94px;object-fit:contain;filter:drop-shadow(0 14px 28px rgba(37,99,235,.22))}
.boot .nextCitaBootName{font-family:var(--nextcita-display);font-size:34px;margin:8px 0 0;letter-spacing:-.055em;color:#0F172A}
.boot .nextCitaBootSlogan{margin:0;color:#64748B;font-size:13px}
.boot .bootVersionV22{margin-top:12px;font-size:9px;font-weight:800;letter-spacing:.15em;color:#94A3B8;text-transform:uppercase}

.accessChoiceHeading .guideEyebrow,.guideEyebrow{color:#2563EB}
.accessChoiceCard:hover{border-color:rgba(37,99,235,.32)}

@media(max-width:620px){
  .topbar{min-height:62px}
  .nextCitaTopBrand{height:38px;min-width:120px}
  .nextCitaTopLogo{width:145px;max-width:48vw;height:38px}
  .nextCitaHeroBrand img{width:42px;height:42px}
}


/* NextCita V22.1 — Seguridad Core */
.nextcitaTurnstileV221{
  min-height:65px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.nextcitaMfaModalV221{
  width:min(520px,calc(100vw - 28px));
  max-height:calc(100vh - 32px);
  overflow:auto;
}

.mfaQrWrapV221{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:16px 0;
  padding:16px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}

.mfaQrWrapV221 img{
  width:min(250px,72vw);
  height:auto;
  display:block;
}

.mfaSecretV221{
  margin:10px 0 14px;
  padding:11px 13px;
  border:1px solid #dbe5f0;
  border-radius:12px;
  background:#f8fafc;
  display:grid;
  gap:4px;
  text-align:center;
}

.mfaSecretV221 span{
  color:#718096;
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mfaSecretV221 b{
  color:#0f172a;
  font-size:11px;
  letter-spacing:.08em;
  word-break:break-all;
}

.mfaCodeInputV221{
  text-align:center;
  font-size:21px!important;
  font-weight:800!important;
  letter-spacing:.25em;
}

.platformSecurityCardV221{
  border:1px solid rgba(37,99,235,.16)!important;
  background:linear-gradient(145deg,#ffffff 0%,#f7fbff 100%)!important;
}

.securityShieldV221{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:999px;
  background:#e8fff8;
  color:#087966;
  font-size:8px;
  font-weight:900;
  letter-spacing:.04em;
}

.securityMetricsV221{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}

.securityMetricsV221>div{
  min-width:0;
  padding:11px;
  border:1px solid #e4ebf3;
  border-radius:13px;
  background:#fff;
  display:grid;
  gap:3px;
}

.securityMetricsV221 span{
  color:#7b8b9f;
  font-size:7px;
  font-weight:750;
}

.securityMetricsV221 b{
  color:#0f172a;
  font-size:18px;
  line-height:1;
}

.secureCodeMaskV221{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.06em;
}

@media(max-width:800px){
  .securityMetricsV221{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:480px){
  .securityMetricsV221{grid-template-columns:1fr}
}