:root{
    --bg:#070707;
    --bg2:#101011;
    --surface:#141416;
    --surface2:#1c1c20;
    --surface3:#242428;
    --line:rgba(255,255,255,.10);
    --line2:rgba(212,175,55,.34);
    --text:#fff8ec;
    --muted:#bdb4a5;
    --soft:#8f8678;
    --gold:#d4af37;
    --gold2:#f3d875;
    --gold3:#8c6810;
    --danger:#ff6b6b;
    --ok:#52d273;
    --warning:#ffb55c;
    --radius:26px;
    --shadow:0 24px 70px rgba(0,0,0,.36);
    --max:1440px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#070707}
body{
    min-height:100vh;
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(212,175,55,.18), transparent 28rem),
        radial-gradient(circle at 90% 18%, rgba(255,255,255,.08), transparent 24rem),
        linear-gradient(145deg,#070707 0%,#111112 48%,#080706 100%);
    overflow-x:hidden;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 80%);
    z-index:-1;
}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
img,canvas,svg{max-width:100%}
main{min-height:82vh}

.topbar{
    position:sticky;top:0;z-index:40;
    display:flex;align-items:center;justify-content:space-between;gap:18px;
    padding:14px clamp(18px,5vw,72px);
    background:rgba(8,8,9,.74);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
}
.topbar:after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.45;
}
.brand{display:flex;align-items:center;gap:11px;font-size:24px;font-weight:950;letter-spacing:.2px;white-space:nowrap}
.brand span{color:var(--gold2)}
.brand-icon{
    width:40px;height:40px;border-radius:16px;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--gold2),var(--gold3));
    color:#080808;box-shadow:0 12px 30px rgba(212,175,55,.24);
}
.nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.nav a:not(.btn){
    color:#e2dacd;font-size:14px;font-weight:750;padding:10px 12px;border-radius:14px;
    transition:.18s ease;
}
.nav a:not(.btn):hover{background:rgba(255,255,255,.07);color:#fff}
.user-pill{padding:10px 13px;background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.34);border-radius:999px;color:var(--gold2);font-size:13px;font-weight:850}
.menu-btn{display:none;background:#171719;color:#fff;border:1px solid var(--line);border-radius:15px;padding:9px 12px;cursor:pointer}

.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:none;border-radius:16px;padding:12px 18px;
    background:linear-gradient(135deg,var(--gold2),#b88616 70%,#7f5d0f);
    color:#080808;font-weight:950;cursor:pointer;
    box-shadow:0 16px 34px rgba(212,175,55,.18);
    transition:transform .18s ease, filter .18s ease, border-color .18s ease;
    min-height:45px;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.btn.small{padding:9px 13px;min-height:38px;font-size:13px;border-radius:13px}
.btn.secondary{background:rgba(255,255,255,.07);color:#fff;border:1px solid var(--line);box-shadow:none}
.btn.secondary:hover{border-color:rgba(212,175,55,.42)}
.btn.danger{background:rgba(255,107,107,.14);color:#ffd7d7;border:1px solid rgba(255,107,107,.34);box-shadow:none}
.btn.full{width:100%}

.hero{width:min(var(--max),100%);margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:32px;align-items:center;padding:74px clamp(18px,5vw,72px) 44px}
.hero-copy{position:relative;z-index:1}
.eyebrow,.step-pill{
    display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
    background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.34);color:var(--gold2);
    font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.65px;margin-bottom:14px;
}
.hero-copy h1{font-size:clamp(42px,6vw,84px);line-height:.92;letter-spacing:-2.4px;margin-bottom:22px;max-width:850px}
.hero-copy h1 span{color:var(--gold2);text-shadow:0 18px 42px rgba(212,175,55,.25)}
.hero-copy p{font-size:18px;color:var(--muted);max-width:710px;line-height:1.72;margin-bottom:27px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.hero-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:720px}
.metric{padding:15px;border-radius:18px;background:rgba(255,255,255,.055);border:1px solid var(--line)}
.metric strong{display:block;font-size:24px;color:var(--gold2);line-height:1;margin-bottom:6px}.metric span{color:var(--muted);font-size:13px}
.hero-visual{
    position:relative;min-height:530px;border-radius:36px;overflow:hidden;padding:24px;border:1px solid rgba(212,175,55,.28);
    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),
        radial-gradient(circle at 78% 14%,rgba(212,175,55,.42),transparent 25%),
        linear-gradient(145deg,#222225,#080808 72%);
    box-shadow:var(--shadow);
}
.hero-visual:before{content:"";position:absolute;inset:18px;border:1px solid rgba(212,175,55,.25);border-radius:28px;pointer-events:none}
.hero-visual:after{content:"";position:absolute;width:260px;height:260px;right:-80px;bottom:-80px;border-radius:50%;background:rgba(212,175,55,.14);filter:blur(4px)}
.visual-panel{position:relative;z-index:1;height:100%;display:grid;align-content:space-between;gap:16px}
.brand-mark{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border-radius:24px;background:rgba(0,0,0,.28);border:1px solid var(--line)}
.brand-mark strong{font-size:22px}.brand-mark span{color:var(--muted);font-size:13px}.brand-seal{width:60px;height:60px;border-radius:22px;background:linear-gradient(135deg,var(--gold2),#8c6810);color:#080808;display:grid;place-items:center;font-size:28px;font-weight:950}
.app-preview{display:grid;gap:14px}
.preview-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:20px;background:rgba(10,10,12,.74);border:1px solid rgba(255,255,255,.10)}
.preview-row b{display:block;margin-bottom:4px}.preview-row small{color:var(--muted)}
.status-dot{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(82,210,115,.12)}
.float-card,.feature-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 18px 55px rgba(0,0,0,.24)}
.float-card h3,.feature-card h3{color:var(--gold2);margin-bottom:8px}.float-card p,.feature-card p{color:var(--muted);line-height:1.55}

.section,.dashboard{width:min(var(--max),100%);margin-inline:auto;padding:36px clamp(18px,5vw,72px)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.title{font-size:clamp(28px,3.6vw,46px);line-height:1.02;font-weight:950;letter-spacing:-1.2px}.subtitle{color:var(--muted);margin-top:8px;line-height:1.55;max-width:820px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}.grid.compact{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{
    position:relative;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.24);overflow:hidden;
}
.card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(212,175,55,.10),transparent 38%);pointer-events:none;opacity:.75}.card>*{position:relative;z-index:1}.card h3{margin-bottom:8px;font-size:20px}.muted{color:var(--muted);line-height:1.55}.soft{color:var(--soft)}
.card-link{transition:.2s ease}.card-link:hover{transform:translateY(-3px);border-color:rgba(212,175,55,.38)}
.price{font-size:31px;font-weight:950;color:var(--gold2);margin:13px 0}.badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:#f1e8d9;font-size:12px;font-weight:850;margin:3px 3px 3px 0}.badge-ok{background:rgba(82,210,115,.15);border-color:rgba(82,210,115,.45);color:#c8ffd4}.badge-off{background:rgba(255,107,107,.13);border-color:rgba(255,107,107,.36);color:#ffd3d3}
.avatar{width:82px;height:82px;border-radius:28px;background:linear-gradient(135deg,#3a2a05,#d4af37);display:flex;align-items:center;justify-content:center;font-weight:950;color:#111;font-size:30px;margin-bottom:14px;box-shadow:0 16px 30px rgba(0,0,0,.28)}
.avatar.luis{background:linear-gradient(135deg,#f1f1f1,#777);color:#111}.avatar.andres{background:linear-gradient(135deg,#090909,#b68a16);color:#fff}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:22px}.stat{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:24px;padding:20px;overflow:hidden}.stat:after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:rgba(212,175,55,.12)}.stat span{color:var(--muted);font-weight:750}.stat strong{display:block;font-size:34px;color:var(--gold2);margin-top:8px;letter-spacing:-1px}

.form-shell{max-width:620px;margin:44px auto;padding:0 18px}.form-box{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:var(--shadow)}
label{display:block;margin:14px 0 7px;color:#f2eadb;font-weight:850}input,select,textarea{width:100%;padding:13px 14px;border-radius:15px;border:1px solid rgba(255,255,255,.13);background:rgba(5,5,6,.72);color:#fff;outline:none;transition:.16s ease}textarea{resize:vertical}input:focus,select:focus,textarea:focus{border-color:rgba(212,175,55,.72);box-shadow:0 0 0 4px rgba(212,175,55,.10)}input::placeholder,textarea::placeholder{color:#8e8578}.form-box .btn,form .btn{margin-top:16px}
.alert{padding:14px 16px;border-radius:17px;margin:14px 0;line-height:1.45;border:1px solid var(--line);background:rgba(255,255,255,.06)}.alert.ok{background:rgba(82,210,115,.12);color:#caffd6;border-color:rgba(82,210,115,.34)}.alert.err{background:rgba(255,107,107,.12);color:#ffd5d5;border-color:rgba(255,107,107,.34)}

.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:24px;background:rgba(12,12,14,.72);box-shadow:0 18px 50px rgba(0,0,0,.20);-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;min-width:820px;font-size:14px}th,td{padding:15px;border-bottom:1px solid rgba(255,255,255,.075);text-align:left;vertical-align:middle}tr:last-child td{border-bottom:0}th{position:sticky;top:0;background:#101012;color:var(--gold2);font-size:12px;text-transform:uppercase;letter-spacing:.7px;z-index:2}td{color:#eee}.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.booking-layout{display:grid;grid-template-columns:minmax(320px,.88fr) minmax(420px,1.12fr);gap:20px;align-items:start}.radio-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:12px}.radio-card{border:1px solid var(--line);background:rgba(10,10,12,.62);border-radius:22px;padding:17px;cursor:pointer;transition:.18s ease}.radio-card:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.34)}.radio-card input{display:none}.radio-card:has(input:checked){border-color:rgba(212,175,55,.85);box-shadow:0 0 0 3px rgba(212,175,55,.12);background:rgba(212,175,55,.08)}
.availability-box,.calendar-box,.selected-summary{margin:18px 0;padding:17px;border-radius:22px;background:rgba(8,8,10,.68);border:1px solid var(--line)}.availability-days{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-top:10px}.availability-day{padding:12px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.045)}.availability-day b{display:block;margin-bottom:5px}.availability-day span{color:var(--muted);font-size:13px}.availability-day.active{border-color:rgba(82,210,115,.42);background:rgba(82,210,115,.08)}.availability-day.active b{color:#caffd6}.availability-day.off{opacity:.58}.selected-summary b{color:var(--gold2)}.selected-summary p{margin-top:5px;color:var(--muted)}.selected-summary span{color:#fff}
.calendar-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.calendar-header h3{color:var(--gold2);text-align:center;margin:0}.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-weekdays span{text-align:center;color:var(--muted);font-size:12px;font-weight:950;padding:6px 0}.calendar-empty{min-height:50px}.calendar-day{min-height:58px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.055);color:#fff;cursor:pointer;transition:.18s ease;padding:5px}.calendar-day b{font-size:16px}.calendar-day small{display:block;margin-top:4px;font-size:10px;font-weight:950;opacity:.95}.calendar-day:not(:disabled):hover{transform:translateY(-2px);border-color:rgba(212,175,55,.66)}.calendar-day.cal-alta{background:rgba(82,210,115,.14);border-color:rgba(82,210,115,.50);color:#caffd5}.calendar-day.cal-media{background:rgba(212,175,55,.15);border-color:rgba(212,175,55,.50);color:#ffe9a6}.calendar-day.cal-baja{background:rgba(255,181,92,.14);border-color:rgba(255,181,92,.50);color:#ffd4a4}.calendar-day.cal-sin{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.38);color:#ffd0d0}.calendar-day.cal-no_trabaja,.calendar-day.cal-pasado,.calendar-day.cal-sin_datos{opacity:.42;background:rgba(255,255,255,.04);color:#aaa;border-color:var(--line);cursor:not-allowed}.calendar-day.selected{background:linear-gradient(135deg,var(--gold2),#a77a12)!important;color:#111!important;border-color:var(--gold2)!important;opacity:1!important}.calendar-help{color:var(--muted);font-size:13px;margin-top:12px;line-height:1.45}
#slots{width:100%;max-width:100%;display:block}.slot-info-final{width:100%;padding:12px 14px;margin:0 0 14px;border-radius:16px;background:rgba(212,175,55,.10);border:1px solid rgba(212,175,55,.32);color:var(--gold2);line-height:1.45}.horarios-final{width:100%;display:flex;flex-direction:column;gap:16px}.horario-bloque-final{width:100%;padding:16px;border-radius:20px;background:rgba(8,8,10,.68);border:1px solid var(--line)}.horario-bloque-final h4{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--gold2);font-size:16px}.horario-botones-final{display:flex;flex-wrap:wrap;gap:10px}.hora-btn-final{width:88px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font-weight:950;cursor:pointer;transition:.18s ease}.hora-btn-final:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.65)}.hora-btn-final.active{background:linear-gradient(135deg,var(--gold2),#a77a12);color:#111;border-color:var(--gold2);box-shadow:0 10px 26px rgba(212,175,55,.20)}
/* Horarios visibles: no ocultar el contenedor dinámico de citas */
.slots{display:block!important}
#slots{display:block!important}

.schedule-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}.schedule-card{border-radius:26px;padding:20px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));transition:.22s ease;position:relative;overflow:hidden}.schedule-card.is-active{border-color:rgba(212,175,55,.75);box-shadow:0 18px 60px rgba(212,175,55,.10)}.schedule-card.is-off{opacity:.70}.schedule-top{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:18px}.schedule-top h3{font-size:22px;margin-bottom:5px}.schedule-status{color:var(--muted);font-size:14px}.schedule-card.is-active .schedule-status{color:var(--gold2);font-weight:850}.schedule-hours{display:grid;grid-template-columns:1fr 1fr;gap:12px}.schedule-preview{margin-top:14px;padding:12px;border-radius:16px;background:rgba(0,0,0,.30);border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.45}.toggle{width:58px;height:32px;position:relative;display:inline-block;margin:0}.toggle input{display:none}.toggle span{position:absolute;cursor:pointer;inset:0;background:#3a3a45;border-radius:999px;transition:.25s;border:1px solid #50505d}.toggle span:before{content:"";position:absolute;width:24px;height:24px;left:4px;top:3px;border-radius:50%;background:#fff;transition:.25s}.toggle input:checked + span{background:linear-gradient(135deg,var(--gold2),#997414);border-color:var(--gold2)}.toggle input:checked + span:before{transform:translateX(25px);background:#111}
.chart-card{height:390px;min-height:390px;display:flex;flex-direction:column;overflow:hidden}
.chart-card h3{flex:0 0 auto}
.chart-box{position:relative;flex:1 1 auto;width:100%;height:300px;min-height:0;overflow:hidden}
.chart-box canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:80;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}.modal-backdrop.show{display:flex}.modal{width:min(580px,100%);background:#151519;border:1px solid rgba(212,175,55,.25);border-radius:30px;padding:24px;box-shadow:0 35px 120px rgba(0,0,0,.65)}.footer{margin-top:40px;padding:28px clamp(18px,5vw,72px);background:rgba(5,5,6,.92);border-top:1px solid var(--line);color:var(--muted)}.footer-inner{width:min(var(--max),100%);margin:auto;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}.footer b{color:#fff}.footer small{color:var(--soft)}

@media(max-width:1100px){.hero,.booking-layout{grid-template-columns:1fr}.hero-visual{min-height:auto}.hero{padding-top:48px}}
@media(max-width:900px){.topbar{padding:13px 18px;flex-wrap:wrap}.brand{font-size:21px}.brand-icon{width:36px;height:36px;border-radius:14px}.menu-btn{display:block;margin-left:auto}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:9px;padding-top:10px}body.menu-open .nav{display:flex}.nav a,.nav .user-pill{width:100%;text-align:center;justify-content:center;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid var(--line)}.nav .btn{width:100%}.hero-metrics{grid-template-columns:1fr 1fr}.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.hero,.section,.dashboard{padding-left:14px!important;padding-right:14px!important}.hero-copy h1{font-size:42px;letter-spacing:-1.5px}.hero-copy p{font-size:16px}.hero-metrics{grid-template-columns:1fr}.title{font-size:29px!important}.subtitle{font-size:14px}.card,.form-box{padding:17px!important;border-radius:22px!important}.stats{grid-template-columns:1fr}.stat strong{font-size:27px}.radio-cards{grid-template-columns:1fr!important}.barber-card-client{display:grid;grid-template-columns:auto 1fr;gap:8px 13px;align-items:center}.barber-card-client .avatar{grid-row:span 3;width:62px;height:62px;border-radius:20px;margin:0}.availability-days{grid-template-columns:1fr 1fr!important}.calendar-box{padding:10px!important;border-radius:18px!important}.calendar-weekdays,.calendar-grid{gap:4px!important}.calendar-weekdays span{font-size:10px}.calendar-day{min-height:43px!important;border-radius:10px!important}.calendar-day b{font-size:13px}.calendar-day small{font-size:8px}.calendar-help{font-size:11px}.horario-botones-final{display:grid;grid-template-columns:repeat(3,1fr)}.hora-btn-final{width:100%}table{min-width:720px;font-size:13px}th,td{padding:12px 10px}.modal-backdrop{align-items:flex-end;padding:0}.modal{width:100%;border-radius:26px 26px 0 0;max-height:88vh;overflow:auto}input,select,textarea{font-size:16px;min-height:46px}.form-shell{margin:24px auto}.hero-actions .btn{width:100%}}
@media(max-width:420px){.availability-days,.schedule-hours{grid-template-columns:1fr!important}.horario-botones-final{grid-template-columns:repeat(2,1fr)}.brand{font-size:19px}}


/* Fix: evita que Chart.js haga crecer infinitamente las tarjetas del dashboard admin */
@media(max-width:700px){.chart-card{height:320px;min-height:320px}.chart-box{height:235px}}

/* Ajustes de citas cliente */
.badge-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:92px;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:#f7f1e7;
  text-transform:capitalize;
}
.estado-confirmada,.estado-pendiente{background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.52);color:#ffe99a}
.estado-finalizada{background:rgba(82,210,115,.14);border-color:rgba(82,210,115,.44);color:#c9ffd5}
.estado-cancelada{background:rgba(255,107,107,.13);border-color:rgba(255,107,107,.38);color:#ffd1d1}
.estado-pago{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#eee}
.calendar-day.cal-fuera_margen{opacity:.45;cursor:not-allowed;background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.08)!important;color:#8d877d!important}

/* Nuevos módulos profesionales: movimientos, reputación y filtros financieros */
.rating-mini{display:grid;grid-template-columns:86px minmax(160px,1fr) auto;gap:8px;align-items:center;min-width:360px}
.rating-mini select,.rating-mini input{min-height:38px;padding:8px 10px;border-radius:12px}
@media(max-width:700px){.rating-mini{grid-template-columns:1fr;min-width:220px}.rating-mini .btn{width:100%}}

/* Fix admin: modal de editar barbero con scroll interno */
.modal-backdrop.show{
  display:flex;
  align-items:center;
  justify-content:center;
}
.modal{
  max-height:86vh;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.modal::-webkit-scrollbar{
  width:10px;
}
.modal::-webkit-scrollbar-track{
  background:rgba(255,255,255,.05);
  border-radius:999px;
}
.modal::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold2),#8f6c14);
  border-radius:999px;
  border:2px solid #151519;
}
.modal::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ffe27a,var(--gold2));
}
.modal h2{
  position:sticky;
  top:-24px;
  z-index:5;
  background:linear-gradient(180deg,#151519 70%,rgba(21,21,25,.92));
  padding:0 0 12px;
  margin:0 0 8px;
}
.modal .actions{
  position:sticky;
  bottom:-24px;
  z-index:5;
  background:linear-gradient(0deg,#151519 72%,rgba(21,21,25,.92));
  padding:14px 0 0;
  margin-top:10px;
}

@media(max-width:700px){
  .modal{
    max-height:88vh;
    overflow-y:auto;
  }
  .modal h2{
    top:-17px;
  }
  .modal .actions{
    bottom:-17px;
  }
}

/* Fix visual y funcional para administración de horarios */
.selected-barber-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 18px;
    align-items: end;
}

.barber-picker-form {
    margin: 0;
}

.selected-barber-resume {
    min-width: 260px;
    padding: 14px 16px;
    border: 1px solid rgba(212, 175, 55, .32);
    border-radius: 18px;
    background: rgba(212, 175, 55, .08);
    display: grid;
    gap: 4px;
}

.selected-barber-resume span {
    color: var(--muted, #b8b2a4);
    font-size: .85rem;
}

.selected-barber-resume strong {
    color: var(--gold, #d4af37);
    font-size: 1.05rem;
}

.selected-barber-resume small {
    color: var(--muted, #b8b2a4);
}

.schedule-control-panel {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 420px) auto;
    gap: 18px;
    align-items: end;
}

.sticky-save-bar {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 22px;
    background: rgba(12, 12, 12, .92);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 850px) {
    .selected-barber-card,
    .schedule-control-panel {
        grid-template-columns: 1fr;
    }

    .selected-barber-resume {
        min-width: 0;
    }

    .sticky-save-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Fotos reales de barberos */
.avatar.avatar-photo{
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    color:transparent!important;
    border:1px solid rgba(212,175,55,.38);
}
.avatar-mini{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    border-radius:16px!important;
    font-size:18px!important;
    margin:0!important;
}
.person-cell{
    display:flex;
    align-items:center;
    gap:12px;
}
.profile-photo-card{margin-bottom:18px;}
.profile-photo-row{align-items:flex-start;}
.inline-upload-form{
    display:grid;
    grid-template-columns:minmax(220px,1fr) auto;
    gap:10px;
    align-items:center;
    margin-top:12px;
}
.inline-upload-form .btn{margin-top:0!important;}
input[type="file"]{
    padding:10px 12px;
    cursor:pointer;
}
input[type="file"]::file-selector-button{
    border:0;
    border-radius:12px;
    padding:9px 12px;
    margin-right:12px;
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#111;
    font-weight:900;
    cursor:pointer;
}
@media(max-width:700px){
    .inline-upload-form{grid-template-columns:1fr;}
    .person-cell.profile-photo-row{align-items:center;}
}


/* Perfil público del barbero */
.user-pill-link{
    text-decoration:none;
    transition:.18s ease;
}
.user-pill-link:hover{
    transform:translateY(-1px);
    border-color:rgba(212,175,55,.65)!important;
    color:#fff!important;
}
.profile-hero-card{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:22px;
    align-items:center;
    padding:24px;
    margin-bottom:18px;
    border:1px solid rgba(212,175,55,.28);
    border-radius:28px;
    background:radial-gradient(circle at 12% 0%,rgba(212,175,55,.12),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
    box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.profile-avatar-wrap{
    display:grid;
    gap:12px;
    justify-items:center;
}
.profile-avatar{
    width:118px!important;
    height:118px!important;
    border-radius:34px!important;
    font-size:42px!important;
    margin:0!important;
    box-shadow:0 18px 45px rgba(0,0,0,.38);
}
.profile-info-main h2{
    margin:4px 0 6px;
    font-size:clamp(28px,4vw,46px);
    line-height:1;
}
.profile-info-main p{
    color:#e8dfcc;
    margin:0 0 14px;
    max-width:760px;
}
.eyebrow{
    display:inline-flex;
    width:max-content;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(212,175,55,.35);
    background:rgba(212,175,55,.10);
    color:var(--gold2);
    font-size:12px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
}
.profile-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.profile-meta-row span{
    padding:8px 11px;
    border-radius:999px;
    background:rgba(0,0,0,.24);
    border:1px solid rgba(255,255,255,.09);
    color:#f5ecdb;
    font-weight:800;
    font-size:13px;
}
.profile-edit-form{
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(260px,380px);
    gap:20px;
    align-items:start;
}
.profile-edit-form textarea{
    min-height:160px;
    resize:vertical;
}
.profile-side-card{
    padding:18px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.18);
}
.clean-list{
    list-style:none;
    padding:0;
    margin:12px 0 0;
    display:grid;
    gap:10px;
}
.clean-list li{
    padding:10px 12px;
    border-radius:14px;
    background:rgba(255,255,255,.045);
    color:#eee;
}
.profile-actions{
    grid-column:1/-1;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.visually-hidden-file{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
}
@media(max-width:820px){
    .profile-hero-card,
    .profile-edit-form{
        grid-template-columns:1fr;
    }
    .profile-avatar-wrap{
        justify-items:start;
    }
    .profile-avatar{
        width:96px!important;
        height:96px!important;
        border-radius:28px!important;
    }
}

/* Landing principal enfocada al cliente */
.client-hero{
    width:min(var(--max),100%);
    margin:0 auto;
    padding:74px clamp(18px,5vw,72px) 34px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
    gap:42px;
    align-items:center;
    position:relative;
}
.client-hero:before{
    content:"";
    position:absolute;
    inset:22px clamp(12px,3vw,44px) auto auto;
    width:340px;height:340px;border-radius:999px;
    background:radial-gradient(circle,rgba(243,216,117,.16),transparent 68%);
    filter:blur(8px);
    pointer-events:none;
}
.premium-eyebrow{margin-bottom:18px}
.client-hero__copy h1{
    font-size:clamp(46px,6vw,86px);
    line-height:.94;
    letter-spacing:-3px;
    max-width:920px;
    margin-bottom:24px;
}
.client-hero__lead{
    color:#d9d0c1;
    font-size:clamp(17px,1.8vw,21px);
    line-height:1.75;
    max-width:790px;
    margin-bottom:28px;
}
.client-actions{margin-bottom:22px;display:flex;gap:12px;flex-wrap:wrap}
.client-trust-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    color:#eee2c0;
    font-size:14px;
    font-weight:850;
}
.client-trust-row span{
    padding:9px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.09);
}
.client-hero__showcase{position:relative;min-height:610px;display:grid;place-items:center;padding-inline:92px}
.phone-preview{
    width:min(390px,100%);
    border-radius:42px;
    border:1px solid rgba(243,216,117,.28);
    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)),
        radial-gradient(circle at top right,rgba(212,175,55,.20),transparent 42%),
        #101012;
    padding:20px;
    box-shadow:0 34px 100px rgba(0,0,0,.56), inset 0 1px 0 rgba(255,255,255,.08);
    position:relative;
    overflow:hidden;
    z-index:2;
}
.phone-preview:before{
    content:"";
    position:absolute;
    left:26px;right:26px;top:10px;height:5px;border-radius:999px;
    background:rgba(255,255,255,.12);
}
.phone-top{display:flex;justify-content:space-between;align-items:center;margin:16px 2px 20px;color:#fff7e7;font-weight:950}
.phone-top span{width:9px;height:9px;border-radius:999px;background:var(--gold2);box-shadow:0 0 18px rgba(243,216,117,.6)}
.phone-card{
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:rgba(0,0,0,.34);
    margin-bottom:14px;
}
.phone-card.active{border-color:rgba(243,216,117,.50);background:rgba(212,175,55,.10)}
.phone-card small{display:block;color:var(--gold2);font-weight:950;margin-bottom:7px;text-transform:uppercase;letter-spacing:.8px}
.phone-card strong{display:block;font-size:20px;margin-bottom:7px}
.phone-card p{color:var(--muted);line-height:1.5;font-size:14px}
.mini-slots{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mini-slots span{padding:8px 10px;border-radius:999px;background:rgba(243,216,117,.16);border:1px solid rgba(243,216,117,.25);color:#ffeaa0;font-weight:900;font-size:12px}
.phone-cta{display:flex;justify-content:center;padding:14px;border-radius:18px;background:linear-gradient(135deg,var(--gold2),#a87814);color:#090909;font-weight:950;margin-top:4px}
.hero-floating{
    position:absolute;
    z-index:4;
    display:grid;
    gap:2px;
    padding:16px 18px;
    border-radius:22px;
    border:1px solid rgba(243,216,117,.25);
    background:rgba(18,18,20,.78);
    backdrop-filter:blur(14px);
    box-shadow:0 22px 60px rgba(0,0,0,.42);
}
.hero-floating b{font-size:24px;color:var(--gold2)}
.hero-floating span{font-size:12px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.6px}
.hero-floating.one{left:-54px;top:142px}
.hero-floating.two{right:-54px;bottom:82px}
.client-strip{
    width:min(calc(var(--max) - 120px),calc(100% - 36px));
    margin:0 auto 24px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(243,216,117,.20);
    background:rgba(243,216,117,.20);
    box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.client-strip div{padding:24px;background:rgba(18,18,20,.92);display:grid;gap:5px;text-align:center}
.client-strip strong{font-size:34px;color:var(--gold2)}
.client-strip span{color:var(--muted);font-weight:850}
.client-section{padding-top:48px;padding-bottom:36px}
.section-kicker{display:inline-flex;color:var(--gold2);font-weight:950;text-transform:uppercase;letter-spacing:1.2px;font-size:12px;margin-bottom:10px}
.service-showcase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.service-tile{
    min-height:250px;
    padding:22px;
    border-radius:30px;
    border:1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 90% 0%,rgba(212,175,55,.18),transparent 36%),
        linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:20px;
    box-shadow:var(--shadow);
}
.service-icon{width:50px;height:50px;border-radius:18px;display:grid;place-items:center;background:rgba(212,175,55,.18);border:1px solid rgba(212,175,55,.35);color:var(--gold2);font-size:22px}
.service-tile h3{font-size:22px;margin-bottom:10px}
.service-tile p{color:var(--muted);line-height:1.55;font-size:14px;min-height:66px}
.service-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.service-meta span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:#eee;font-size:12px;font-weight:900}
.service-meta b{color:var(--gold2);font-size:19px}
.dark-card-section{
    width:min(var(--max),100%);
    margin:20px auto 0;
    border-radius:36px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(12,12,14,.72);
}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step-card{
    padding:22px;
    border-radius:26px;
    background:rgba(255,255,255,.055);
    border:1px solid rgba(255,255,255,.09);
}
.step-card span{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--gold2),#9a7413);color:#080808;font-weight:950;margin-bottom:18px}
.step-card h3{font-size:21px;margin-bottom:9px}
.step-card p{color:var(--muted);line-height:1.55;font-size:14px}
.barber-showcase{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.barber-profile-card{
    border-radius:32px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    overflow:hidden;
    box-shadow:var(--shadow);
}
.barber-photo-wrap{position:relative;height:260px;background:radial-gradient(circle at 50% 10%,rgba(243,216,117,.18),transparent 55%),#101012;display:grid;place-items:center}
.barber-photo{
    width:150px;height:150px;border-radius:44px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#29292d,#090909);
    color:var(--gold2);font-size:52px;font-weight:950;
    border:1px solid rgba(243,216,117,.25);
    box-shadow:0 22px 60px rgba(0,0,0,.40);
    background-size:cover;background-position:center;
}
.barber-photo.has-photo{font-size:0}
.rating-chip{position:absolute;right:20px;bottom:20px;padding:9px 12px;border-radius:999px;background:rgba(0,0,0,.62);border:1px solid rgba(243,216,117,.35);color:var(--gold2);font-weight:950;backdrop-filter:blur(10px)}
.barber-info{padding:22px}
.barber-info h3{font-size:24px;margin-bottom:8px}
.specialty{color:#fff;font-weight:900;margin-bottom:10px}
.barber-desc{line-height:1.55;min-height:68px}
.barber-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.barber-tags span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:#e9dfcf;font-size:12px;font-weight:900}
.final-cta-section{padding-bottom:70px}
.final-cta{
    border-radius:38px;
    border:1px solid rgba(243,216,117,.24);
    background:
        radial-gradient(circle at right top,rgba(243,216,117,.22),transparent 45%),
        linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035));
    padding:34px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    box-shadow:var(--shadow);
}
.final-cta h2{font-size:clamp(32px,4vw,54px);line-height:1;margin-bottom:12px;letter-spacing:-1.5px}
.final-cta p{color:var(--muted);font-size:17px;line-height:1.6;max-width:680px}
.final-cta-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:1100px){
    .client-hero{grid-template-columns:1fr;padding-top:52px}.client-hero__showcase{min-height:520px;padding-inline:110px}.service-showcase,.steps-grid{grid-template-columns:repeat(2,1fr)}.barber-showcase{grid-template-columns:1fr 1fr}.hero-floating.one{left:4%;top:122px}.hero-floating.two{right:4%;bottom:55px}
}
@media(max-width:760px){
    .client-hero{padding-left:14px;padding-right:14px}.client-hero__copy h1{letter-spacing:-1.8px}.client-actions .btn{width:100%}.client-trust-row span{width:100%;text-align:center}.client-strip{grid-template-columns:1fr;width:calc(100% - 28px)}.service-showcase,.steps-grid,.barber-showcase{grid-template-columns:1fr}.client-hero__showcase{min-height:auto;padding:20px 0 40px}.hero-floating{position:static;margin-top:12px;width:min(390px,100%)}.phone-preview{order:1}.final-cta{align-items:stretch;flex-direction:column;padding:24px}.final-cta-actions .btn{width:100%}.barber-photo-wrap{height:220px}.service-tile{min-height:auto}
}

/* Historial de cortes / pagos: paginación y lectura más clara */
.history-card{
  margin-top:22px;
  border-radius:28px;
  border:1px solid var(--line);
  background:rgba(12,12,14,.74);
  box-shadow:0 20px 70px rgba(0,0,0,.24);
  overflow:hidden;
}
.history-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
}
.history-toolbar.bottom{
  border-top:1px solid rgba(255,255,255,.075);
  border-bottom:0;
}
.history-toolbar h2{
  margin:0 0 4px;
  color:#fff;
  font-size:22px;
  letter-spacing:.2px;
}
.history-toolbar p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
}
.pager-btn{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 15px;
  border-radius:999px;
  border:1px solid rgba(243,216,117,.28);
  background:rgba(255,255,255,.065);
  color:#f4e8c3!important;
  text-decoration:none!important;
  font-weight:950;
  font-size:13px;
  letter-spacing:.2px;
  transition:.18s ease;
}
.pager-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(243,216,117,.70);
  box-shadow:0 12px 32px rgba(212,175,55,.12);
}
.pager-btn.primary{
  background:linear-gradient(135deg,var(--gold2),#a77a12);
  border-color:rgba(243,216,117,.70);
  color:#090909!important;
}
.pager-btn.disabled{
  opacity:.42;
  pointer-events:none;
  filter:grayscale(.4);
}
.pager-page{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.26);
  color:#fff;
  font-size:13px;
  font-weight:900;
}
.history-table-wrap{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}
.history-table tr:hover td{
  background:rgba(243,216,117,.035);
}
.row-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--gold2);
  font-weight:950;
}
.date-chip{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  min-width:104px;
  padding:9px 11px;
  border-radius:14px;
  background:rgba(0,0,0,.30);
  border:1px solid rgba(243,216,117,.18);
}
.date-chip b{
  color:#fff;
  font-size:14px;
}
.date-chip span{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.empty-state{
  padding:22px;
  text-align:center;
  color:var(--muted);
  font-weight:850;
}
@media(max-width:760px){
  .history-toolbar,.history-toolbar.bottom{
    align-items:stretch;
    flex-direction:column;
  }
  .pager{
    justify-content:stretch;
  }
  .pager-btn,.pager-page{
    flex:1 1 auto;
  }
}


/* Historial profesional Blackout Barber - paginación real tipo app */
.bb-history-card{
  margin-top:24px;
  border-radius:30px;
  border:1px solid rgba(243,216,117,.18);
  background:
    radial-gradient(circle at 92% 0%,rgba(212,175,55,.13),transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 24px 80px rgba(0,0,0,.30);
  overflow:hidden;
}
.bb-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:24px 26px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.bb-history-titlebox{min-width:0}
.bb-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(243,216,117,.32);
  background:rgba(212,175,55,.10);
  color:var(--gold2);
  font-size:11px;
  font-weight:950;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.bb-history-titlebox h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,2.4vw,38px);
  line-height:1;
  letter-spacing:-.8px;
}
.bb-history-titlebox p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.45;
}
.bb-history-summary{
  min-width:210px;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.28);
  text-align:right;
}
.bb-history-summary span,
.bb-history-summary small{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  letter-spacing:.25px;
  text-transform:uppercase;
}
.bb-history-summary strong{
  display:block;
  margin:4px 0;
  color:var(--gold2);
  font-size:28px;
  line-height:1;
  font-weight:1000;
}
.bb-pagination-wrap{
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);
  align-items:center;
  gap:14px;
  padding:16px 26px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(0,0,0,.18);
}
.bb-pagination-wrap.bottom{
  border-top:1px solid rgba(255,255,255,.075);
  border-bottom:0;
}
.bb-page-btn{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:16px;
  border:1px solid rgba(243,216,117,.28);
  background:rgba(255,255,255,.065);
  color:#f7e7a4!important;
  text-decoration:none!important;
  font-weight:1000;
  font-size:14px;
  letter-spacing:.2px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.bb-page-btn.prev{justify-self:start}
.bb-page-btn.next{
  justify-self:end;
  background:linear-gradient(135deg,var(--gold2),#a77a12);
  border-color:rgba(243,216,117,.70);
  color:#080808!important;
  box-shadow:0 14px 34px rgba(212,175,55,.13), inset 0 1px 0 rgba(255,255,255,.25);
}
.bb-page-btn:not(.disabled):hover{
  transform:translateY(-2px);
  border-color:rgba(243,216,117,.72);
  box-shadow:0 16px 36px rgba(212,175,55,.16), inset 0 1px 0 rgba(255,255,255,.10);
}
.bb-page-btn.disabled{
  opacity:.38;
  cursor:not-allowed;
  filter:grayscale(.3);
}
.bb-page-status{
  min-width:190px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.34);
  text-align:center;
}
.bb-page-status span{
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.bb-page-status strong{
  margin-top:3px;
  color:#fff;
  font-size:16px;
  line-height:1.1;
  font-weight:1000;
}
.bb-page-status.compact strong{font-size:14px}
.bb-history-table-wrap{border-radius:0!important;border-left:0!important;border-right:0!important;box-shadow:none!important;background:rgba(7,7,9,.44)!important}
.bb-history-table-wrap table th{background:#0e0e10;color:var(--gold2)}
@media(max-width:820px){
  .bb-history-head{align-items:stretch;flex-direction:column;padding:20px}
  .bb-history-summary{text-align:left;min-width:0;width:100%}
  .bb-pagination-wrap{grid-template-columns:1fr;padding:14px 18px}
  .bb-page-btn.prev,.bb-page-btn.next{justify-self:stretch;width:100%}
  .bb-page-status{width:100%;min-width:0;order:-1}
}

/* Sección activa en header */
.nav a.is-active:not(.btn){
    position:relative;
    background:linear-gradient(135deg,rgba(243,216,117,.92),rgba(181,132,18,.92));
    color:#080808!important;
    border:1px solid rgba(243,216,117,.55);
    box-shadow:0 14px 30px rgba(212,175,55,.18);
}
.nav a.is-active:not(.btn)::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:-10px;
    height:3px;
    border-radius:999px;
    background:var(--gold2);
    box-shadow:0 0 16px rgba(243,216,117,.75);
}
.nav .user-pill.is-active{
    background:linear-gradient(135deg,var(--gold2),#a77a12);
    color:#090909;
    border-color:rgba(243,216,117,.75);
}
@media(max-width:900px){
    .nav a.is-active:not(.btn)::after{display:none}
}

/* Clientes: contador clickeable e historial individual */
.badge-click{
    cursor:pointer;
    transition:.18s ease;
    border-color:rgba(243,216,117,.34)!important;
}
.badge-click:hover{
    transform:translateY(-2px);
    background:linear-gradient(135deg,var(--gold2),#a77a12);
    color:#080808;
    box-shadow:0 14px 30px rgba(212,175,55,.18);
}
.date-chip.mini{padding:8px 10px;border-radius:14px;min-width:120px}
.date-chip.mini b{font-size:13px}.date-chip.mini span{font-size:11px}
.client-history-hero{align-items:flex-end}
.client-profile-strip{
    display:grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap:14px;
    margin:18px 0 22px;
}
.client-profile-strip>div{
    padding:18px 20px;
    border:1px solid var(--line);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
    box-shadow:0 16px 50px rgba(0,0,0,.22);
}
.client-profile-strip span{display:block;color:var(--muted);font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.55px;margin-bottom:7px}
.client-profile-strip strong{display:block;color:var(--gold2);font-size:26px;line-height:1.05}
.client-profile-strip small{display:block;color:var(--muted);margin-top:8px;line-height:1.45}
.client-appointments-wrap{border-radius:26px;overflow:auto}
.client-appointments-table tr:not(:first-child){transition:.16s ease}
.client-appointments-table tr:not(:first-child):hover{background:rgba(212,175,55,.045)}
.client-cita-row.is-complete{background:rgba(82,210,115,.028)}
.block{display:block;margin-top:6px}
.ok-badge{
    background:rgba(82,210,115,.14)!important;
    border-color:rgba(82,210,115,.44)!important;
    color:#caffd5!important;
}
@media(max-width:850px){
    .client-profile-strip{grid-template-columns:1fr 1fr}
    .client-profile-strip>div:first-child{grid-column:1/-1}
}
@media(max-width:520px){
    .client-profile-strip{grid-template-columns:1fr}
    .client-history-hero{align-items:flex-start}
    .client-history-hero .btn{width:100%}
}

/* === Ajustes finales: tabla de barberos con orden desde encabezados === */
.order-current{
  margin:0 0 12px;
  padding:13px 16px;
  border-radius:18px;
  border:1px solid rgba(212,175,55,.28);
  background:linear-gradient(180deg,rgba(212,175,55,.10),rgba(255,255,255,.035));
  color:#eee;
  font-weight:750;
}
.order-current b{color:var(--gold2)}
.barber-table-wrap{overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(212,175,55,.55) rgba(255,255,255,.06)}
.barber-admin-table{min-width:1080px;table-layout:auto}
.barber-admin-table th,.barber-admin-table td{vertical-align:middle}
.barber-admin-table th{white-space:nowrap}
.sort-th{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:8px 10px;
  border-radius:12px;
  color:var(--gold2)!important;
  text-decoration:none!important;
  border:1px solid transparent;
  transition:.18s ease;
  font-weight:950;
}
.sort-th:hover,
.sort-th.active{
  background:linear-gradient(135deg,var(--gold2),#a97911);
  color:#080808!important;
  border-color:rgba(212,175,55,.55);
  box-shadow:0 8px 22px rgba(212,175,55,.14);
}
.center-col{text-align:center!important}
.barber-admin-table .center-col{vertical-align:middle;text-align:center!important}
.status-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:78px;
  max-width:94px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  text-decoration:none!important;
  font-size:12px;
  font-weight:950;
  letter-spacing:.2px;
  transition:.18s ease;
}
.status-pill.is-active{
  color:#b9ffd0!important;
  background:rgba(20,128,61,.18);
  border:1px solid rgba(34,197,94,.45);
}
.status-pill.is-inactive{
  color:#ffbbbb!important;
  background:rgba(128,28,38,.22);
  border:1px solid rgba(239,68,68,.42);
}
.status-pill:hover{transform:translateY(-1px);filter:brightness(1.08)}
.actions-compact{
  justify-content:center!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  min-width:132px;
}
.actions-compact .btn.small{
  min-width:62px!important;
  padding:9px 11px!important;
  border-radius:13px!important;
  margin:0!important;
  text-align:center;
}
.barber-admin-table .person-cell{min-width:190px}
.barber-admin-table td:nth-child(7),
.barber-admin-table td:nth-child(8),
.barber-admin-table td:nth-child(9),
.barber-admin-table td:nth-child(10),
.barber-admin-table td:nth-child(11){text-align:center!important}
@media(max-width:900px){
  .sort-th{min-height:32px;padding:7px 9px;font-size:11px}
  .barber-admin-table{min-width:1020px}
  .actions-compact{min-width:124px}
}

/* Ajuste final: tabla de barberos compacta, centrada y sin scroll lateral innecesario */
.barber-table-wrap{
  overflow-x:hidden!important;
  width:100%!important;
  max-width:100%!important;
}
.barber-admin-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  font-size:13px!important;
  border-collapse:collapse!important;
}
.barber-admin-table th,
.barber-admin-table td{
  padding:14px 10px!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  vertical-align:middle!important;
  line-height:1.35!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.barber-admin-table tr:last-child td{border-bottom:0!important}
.barber-admin-table th{font-size:11px!important;letter-spacing:.55px!important}
.barber-admin-table th:nth-child(1),.barber-admin-table td:nth-child(1){width:17%!important}
.barber-admin-table th:nth-child(2),.barber-admin-table td:nth-child(2){width:7%!important;text-align:center!important}
.barber-admin-table th:nth-child(3),.barber-admin-table td:nth-child(3){width:8%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(4),.barber-admin-table td:nth-child(4){width:11%!important}
.barber-admin-table th:nth-child(5),.barber-admin-table td:nth-child(5){width:13%!important}
.barber-admin-table th:nth-child(6),.barber-admin-table td:nth-child(6){width:7%!important;text-align:center!important}
.barber-admin-table th:nth-child(7),.barber-admin-table td:nth-child(7){width:8%!important;text-align:center!important}
.barber-admin-table th:nth-child(8),.barber-admin-table td:nth-child(8){width:7%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(9),.barber-admin-table td:nth-child(9){width:6%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(10),.barber-admin-table td:nth-child(10){width:7%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(11),.barber-admin-table td:nth-child(11){width:9%!important;text-align:center!important}
.barber-admin-table .person-cell{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
.barber-admin-table .person-cell b,
.barber-admin-table .person-cell small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barber-admin-table .avatar-mini{width:46px!important;height:46px!important;border-radius:15px!important;font-size:16px!important}
.barber-admin-table .badge{padding:8px 10px!important;font-size:11px!important;max-width:100%;white-space:normal!important}
.sort-th{padding:7px 8px!important;min-height:30px!important;border-radius:11px!important;font-size:11px!important;line-height:1.1!important;max-width:100%}
.status-pill{min-width:68px!important;max-width:76px!important;height:30px!important;padding:0 10px!important;font-size:11px!important;margin:auto!important}
.actions-compact{
  min-width:0!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}
.actions-compact .btn.small{
  min-width:55px!important;
  padding:8px 9px!important;
  font-size:11px!important;
  border-radius:12px!important;
}
@media(max-width:1100px){
  .barber-table-wrap{overflow-x:auto!important}
  .barber-admin-table{min-width:980px!important}
}

/* Ajuste de legibilidad: tabla de barberos organizada sin scroll lateral */
.barber-table-wrap{
  overflow-x:hidden!important;
}
.barber-admin-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
.barber-admin-table th,
.barber-admin-table td{
  vertical-align:middle!important;
}
.barber-admin-table th{
  text-align:center!important;
}
.barber-admin-table th:nth-child(1),.barber-admin-table td:nth-child(1){width:18%!important;text-align:left!important}
.barber-admin-table th:nth-child(2),.barber-admin-table td:nth-child(2){width:7%!important;text-align:center!important}
.barber-admin-table th:nth-child(3),.barber-admin-table td:nth-child(3){width:7%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(4),.barber-admin-table td:nth-child(4){width:11%!important;text-align:left!important}
.barber-admin-table th:nth-child(5),.barber-admin-table td:nth-child(5){width:15%!important;text-align:left!important}
.barber-admin-table th:nth-child(6),.barber-admin-table td:nth-child(6){width:7%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(7),.barber-admin-table td:nth-child(7){width:8%!important;text-align:center!important}
.barber-admin-table th:nth-child(8),.barber-admin-table td:nth-child(8){width:7%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(9),.barber-admin-table td:nth-child(9){width:6%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(10),.barber-admin-table td:nth-child(10){width:7%!important;text-align:center!important;white-space:nowrap!important}
.barber-admin-table th:nth-child(11),.barber-admin-table td:nth-child(11){width:7%!important;text-align:center!important}
.barber-admin-table .sort-th{
  margin-inline:auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  white-space:normal!important;
  line-height:1.05!important;
}
.barber-admin-table .center-col{
  text-align:center!important;
}
.gain-cell{
  display:table-cell!important;
  line-height:1.35!important;
}
.gain-cell .gain-title{
  display:block!important;
  font-weight:850!important;
  color:#f7f1e7!important;
  margin-bottom:6px!important;
}
.gain-cell .gain-details{
  display:grid!important;
  gap:3px!important;
  color:var(--muted)!important;
  font-size:11px!important;
}
.gain-cell .gain-details span{
  display:block!important;
}
.actions-compact{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
.actions-compact .btn.small{
  width:64px!important;
  min-width:64px!important;
  padding:8px 0!important;
  text-align:center!important;
}
.status-pill{
  margin-inline:auto!important;
}
@media(max-width:1000px){
  .barber-table-wrap{overflow-x:auto!important}
  .barber-admin-table{min-width:980px!important}
}

/* Notificaciones: orden por último movimiento y fecha tipo historial de pagos */
.notificaciones-table td,
.notificaciones-table th{
  vertical-align:middle;
}
.notificaciones-table .noti-row.nueva td{
  background:linear-gradient(90deg, rgba(243,216,117,.055), rgba(255,255,255,0) 45%);
}
.notificaciones-table .noti-row:hover td{
  background:rgba(243,216,117,.035);
}
.notification-date-chip{
  min-width:118px;
  text-align:left;
}
.badge-new{
  background:rgba(243,216,117,.18);
  border-color:rgba(243,216,117,.36);
  color:var(--gold2);
}

/* === Blackout Barber: ajuste definitivo tabla barberos, líneas completas y responsive === */
.barber-table-wrap{
  overflow-x:hidden!important;
  border-radius:24px!important;
}
.barber-admin-table{
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
  border-collapse:collapse!important;
}
.barber-admin-table th,
.barber-admin-table td{
  border-bottom:1px solid rgba(255,255,255,.085)!important;
  vertical-align:middle!important;
  box-sizing:border-box!important;
}
.barber-admin-table tr:last-child td{border-bottom:0!important;}
.barber-admin-table th{height:54px!important;text-align:center!important;}
.barber-admin-table th:nth-child(1),.barber-admin-table td:nth-child(1){width:18%!important;text-align:left!important;}
.barber-admin-table th:nth-child(2),.barber-admin-table td:nth-child(2){width:7%!important;text-align:center!important;}
.barber-admin-table th:nth-child(3),.barber-admin-table td:nth-child(3){width:7%!important;text-align:center!important;}
.barber-admin-table th:nth-child(4),.barber-admin-table td:nth-child(4){width:11%!important;text-align:left!important;}
.barber-admin-table th:nth-child(5),.barber-admin-table td:nth-child(5){width:15%!important;text-align:left!important;}
.barber-admin-table th:nth-child(6),.barber-admin-table td:nth-child(6){width:7%!important;text-align:center!important;}
.barber-admin-table th:nth-child(7),.barber-admin-table td:nth-child(7){width:8%!important;text-align:center!important;}
.barber-admin-table th:nth-child(8),.barber-admin-table td:nth-child(8){width:7%!important;text-align:center!important;}
.barber-admin-table th:nth-child(9),.barber-admin-table td:nth-child(9){width:6%!important;text-align:center!important;}
.barber-admin-table th:nth-child(10),.barber-admin-table td:nth-child(10){width:7%!important;text-align:center!important;}
.barber-admin-table th:nth-child(11),.barber-admin-table td:nth-child(11){width:7%!important;text-align:center!important;}
.barber-admin-table .sort-th{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0 auto!important;
  text-align:center!important;
  width:max-content!important;
  max-width:100%!important;
}
.barber-admin-table .center-col{text-align:center!important;}
.barber-admin-table .gain-cell{
  display:table-cell!important;
  text-align:left!important;
}
.barber-admin-table .gain-title,
.barber-admin-table .gain-details,
.barber-admin-table .gain-details span{
  display:block!important;
}
.action-cell{
  display:table-cell!important;
  text-align:center!important;
  vertical-align:middle!important;
}
.actions-stack{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  width:100%!important;
}
.actions-stack .btn.small{
  width:62px!important;
  min-width:62px!important;
  padding:8px 0!important;
  text-align:center!important;
  border-radius:12px!important;
  margin:0!important;
}
.status-pill{
  margin-inline:auto!important;
}
.barber-admin-table td:nth-child(7),
.barber-admin-table td:nth-child(8),
.barber-admin-table td:nth-child(9),
.barber-admin-table td:nth-child(10),
.barber-admin-table td:nth-child(11){
  text-align:center!important;
}

@media (min-width:901px) and (max-width:1280px){
  .barber-admin-table{font-size:12.5px!important;}
  .barber-admin-table th,.barber-admin-table td{padding:12px 7px!important;}
  .barber-admin-table .person-cell{grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important;}
  .barber-admin-table .avatar-mini{width:42px!important;height:42px!important;}
  .barber-admin-table th:nth-child(1),.barber-admin-table td:nth-child(1){width:18%!important;}
  .barber-admin-table th:nth-child(5),.barber-admin-table td:nth-child(5){width:14%!important;}
  .barber-admin-table th:nth-child(11),.barber-admin-table td:nth-child(11){width:8%!important;}
  .actions-stack .btn.small{width:58px!important;min-width:58px!important;font-size:10.5px!important;}
}

@media(max-width:900px){
  .barber-table-wrap{overflow-x:hidden!important;background:transparent!important;border:0!important;box-shadow:none!important;}
  .barber-admin-table,
  .barber-admin-table tbody,
  .barber-admin-table tr,
  .barber-admin-table td{
    display:block!important;
    width:100%!important;
    min-width:0!important;
  }
  .barber-admin-table tr:first-child{display:none!important;}
  .barber-admin-table tr{
    margin:0 0 14px!important;
    padding:14px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:22px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))!important;
    box-shadow:0 16px 34px rgba(0,0,0,.20)!important;
  }
  .barber-admin-table td{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    padding:10px 4px!important;
    border-bottom:1px solid rgba(255,255,255,.075)!important;
    text-align:left!important;
  }
  .barber-admin-table td:last-child{border-bottom:0!important;}
  .barber-admin-table td::before{
    content:attr(data-label);
    color:var(--gold2);
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.5px;
  }
  .barber-admin-table td[data-label="Nombre"]{
    grid-template-columns:1fr!important;
  }
  .barber-admin-table td[data-label="Nombre"]::before{display:none!important;}
  .barber-admin-table .person-cell{grid-template-columns:50px minmax(0,1fr)!important;}
  .barber-admin-table .center-col{text-align:left!important;}
  .status-pill{margin:0!important;width:82px!important;}
  .action-cell{display:grid!important;}
  .actions-stack{flex-direction:row!important;justify-content:flex-start!important;}
  .actions-stack .btn.small{width:76px!important;min-width:76px!important;}
}


/* =========================================================
   FIX DEFINITIVO MOBILE - INDEX HERO BLACKOUT BARBER
   Este bloque solo afecta el hero del index en pantallas pequeñas.
   No toca dashboard, tablas, citas, barberos, pagos ni formularios.
   ========================================================= */

@media (max-width: 760px) {
    .client-hero {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
        padding: 34px 14px 26px !important;
        overflow: hidden !important;
    }

    .client-hero__copy {
        text-align: center !important;
    }

    .client-hero__copy h1 {
        font-size: clamp(36px, 11vw, 52px) !important;
        line-height: .96 !important;
        letter-spacing: -1.6px !important;
        margin-bottom: 18px !important;
    }

    .client-hero__lead {
        max-width: 100% !important;
        font-size: 15.5px !important;
        line-height: 1.62 !important;
        margin-bottom: 22px !important;
    }

    .client-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .client-actions .btn {
        width: 100% !important;
    }

    .client-trust-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .client-trust-row span {
        width: 100% !important;
        text-align: center !important;
    }

    .client-hero__showcase {
        width: 100% !important;
        max-width: 390px !important;
        min-height: 560px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        position: relative !important;
        overflow: visible !important;
    }

    .phone-preview {
        width: min(310px, 82vw) !important;
        max-width: 310px !important;
        margin: 0 auto !important;
        padding: 14px !important;
        border-radius: 34px !important;
        transform: scale(.84) !important;
        transform-origin: top center !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .phone-preview::before {
        left: 24px !important;
        right: 24px !important;
        top: 9px !important;
        height: 5px !important;
    }

    .phone-top {
        margin: 18px 4px 15px !important;
        font-size: 14px !important;
    }

    .phone-card {
        padding: 14px !important;
        border-radius: 21px !important;
        margin-bottom: 11px !important;
    }

    .phone-card small {
        font-size: 10.5px !important;
        margin-bottom: 5px !important;
        letter-spacing: .7px !important;
    }

    .phone-card strong {
        font-size: 18px !important;
        line-height: 1.18 !important;
        margin-bottom: 6px !important;
    }

    .phone-card p {
        font-size: 12.8px !important;
        line-height: 1.45 !important;
    }

    .mini-slots {
        gap: 6px !important;
        margin-top: 9px !important;
    }

    .mini-slots span {
        padding: 7px 9px !important;
        font-size: 10.5px !important;
    }

    .phone-cta {
        padding: 13px !important;
        border-radius: 16px !important;
        font-size: 14px !important;
    }

    .hero-floating,
    .hero-floating.one,
    .hero-floating.two {
        position: absolute !important;
        width: auto !important;
        margin: 0 !important;
        display: grid !important;
        gap: 1px !important;
        padding: 11px 13px !important;
        border-radius: 18px !important;
        background: rgba(18, 18, 20, .88) !important;
        border: 1px solid rgba(243, 216, 117, .30) !important;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .42) !important;
        backdrop-filter: blur(14px) !important;
        transform: none !important;
        z-index: 6 !important;
    }

    .hero-floating.one {
        min-width: 124px !important;
        max-width: 138px !important;
        left: 0 !important;
        top: 70px !important;
        right: auto !important;
        bottom: auto !important;
    }

    .hero-floating.two {
        min-width: 150px !important;
        max-width: 170px !important;
        right: 0 !important;
        bottom: 110px !important;
        left: auto !important;
        top: auto !important;
    }

    .hero-floating b {
        font-size: 21px !important;
        line-height: 1.05 !important;
        color: var(--gold2) !important;
        white-space: nowrap !important;
    }

    .hero-floating span {
        font-size: 9px !important;
        line-height: 1.18 !important;
        letter-spacing: .45px !important;
        color: var(--muted) !important;
    }

    .client-strip {
        grid-template-columns: 1fr !important;
        width: calc(100% - 28px) !important;
    }

    .service-showcase,
    .steps-grid,
    .barber-showcase {
        grid-template-columns: 1fr !important;
    }

    .service-tile {
        min-height: auto !important;
    }

    .barber-photo-wrap {
        height: 220px !important;
    }

    .final-cta {
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 24px !important;
    }

    .final-cta-actions .btn {
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    .client-hero__showcase {
        max-width: 360px !important;
        min-height: 530px !important;
    }

    .phone-preview {
        width: min(292px, 80vw) !important;
        max-width: 292px !important;
        padding: 13px !important;
        transform: scale(.82) !important;
    }

    .hero-floating.one {
        left: 0 !important;
        top: 66px !important;
        min-width: 116px !important;
        max-width: 128px !important;
    }

    .hero-floating.two {
        right: 0 !important;
        bottom: 104px !important;
        min-width: 142px !important;
        max-width: 158px !important;
    }

    .hero-floating {
        padding: 10px 11px !important;
        border-radius: 17px !important;
    }

    .hero-floating b {
        font-size: 19px !important;
    }

    .hero-floating span {
        font-size: 8.4px !important;
    }
}

@media (max-width: 360px) {
    .client-hero__showcase {
        min-height: 500px !important;
    }

    .phone-preview {
        width: 278px !important;
        transform: scale(.80) !important;
    }

    .hero-floating.one {
        top: 62px !important;
    }

    .hero-floating.two {
        bottom: 96px !important;
    }
}

/* =========================================================
   AJUSTE INDEX MOBILE + BARBEROS DESPLAZABLES
   Pegar al final de assets/css/style.css
   No afecta admin, citas, pagos ni base de datos.
   ========================================================= */

/* 1) Ajuste fino del mockup en vista tipo celular */
@media (max-width: 760px) {
    .client-hero__showcase {
        padding-top: 18px !important;
        padding-bottom: 34px !important;
    }

    .hero-floating.one {
        top: -6px !important;
        left: -6px !important;
    }

    .hero-floating.two {
        right: -4px !important;
        bottom: 6px !important;
    }
}

@media (max-width: 430px) {
    .hero-floating.one {
        top: -10px !important;
        left: -4px !important;
    }

    .hero-floating.two {
        right: -4px !important;
        bottom: 2px !important;
    }
}


/* 2) Barberos del index como carrusel horizontal */
.barber-showcase {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 216, 117, .55) rgba(255, 255, 255, .06);
}

.barber-showcase::-webkit-scrollbar {
    height: 8px;
}

.barber-showcase::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
    border-radius: 999px;
}

.barber-showcase::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--gold2), #a77a12);
    border-radius: 999px;
}

/* En escritorio se mantiene en columnas, pero con scroll si hubiera muchos */
@media (min-width: 761px) {
    .barber-showcase {
        grid-auto-flow: column;
        grid-auto-columns: minmax(300px, 1fr);
        grid-template-columns: repeat(3, minmax(300px, 1fr));
    }

    .barber-profile-card {
        scroll-snap-align: start;
    }
}

/* En celular se vuelve carrusel real */
@media (max-width: 760px) {
    .barber-showcase {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(245px, 82vw) !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        margin-left: -2px;
        margin-right: -2px;
        padding: 2px 2px 14px;
    }

    .barber-profile-card {
        scroll-snap-align: start;
        border-radius: 26px;
    }

    .barber-photo-wrap {
        height: 170px !important;
    }

    .barber-photo {
        width: 104px !important;
        height: 104px !important;
        border-radius: 32px !important;
        font-size: 38px !important;
    }

    .rating-chip {
        right: 14px !important;
        bottom: 14px !important;
        padding: 7px 10px !important;
        font-size: 12px !important;
    }

    .barber-info {
        padding: 16px !important;
    }

    .barber-info h3 {
        font-size: 20px !important;
        margin-bottom: 6px !important;
    }

    .specialty {
        margin-bottom: 0 !important;
        color: var(--gold2) !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* Oculta información extra para que la tarjeta sea más limpia */
    .barber-desc,
    .barber-tags {
        display: none !important;
    }
}

/* En pantallas muy pequeñas, tarjetas un poco más compactas */
@media (max-width: 390px) {
    .barber-showcase {
        grid-auto-columns: minmax(230px, 84vw) !important;
    }

    .barber-photo-wrap {
        height: 155px !important;
    }

    .barber-info h3 {
        font-size: 19px !important;
    }
}

/* =========================================================
   AJUSTE FINO INDEX MOBILE - PRECIO MÁS ARRIBA
   Pegar al final de assets/css/style.css
   ========================================================= */

@media (max-width: 760px) {
    .client-hero__showcase {
        padding-bottom: 92px !important;
    }

    .hero-floating.one {
        top: -10px !important;
        left: -6px !important;
    }

    .hero-floating.two {
        right: -4px !important;
        bottom: 230px !important;
    }
}

@media (max-width: 430px) {
    .client-hero__showcase {
        padding-bottom: 86px !important;
    }

    .hero-floating.one {
        top: -12px !important;
        left: -4px !important;
    }

    .hero-floating.two {
        right: -4px !important;
        bottom: 30px !important;
    }
}

@media (max-width: 390px) {
    .client-hero__showcase {
        padding-bottom: 78px !important;
    }

    .hero-floating.two {
        bottom: 26px !important;
    }
}

/* =========================================================
   INDEX MOBILE - BENEFICIOS EN 3 CUADRITOS
   Pegar al final de assets/css/style.css
   Convierte:
   "Reserva en minutos", "Barberos con perfil" y
   "Horarios disponibles" en 3 cuadros en una sola línea.
   ========================================================= */

@media (max-width: 760px) {
    .client-trust-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 14px !important;
    }

    .client-trust-row span {
        width: 100% !important;
        min-height: 74px !important;
        padding: 12px 8px !important;
        border-radius: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1.18 !important;
        font-size: 12px !important;
        font-weight: 950 !important;
        letter-spacing: -.2px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
        border: 1px solid rgba(243,216,117,.20) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    }
}

@media (max-width: 390px) {
    .client-trust-row {
        gap: 7px !important;
    }

    .client-trust-row span {
        min-height: 68px !important;
        padding: 10px 6px !important;
        border-radius: 16px !important;
        font-size: 10.8px !important;
        line-height: 1.15 !important;
    }
}

/* =========================================================
   INDEX MOBILE - ESTADÍSTICAS EN 3 CUADRITOS
   Pegar al final de assets/css/style.css
   Convierte:
   Servicios activos, Barberos disponibles y Citas registradas
   en 3 cuadros en una sola línea en vista de celular.
   ========================================================= */

@media (max-width: 760px) {
    .client-strip {
        width: calc(100% - 28px) !important;
        margin: 18px auto 26px !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .client-strip div {
        min-height: 82px !important;
        padding: 12px 8px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        text-align: center !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)) !important;
        border: 1px solid rgba(243,216,117,.22) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
    }

    .client-strip strong {
        font-size: 28px !important;
        line-height: 1 !important;
        color: var(--gold2) !important;
    }

    .client-strip span {
        font-size: 10.5px !important;
        line-height: 1.15 !important;
        font-weight: 950 !important;
        letter-spacing: -.15px !important;
        color: var(--muted) !important;
    }
}

@media (max-width: 390px) {
    .client-strip {
        width: calc(100% - 24px) !important;
        gap: 7px !important;
    }

    .client-strip div {
        min-height: 76px !important;
        padding: 10px 6px !important;
        border-radius: 16px !important;
    }

    .client-strip strong {
        font-size: 25px !important;
    }

    .client-strip span {
        font-size: 9.5px !important;
        line-height: 1.12 !important;
    }
}

/* =========================================================
   FIX - REGRESAR CUADRO DE PRECIO A SU LUGAR
   Y RECORTAR ESPACIO SIN MOVER "SERVICIOS DESDE"
   Pegar al final de assets/css/style.css
   ========================================================= */

@media (max-width: 760px) {
    /* Recorta espacio debajo del mockup sin bajar el cuadro de precio */
    .client-hero {
        padding-bottom: 0 !important;
    }

    .client-hero__showcase {
        margin-bottom: -34px !important;
        padding-bottom: 34px !important;
    }

    /* Regresa el cuadro $60 MXN a la zona del mockup */
    .hero-floating.two {
        right: -4px !important;
        bottom: 210px !important;
        top: auto !important;
        left: auto !important;
    }

    /* Sube las estadísticas sin tocar el precio */
    .client-strip {
        margin-top: -20px !important;
        margin-bottom: 24px !important;
    }
}

@media (max-width: 430px) {
    .client-hero__showcase {
        margin-bottom: -30px !important;
        padding-bottom: 32px !important;
    }

    .hero-floating.two {
        right: -4px !important;
        bottom: 104px !important;
    }

    .client-strip {
        margin-top: -18px !important;
    }
}

@media (max-width: 390px) {
    .hero-floating.two {
        bottom: 96px !important;
    }

    .client-strip {
        margin-top: -14px !important;
    }
}

/* =========================================================
   INDEX - SERVICIOS COMO CARRUSEL TIPO BARBEROS
   Pegar al final de assets/css/style.css
   Hace que se muestren todos los servicios de forma desplazable.
   ========================================================= */

#servicios .service-showcase {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 2px 14px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(243,216,117,.55) rgba(255,255,255,.06) !important;
}

#servicios .service-showcase::-webkit-scrollbar {
    height: 8px;
}

#servicios .service-showcase::-webkit-scrollbar-track {
    background: rgba(255,255,255,.06);
    border-radius: 999px;
}

#servicios .service-showcase::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--gold2), #a77a12);
    border-radius: 999px;
}

/* Escritorio: tarjetas en línea desplazable si hay muchos servicios */
@media (min-width: 761px) {
    #servicios .service-showcase {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(300px, 1fr) !important;
        grid-template-columns: repeat(4, minmax(300px, 1fr)) !important;
        gap: 18px !important;
    }

    #servicios .service-tile {
        scroll-snap-align: start !important;
    }
}

/* Celular: carrusel compacto igual al de barberos */
@media (max-width: 760px) {
    #servicios .section-head {
        gap: 14px !important;
    }

    #servicios .section-head .btn {
        width: 100% !important;
    }

    #servicios .service-showcase {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(245px, 82vw) !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
    }

    #servicios .service-tile {
        min-height: 245px !important;
        scroll-snap-align: start !important;
        border-radius: 26px !important;
        padding: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    #servicios .service-icon {
        width: 58px !important;
        height: 58px !important;
        border-radius: 20px !important;
        font-size: 24px !important;
    }

    #servicios .service-tile h3 {
        font-size: 22px !important;
        line-height: 1.12 !important;
        margin-bottom: 10px !important;
    }

    #servicios .service-tile p {
        min-height: auto !important;
        max-height: 48px !important;
        overflow: hidden !important;
        color: var(--muted) !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    #servicios .service-meta {
        margin-top: 18px !important;
        gap: 10px !important;
    }

    #servicios .service-meta span {
        padding: 8px 11px !important;
        font-size: 12px !important;
    }

    #servicios .service-meta b {
        font-size: 20px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {
    #servicios .service-showcase {
        grid-auto-columns: minmax(230px, 84vw) !important;
    }

    #servicios .service-tile {
        min-height: 230px !important;
        padding: 16px !important;
    }

    #servicios .service-tile h3 {
        font-size: 20px !important;
    }

    #servicios .service-meta b {
        font-size: 18px !important;
    }
}

/* =========================================================
   INDEX MOBILE - PASOS CON INFO AL LADO DEL NÚMERO
   Pegar al final de assets/css/style.css
   Solo afecta las tarjetas de "Así funciona tu reserva".
   ========================================================= */

@media (max-width: 760px) {
    .steps-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .step-card {
        display: grid !important;
        grid-template-columns: 58px 1fr !important;
        grid-template-areas:
            "num title"
            "num text" !important;
        column-gap: 16px !important;
        row-gap: 4px !important;
        align-items: center !important;
        padding: 18px !important;
        min-height: 118px !important;
        border-radius: 24px !important;
    }

    .step-card span {
        grid-area: num !important;
        width: 54px !important;
        height: 54px !important;
        margin: 0 !important;
        border-radius: 18px !important;
        align-self: center !important;
        justify-self: center !important;
    }

    .step-card h3 {
        grid-area: title !important;
        margin: 0 !important;
        font-size: 21px !important;
        line-height: 1.15 !important;
    }

    .step-card p {
        grid-area: text !important;
        margin: 0 !important;
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 390px) {
    .step-card {
        grid-template-columns: 50px 1fr !important;
        column-gap: 13px !important;
        padding: 16px !important;
        min-height: 108px !important;
    }

    .step-card span {
        width: 48px !important;
        height: 48px !important;
        border-radius: 16px !important;
        font-size: 13px !important;
    }

    .step-card h3 {
        font-size: 19px !important;
    }

    .step-card p {
        font-size: 13px !important;
    }
}

/* =========================================================
   INDEX - TARJETAS DE BARBEROS MÁS LIMPIAS
   Pegar al final de assets/css/style.css
   Quita: años de experiencia, citas atendidas y reseñas.
   Deja: imagen, nombre, especialidad e información.
   ========================================================= */

#barberos .barber-tags {
    display: none !important;
}

#barberos .barber-desc {
    display: block !important;
    margin-top: 10px !important;
    min-height: auto !important;
}

/* Ajuste visual para que no quede espacio vacío donde estaban los badges */
#barberos .barber-info {
    padding-bottom: 20px !important;
}

@media (max-width: 760px) {
    #barberos .barber-desc {
        display: block !important;
        max-height: 58px !important;
        overflow: hidden !important;
        font-size: 13.5px !important;
        line-height: 1.45 !important;
    }

    #barberos .barber-info {
        padding-bottom: 16px !important;
    }
}

/* =========================================================
   HEADER - BADGE DE NOTIFICACIONES ADMIN
   Pegar al final de public_html/barberia/assets/css/style.css
   ========================================================= */

.nav a.admin-notification-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 34px !important;
}

.admin-notification-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gold2), #b88616);
    color: #080808;
    border: 1px solid rgba(243, 216, 117, .75);
    box-shadow: 0 10px 26px rgba(212, 175, 55, .22);
    font-size: 11px;
    font-weight: 1000;
    line-height: 1;
    letter-spacing: -.2px;
}

.admin-notification-badge.is-zero {
    background: rgba(255, 255, 255, .08);
    color: var(--muted);
    border-color: rgba(255, 255, 255, .16);
    box-shadow: none;
}

.nav a.admin-notification-link.is-active .admin-notification-badge {
    background: #080808;
    color: var(--gold2);
    border-color: rgba(8, 8, 8, .35);
}

@media (max-width: 900px) {
    .nav a.admin-notification-link {
        justify-content: center !important;
        padding-right: 14px !important;
    }

    .admin-notification-badge {
        position: static;
        margin-left: 6px;
        transform: none;
    }
}

/* =========================================================
   CLIENTE - SELECCIÓN DE MÚLTIPLES SERVICIOS EN AGENDAR
   Pegar al final de assets/css/style.css
   ========================================================= */

.service-multi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 14px 0 16px;
}

.service-check-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: rgba(10, 10, 12, .62);
    cursor: pointer;
    transition: .18s ease;
}

.service-check-card:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 175, 55, .38);
}

.service-check-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.service-check-card:has(input:checked) {
    border-color: rgba(212, 175, 55, .85);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
    background: rgba(212, 175, 55, .08);
}

.service-check-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(212, 175, 55, .14);
    border: 1px solid rgba(212, 175, 55, .30);
    color: var(--gold2);
    font-size: 20px;
}

.service-check-card:has(input:checked) .service-check-icon {
    background: linear-gradient(135deg, var(--gold2), #a77a12);
    color: #090909;
}

.service-check-info {
    display: grid;
    gap: 4px;
}

.service-check-info b {
    color: #fff8ec;
    font-size: 15px;
    line-height: 1.2;
}

.service-check-info small {
    color: var(--muted);
    font-weight: 800;
}

.service-total-box {
    margin-top: 12px;
    border-color: rgba(212, 175, 55, .28);
    background: rgba(212, 175, 55, .08);
}

.service-total-box p {
    margin-top: 6px;
}

.slot-info-final b {
    color: var(--gold2);
}

@media (max-width: 700px) {
    .service-check-card {
        grid-template-columns: 44px 1fr;
        padding: 12px;
        border-radius: 16px;
    }

    .service-check-icon {
        width: 44px;
        height: 44px;
        border-radius: 15px;
    }

    .service-check-info b {
        font-size: 14px;
    }

    .service-check-info small {
        font-size: 12px;
    }
}

/* =========================================================
   AGENDAR CLIENTE - SELECCIÓN DE VARIOS SERVICIOS
   Pegar al final de assets/css/style.css
   ========================================================= */

.multi-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 12px;
}

.service-check-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: rgba(10, 10, 12, .62);
    cursor: pointer;
    transition: .18s ease;
}

.service-check-card:hover {
    transform: translateY(-1px);
    border-color: rgba(212, 175, 55, .42);
}

.service-check-card input {
    width: 20px;
    height: 20px;
    accent-color: var(--gold2);
}

.service-check-card:has(input:checked) {
    border-color: rgba(212, 175, 55, .85);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, .12);
    background: rgba(212, 175, 55, .08);
}

.service-check-main {
    display: grid;
    gap: 4px;
}

.service-check-main b {
    color: #fff8ec;
    font-size: 15px;
}

.service-check-main small {
    color: var(--muted);
    line-height: 1.35;
    font-size: 12px;
}

.service-check-meta {
    display: grid;
    justify-items: end;
    gap: 4px;
    min-width: 120px;
}

.service-check-meta strong {
    color: var(--gold2);
    white-space: nowrap;
}

.service-check-meta em {
    font-style: normal;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.multi-service-summary {
    margin-top: 14px;
}

.multi-service-summary p {
    margin-top: 6px;
}

@media (max-width: 700px) {
    .service-check-card {
        grid-template-columns: auto 1fr;
    }

    .service-check-meta {
        grid-column: 2;
        justify-items: start;
        min-width: 0;
    }
}

/* =========================================================
   AGENDAR - SERVICIOS EN BARRAS DESPLEGABLES
   Pegar al final de assets/css/style.css
   Convierte el paso 2 en selects separados:
   Elige servicio / Elige otro servicio / etc.
   ========================================================= */

.service-slots-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.service-slot-row {
    display: grid;
    gap: 8px;
}

.service-slot-row label {
    margin: 0;
    color: var(--gold2);
    font-size: 13px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .55px;
}

.service-slot-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.service-slot-control select {
    min-height: 56px;
    border-radius: 18px;
    border: 1px solid rgba(243, 216, 117, .38);
    background: rgba(5, 5, 6, .82);
    color: #fff;
    font-weight: 850;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .06);
}

.service-slot-control select:focus {
    border-color: rgba(243, 216, 117, .80);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, .14);
}

.add-service-btn {
    width: 100%;
    margin-top: 14px !important;
    border-radius: 18px !important;
}

.remove-service-btn {
    margin: 0 !important;
    min-height: 48px !important;
    white-space: nowrap;
}

.multi-service-summary {
    margin-top: 16px !important;
}

.multi-service-summary p {
    line-height: 1.5;
}

@media (max-width: 760px) {
    .service-slot-control {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-slot-control select {
        min-height: 54px;
        font-size: 15px;
        border-radius: 17px;
    }

    .remove-service-btn {
        width: 100%;
    }
}

/* =========================================================
   FIX ADMIN MOBILE - TABLAS CON SCROLL HORIZONTAL
   Pegar al final de assets/css/style.css

   Corrige cuando una tabla del panel admin se aplasta en celular
   y las palabras quedan letra por letra en vertical.
   ========================================================= */

@media (max-width: 760px) {
    /* Las tarjetas del admin que contienen tablas pueden desplazarse horizontalmente */
    .dashboard .card,
    .section .card,
    .admin-panel .card,
    main .card {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Si el navegador soporta :has, solo aplica el scroll fuerte a tarjetas con tablas */
    .card:has(table),
    .table-responsive,
    .table-wrap,
    .table-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Evita que la tabla se comprima hasta romper las palabras */
    table,
    .table,
    .data-table,
    .admin-table {
        width: max-content !important;
        min-width: 920px !important;
        table-layout: auto !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    table th,
    table td,
    .table th,
    .table td,
    .data-table th,
    .data-table td,
    .admin-table th,
    .admin-table td {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        vertical-align: middle !important;
        min-width: max-content !important;
        max-width: none !important;
    }

    /* Columnas que sí pueden ser largas, como descripción o especialidad */
    table td:nth-child(4),
    table td:nth-child(5),
    .table td:nth-child(4),
    .table td:nth-child(5),
    .data-table td:nth-child(4),
    .data-table td:nth-child(5),
    .admin-table td:nth-child(4),
    .admin-table td:nth-child(5) {
        white-space: normal !important;
        min-width: 190px !important;
        max-width: 260px !important;
        line-height: 1.45 !important;
    }

    /* Botones dentro de tablas */
    table .btn,
    .table .btn,
    .data-table .btn,
    .admin-table .btn {
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 3px !important;
    }
}

@media (max-width: 430px) {
    table,
    .table,
    .data-table,
    .admin-table {
        min-width: 860px !important;
    }

    table th,
    table td,
    .table th,
    .table td,
    .data-table th,
    .data-table td,
    .admin-table th,
    .admin-table td {
        font-size: 13px !important;
        padding: 12px 10px !important;
    }
}

/* =========================================================
   FIX REAL ADMIN BARBEROS MOBILE - RESTAURAR SCROLL HORIZONTAL
   Pegar HASTA EL FINAL de assets/css/style.css

   Motivo:
   Tu CSS tiene reglas posteriores que obligan:
   .barber-table-wrap { overflow-x:hidden }
   .barber-admin-table { min-width:0; table-layout:fixed }
   Eso aplasta la tabla en celular y parte las palabras letra por letra.
   Este bloque solo corrige la tabla de barberos del admin.
   ========================================================= */

@media (max-width: 1100px) {
    .barber-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(243,216,117,.55) rgba(255,255,255,.06) !important;
    }

    .barber-table-wrap::-webkit-scrollbar {
        height: 9px !important;
    }

    .barber-table-wrap::-webkit-scrollbar-track {
        background: rgba(255,255,255,.06) !important;
        border-radius: 999px !important;
    }

    .barber-table-wrap::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, var(--gold2), #a77a12) !important;
        border-radius: 999px !important;
    }

    .barber-table-wrap .barber-admin-table {
        width: max-content !important;
        min-width: 1120px !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    .barber-table-wrap .barber-admin-table th,
    .barber-table-wrap .barber-admin-table td {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: left !important;
        vertical-align: middle !important;
        line-height: 1.35 !important;
    }

    /* Forzar que las reglas nth-child viejas no sigan aplastando columnas */
    .barber-table-wrap .barber-admin-table th:nth-child(1),
    .barber-table-wrap .barber-admin-table td:nth-child(1) {
        width: 210px !important;
        min-width: 210px !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(2),
    .barber-table-wrap .barber-admin-table td:nth-child(2) {
        width: 130px !important;
        min-width: 130px !important;
        text-align: center !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(3),
    .barber-table-wrap .barber-admin-table td:nth-child(3) {
        width: 130px !important;
        min-width: 130px !important;
        text-align: center !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(4),
    .barber-table-wrap .barber-admin-table td:nth-child(4) {
        width: 190px !important;
        min-width: 190px !important;
        white-space: normal !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(5),
    .barber-table-wrap .barber-admin-table td:nth-child(5) {
        width: 210px !important;
        min-width: 210px !important;
        white-space: normal !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(6),
    .barber-table-wrap .barber-admin-table td:nth-child(6) {
        width: 130px !important;
        min-width: 130px !important;
        text-align: center !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(7),
    .barber-table-wrap .barber-admin-table td:nth-child(7),
    .barber-table-wrap .barber-admin-table th:nth-child(8),
    .barber-table-wrap .barber-admin-table td:nth-child(8),
    .barber-table-wrap .barber-admin-table th:nth-child(9),
    .barber-table-wrap .barber-admin-table td:nth-child(9),
    .barber-table-wrap .barber-admin-table th:nth-child(10),
    .barber-table-wrap .barber-admin-table td:nth-child(10),
    .barber-table-wrap .barber-admin-table th:nth-child(11),
    .barber-table-wrap .barber-admin-table td:nth-child(11) {
        width: 120px !important;
        min-width: 120px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .barber-table-wrap .barber-admin-table .person-cell {
        min-width: 190px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        white-space: nowrap !important;
    }

    .barber-table-wrap .barber-admin-table .sort-th {
        white-space: nowrap !important;
        line-height: 1.15 !important;
        text-align: center !important;
    }

    .barber-table-wrap .gain-cell {
        white-space: normal !important;
        min-width: 210px !important;
        width: 210px !important;
    }

    .barber-table-wrap .gain-cell .gain-title,
    .barber-table-wrap .gain-cell .gain-details,
    .barber-table-wrap .gain-cell .gain-details span {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .barber-table-wrap .actions-compact {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-width: 150px !important;
        width: 150px !important;
    }

    .barber-table-wrap .actions-compact .btn.small {
        width: auto !important;
        min-width: 64px !important;
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 430px) {
    .barber-table-wrap .barber-admin-table {
        min-width: 1080px !important;
        font-size: 13px !important;
    }

    .barber-table-wrap .barber-admin-table th,
    .barber-table-wrap .barber-admin-table td {
        padding: 12px 10px !important;
    }
}

/* =========================================================
   FIX FINAL ADMIN BARBEROS MOBILE - TABLA REAL HORIZONTAL
   Pegar HASTA EL FINAL de assets/css/style.css

   Corrige el bloque viejo que en móvil convertía la tabla en tarjetas:
   .barber-admin-table,
   .barber-admin-table tbody,
   .barber-admin-table tr,
   .barber-admin-table td { display:block }
   Por eso la información se veía vertical.
   ========================================================= */

@media (max-width: 900px) {
    .barber-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        background: rgba(12,12,14,.72) !important;
        border: 1px solid var(--line) !important;
        border-radius: 24px !important;
        box-shadow: 0 18px 50px rgba(0,0,0,.20) !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Regresa la tabla a comportamiento real de tabla */
    .barber-table-wrap .barber-admin-table {
        display: table !important;
        width: max-content !important;
        min-width: 1180px !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
    }

    .barber-table-wrap .barber-admin-table tbody {
        display: table-row-group !important;
        width: auto !important;
        min-width: 0 !important;
    }

    .barber-table-wrap .barber-admin-table tr {
        display: table-row !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .barber-table-wrap .barber-admin-table tr:first-child {
        display: table-row !important;
    }

    .barber-table-wrap .barber-admin-table th,
    .barber-table-wrap .barber-admin-table td {
        display: table-cell !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        padding: 14px 12px !important;
        border-bottom: 1px solid rgba(255,255,255,.075) !important;
        text-align: left !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        line-height: 1.35 !important;
    }

    /* Quita etiquetas tipo tarjeta en móvil */
    .barber-table-wrap .barber-admin-table td::before {
        content: none !important;
        display: none !important;
    }

    /* Encabezado visible y normal */
    .barber-table-wrap .barber-admin-table th {
        position: sticky !important;
        top: 0 !important;
        z-index: 3 !important;
        background: #101012 !important;
        color: var(--gold2) !important;
        font-size: 12px !important;
        text-transform: uppercase !important;
        letter-spacing: .7px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    /* Anchos razonables por columna */
    .barber-table-wrap .barber-admin-table th:nth-child(1),
    .barber-table-wrap .barber-admin-table td:nth-child(1) {
        min-width: 220px !important;
        width: 220px !important;
        text-align: left !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(2),
    .barber-table-wrap .barber-admin-table td:nth-child(2) {
        min-width: 120px !important;
        width: 120px !important;
        text-align: center !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(3),
    .barber-table-wrap .barber-admin-table td:nth-child(3) {
        min-width: 130px !important;
        width: 130px !important;
        text-align: center !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(4),
    .barber-table-wrap .barber-admin-table td:nth-child(4) {
        min-width: 190px !important;
        width: 190px !important;
        white-space: normal !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(5),
    .barber-table-wrap .barber-admin-table td:nth-child(5) {
        min-width: 230px !important;
        width: 230px !important;
        white-space: normal !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(6),
    .barber-table-wrap .barber-admin-table td:nth-child(6),
    .barber-table-wrap .barber-admin-table th:nth-child(7),
    .barber-table-wrap .barber-admin-table td:nth-child(7),
    .barber-table-wrap .barber-admin-table th:nth-child(8),
    .barber-table-wrap .barber-admin-table td:nth-child(8),
    .barber-table-wrap .barber-admin-table th:nth-child(9),
    .barber-table-wrap .barber-admin-table td:nth-child(9),
    .barber-table-wrap .barber-admin-table th:nth-child(10),
    .barber-table-wrap .barber-admin-table td:nth-child(10) {
        min-width: 120px !important;
        width: 120px !important;
        text-align: center !important;
    }

    .barber-table-wrap .barber-admin-table th:nth-child(11),
    .barber-table-wrap .barber-admin-table td:nth-child(11) {
        min-width: 170px !important;
        width: 170px !important;
        text-align: center !important;
    }

    /* Nombre con foto, normal en línea */
    .barber-table-wrap .barber-admin-table .person-cell {
        display: flex !important;
        grid-template-columns: none !important;
        align-items: center !important;
        gap: 12px !important;
        min-width: 200px !important;
        white-space: nowrap !important;
    }

    .barber-table-wrap .barber-admin-table .person-cell b,
    .barber-table-wrap .barber-admin-table .person-cell small {
        display: block !important;
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .barber-table-wrap .barber-admin-table .avatar-mini {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        border-radius: 16px !important;
        margin: 0 !important;
    }

    /* Ganancia con texto normal, no vertical */
    .barber-table-wrap .gain-cell,
    .barber-table-wrap .barber-admin-table .gain-cell {
        display: table-cell !important;
        white-space: normal !important;
        min-width: 230px !important;
        width: 230px !important;
        text-align: left !important;
    }

    .barber-table-wrap .gain-cell .gain-title,
    .barber-table-wrap .gain-cell .gain-details,
    .barber-table-wrap .gain-cell .gain-details span {
        display: block !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Acciones en horizontal */
    .barber-table-wrap .action-cell {
        display: table-cell !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    .barber-table-wrap .actions-stack,
    .barber-table-wrap .actions-compact {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 150px !important;
    }

    .barber-table-wrap .actions-stack .btn.small,
    .barber-table-wrap .actions-compact .btn.small {
        width: auto !important;
        min-width: 66px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .barber-table-wrap .status-pill {
        margin: 0 auto !important;
        min-width: 82px !important;
        width: max-content !important;
        white-space: nowrap !important;
    }
}

/* =========================================================
   ADMIN BARBEROS - OPCIÓN C EN CELULAR
   Vista escritorio: tabla normal.
   Vista teléfono: tarjeta compacta + "Ver detalles".
   Pegar al FINAL de assets/css/style.css
   ========================================================= */

.mobile-barber-list {
    display: none;
}

@media (max-width: 760px) {
    /* En móvil ocultamos la tabla de barberos para evitar confusión */
    .barber-table-wrap {
        display: none !important;
    }

    .mobile-barber-list {
        display: grid !important;
        gap: 16px;
        margin-top: 16px;
    }

    .mobile-barber-card {
        position: relative;
        padding: 16px;
        border-radius: 26px;
        border: 1px solid rgba(255,255,255,.10);
        background:
            radial-gradient(circle at top right, rgba(212,175,55,.11), transparent 38%),
            linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
        box-shadow: 0 18px 50px rgba(0,0,0,.25);
        overflow: hidden;
    }

    .mobile-barber-main {
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 14px;
        align-items: start;
    }

    .mobile-barber-avatar {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        border-radius: 22px !important;
        margin: 0 !important;
        font-size: 24px !important;
    }

    .mobile-card-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 4px;
    }

    .mobile-card-title-row h3 {
        margin: 0;
        font-size: 19px;
        line-height: 1.15;
        color: var(--text);
        max-width: 185px;
    }

    .mobile-barber-email {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.35;
        margin: 0 0 9px;
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        padding: 7px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 950;
        border: 1px solid rgba(255,255,255,.12);
        white-space: nowrap;
    }

    .mobile-status.is-active {
        color: #c9ffd5;
        background: rgba(82,210,115,.13);
        border-color: rgba(82,210,115,.40);
    }

    .mobile-status.is-inactive {
        color: #ffd1d1;
        background: rgba(255,107,107,.13);
        border-color: rgba(255,107,107,.38);
    }

    .mobile-barber-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-bottom: 10px;
    }

    .mobile-barber-chips span {
        display: inline-flex;
        align-items: center;
        padding: 6px 9px;
        border-radius: 999px;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.10);
        color: #f3eadb;
        font-size: 11px;
        font-weight: 900;
    }

    .mobile-specialty {
        margin: 0;
        color: #fff5dc;
        font-weight: 850;
        font-size: 14px;
        line-height: 1.42;
    }

    .mobile-details {
        margin-top: 14px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.09);
        background: rgba(0,0,0,.18);
        overflow: hidden;
    }

    .mobile-details summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        color: var(--gold2);
        font-weight: 950;
        letter-spacing: .2px;
    }

    .mobile-details summary::-webkit-details-marker {
        display: none;
    }

    .mobile-details summary b {
        display: inline-flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(212,175,55,.12);
        border: 1px solid rgba(212,175,55,.30);
        transition: transform .18s ease;
    }

    .mobile-details[open] summary b {
        transform: rotate(180deg);
    }

    .mobile-detail-grid {
        display: grid;
        gap: 10px;
        padding: 0 14px 14px;
    }

    .mobile-detail-grid div {
        padding: 12px;
        border-radius: 16px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.07);
    }

    .mobile-detail-grid small {
        display: block;
        color: var(--gold2);
        text-transform: uppercase;
        letter-spacing: .6px;
        font-size: 10px;
        font-weight: 950;
        margin-bottom: 5px;
    }

    .mobile-detail-grid strong {
        display: block;
        color: var(--text);
        font-size: 14px;
        line-height: 1.35;
    }

    .mobile-detail-grid span {
        display: block;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.45;
        margin-top: 3px;
    }

    .mobile-card-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 14px;
    }

    .mobile-card-actions .btn {
        width: 100%;
        margin: 0 !important;
    }

    .order-current {
        font-size: 16px;
        line-height: 1.35;
        padding: 14px 16px;
        border-radius: 20px;
    }
}

@media (max-width: 390px) {
    .mobile-barber-card {
        padding: 14px;
        border-radius: 22px;
    }

    .mobile-barber-main {
        grid-template-columns: 58px 1fr;
        gap: 12px;
    }

    .mobile-barber-avatar {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        border-radius: 18px !important;
        font-size: 21px !important;
    }

    .mobile-card-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .mobile-card-title-row h3 {
        max-width: 100%;
        font-size: 18px;
    }

    .mobile-status {
        min-width: 68px;
        padding: 6px 9px;
    }

    .mobile-card-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   ADMIN NOTIFICACIONES - OPCIÓN C EN CELULAR
   Escritorio: tabla normal.
   Teléfono: bandeja de cards compactas + Ver detalles.
   Pegar al FINAL de assets/css/style.css
   ========================================================= */

.notification-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}

.notification-filter-bar a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: #eee;
    font-weight: 900;
    font-size: 13px;
}

.notification-filter-bar a.active {
    background: linear-gradient(135deg, var(--gold2), #a77a12);
    color: #090909;
    border-color: rgba(243,216,117,.70);
}

.notification-filter-bar a span {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.22);
    color: inherit;
    font-size: 12px;
}

.notification-type-badge.is-payment {
    background: rgba(82,210,115,.14);
    border-color: rgba(82,210,115,.42);
    color: #c9ffd5;
}

.notification-type-badge.is-cancel {
    background: rgba(255,107,107,.13);
    border-color: rgba(255,107,107,.38);
    color: #ffd1d1;
}

.notification-type-badge.is-appointment {
    background: rgba(212,175,55,.16);
    border-color: rgba(212,175,55,.48);
    color: #ffe99a;
}

.notification-type-badge.is-barber {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: #f5ecdb;
}

.badge-new {
    background: rgba(212,175,55,.18) !important;
    border-color: rgba(212,175,55,.58) !important;
    color: var(--gold2) !important;
}

.noti-row.nueva {
    background: rgba(212,175,55,.045);
}

.empty-notifications {
    display: grid;
    gap: 6px;
    padding: 18px;
    color: var(--muted);
}

.empty-notifications b {
    color: var(--text);
}

.mobile-notifications-list {
    display: none;
}

@media (max-width: 760px) {
    .notificaciones-wrap {
        display: none !important;
    }

    .notification-filter-bar {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-bottom: 16px;
    }

    .notification-filter-bar a {
        justify-content: space-between;
        width: 100%;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .mobile-notifications-list {
        display: grid !important;
        gap: 14px;
    }

    .mobile-notification-card {
        position: relative;
        padding: 16px;
        border-radius: 24px;
        border: 1px solid rgba(255,255,255,.10);
        background:
            radial-gradient(circle at top right, rgba(212,175,55,.10), transparent 40%),
            linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
        box-shadow: 0 18px 50px rgba(0,0,0,.25);
        overflow: hidden;
    }

    .mobile-notification-card.is-new {
        border-color: rgba(212,175,55,.34);
    }

    .mobile-notification-card.is-new::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18px;
        bottom: 18px;
        width: 4px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--gold2), #a77a12);
    }

    .mobile-notification-top {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: 12px;
        align-items: start;
    }

    .notification-icon {
        width: 50px;
        height: 50px;
        border-radius: 18px;
        display: grid;
        place-items: center;
        font-weight: 1000;
        font-size: 18px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.06);
        color: #fff;
    }

    .notification-icon.is-payment {
        color: #c9ffd5;
        background: rgba(82,210,115,.12);
        border-color: rgba(82,210,115,.36);
    }

    .notification-icon.is-cancel {
        color: #ffd1d1;
        background: rgba(255,107,107,.13);
        border-color: rgba(255,107,107,.38);
    }

    .notification-icon.is-appointment {
        color: var(--gold2);
        background: rgba(212,175,55,.14);
        border-color: rgba(212,175,55,.40);
    }

    .notification-icon.is-barber {
        color: #080808;
        background: linear-gradient(135deg, var(--gold2), #9a7413);
        border-color: rgba(212,175,55,.52);
    }

    .mobile-notification-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-notification-title-row h3 {
        margin: 0;
        color: var(--text);
        font-size: 17px;
        line-height: 1.18;
        max-width: 210px;
    }

    .mobile-notification-heading p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-notification-state {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 58px;
        padding: 6px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 950;
        white-space: nowrap;
    }

    .mobile-notification-state.is-new {
        color: #080808;
        background: linear-gradient(135deg, var(--gold2), #a77a12);
    }

    .mobile-notification-state.is-read {
        color: var(--muted);
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.12);
    }

    .mobile-notification-message {
        margin: 13px 0 0;
        color: #eee2d1;
        line-height: 1.5;
        font-size: 14px;
    }

    .mobile-notification-details {
        margin-top: 14px;
        border-radius: 18px;
        border: 1px solid rgba(255,255,255,.09);
        background: rgba(0,0,0,.18);
        overflow: hidden;
    }

    .mobile-notification-details summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 14px;
        color: var(--gold2);
        font-weight: 950;
        letter-spacing: .2px;
    }

    .mobile-notification-details summary::-webkit-details-marker {
        display: none;
    }

    .mobile-notification-details summary b {
        display: inline-flex;
        width: 28px;
        height: 28px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(212,175,55,.12);
        border: 1px solid rgba(212,175,55,.30);
        transition: transform .18s ease;
    }

    .mobile-notification-details[open] summary b {
        transform: rotate(180deg);
    }

    .mobile-notification-detail-grid {
        display: grid;
        gap: 10px;
        padding: 0 14px 14px;
    }

    .mobile-notification-detail-grid div {
        padding: 12px;
        border-radius: 16px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.07);
    }

    .mobile-notification-detail-grid small {
        display: block;
        color: var(--gold2);
        text-transform: uppercase;
        letter-spacing: .6px;
        font-size: 10px;
        font-weight: 950;
        margin-bottom: 5px;
    }

    .mobile-notification-detail-grid strong {
        display: block;
        color: var(--text);
        font-size: 14px;
        line-height: 1.35;
    }

    .mobile-notification-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 14px;
        align-items: center;
    }

    .mobile-notification-actions .btn {
        width: 100%;
        margin: 0 !important;
    }

    .mobile-read-text,
    .mobile-empty-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 13px;
        color: var(--muted);
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.09);
        font-size: 12px;
        font-weight: 850;
    }

    .mobile-empty-notifications {
        display: grid;
        gap: 6px;
        padding: 18px;
        border-radius: 22px;
        border: 1px solid rgba(255,255,255,.10);
        background: rgba(255,255,255,.045);
        color: var(--muted);
    }

    .mobile-empty-notifications b {
        color: var(--text);
    }
}

@media (max-width: 390px) {
    .mobile-notification-card {
        padding: 14px;
        border-radius: 22px;
    }

    .mobile-notification-top {
        grid-template-columns: 46px 1fr;
        gap: 10px;
    }

    .notification-icon {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        font-size: 16px;
    }

    .mobile-notification-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
    }

    .mobile-notification-title-row h3 {
        max-width: 100%;
        font-size: 16px;
    }

    .mobile-notification-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== Pagos reales / apartados / citas manuales ===== */
.payment-help-box,
.payment-instructions {
    border: 1px solid rgba(212, 175, 55, .28);
    background: rgba(212, 175, 55, .08);
    border-radius: 16px;
    padding: 14px 16px;
    margin: 12px 0 14px;
}
.payment-instructions {
    color: #f6e7a8;
    line-height: 1.55;
}
.payment-review-card {
    margin-bottom: 18px;
}
.inline-action-form {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
}
.inline-action-form input {
    min-width: 150px;
}
.reject-form {
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.block {
    display: block;
    margin-top: 5px;
}
.mini-link {
    display: inline-block;
    margin-top: 5px;
    color: #d4af37;
    font-weight: 700;
    text-decoration: none;
}
.mini-link:hover {
    text-decoration: underline;
}
.manual-booking-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.manual-services-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}
.manual-service-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 13px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    cursor: pointer;
}
.manual-service-option:hover {
    border-color: rgba(212,175,55,.45);
}
.manual-service-option input {
    width: auto;
    margin-top: 4px;
}
.manual-service-option span {
    display: grid;
    gap: 4px;
}
.manual-service-option small {
    color: #a9a9a9;
}
@media (max-width: 1000px) {
    .manual-booking-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Cambios rápidos: ojo de contraseña, pago por anticipo/total y corte de caja ===== */
.password-field{
    position:relative;
    display:flex;
    align-items:center;
}
.password-field input{
    width:100%;
    padding-right:48px !important;
}
.password-toggle{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:1px solid rgba(212,175,55,.35);
    background:rgba(255,255,255,.06);
    color:#f5d36b;
    border-radius:12px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
}
.password-toggle:hover{
    background:rgba(212,175,55,.16);
}

.improved-payment-box{
    border:1px solid rgba(212,175,55,.25);
    background:linear-gradient(135deg, rgba(212,175,55,.12), rgba(255,255,255,.04));
}
.payment-summary-grid,
.cash-cut-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:12px;
    margin:14px 0;
}
.payment-summary-grid > div,
.cash-cut-grid > div{
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.045);
    border-radius:16px;
    padding:13px 14px;
}
.payment-summary-grid span,
.cash-cut-grid span{
    display:block;
    font-size:12px;
    color:#a7a7a7;
    margin-bottom:5px;
}
.payment-summary-grid strong,
.cash-cut-grid strong{
    color:#f5d36b;
    font-size:17px;
}
.payment-method-cards{
    margin:12px 0;
}
.payment-method-card{
    border:1px solid rgba(212,175,55,.22);
    background:rgba(0,0,0,.22);
    border-radius:18px;
    padding:16px;
    margin-bottom:10px;
}
.payment-method-card h4{
    margin:5px 0 10px;
    color:#fff;
}
.payment-method-card p{
    margin:6px 0;
    color:#d8d8d8;
    font-size:14px;
}
.cash-cut-total{
    background:linear-gradient(135deg, rgba(212,175,55,.18), rgba(255,255,255,.05)) !important;
    border-color:rgba(212,175,55,.4) !important;
}
.cash-cut-note{
    margin-top:8px;
}
.corte-save-form{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.corte-save-form input{
    min-width:220px;
}
.cash-cut-history{
    margin-top:16px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:12px;
}
.cash-cut-history summary,
.saldo-details summary{
    cursor:pointer;
    color:#f5d36b;
    font-weight:700;
}
.saldo-form{
    display:grid;
    grid-template-columns:minmax(90px,1fr) minmax(110px,1fr);
    gap:8px;
    margin-top:10px;
}
.saldo-form input,
.saldo-form select,
.saldo-form button{
    width:100%;
}
.manual-payment-summary{
    margin-top:6px;
}
@media (max-width:700px){
    .corte-save-form{justify-content:stretch;}
    .corte-save-form input,.corte-save-form button{width:100%;}
    .saldo-form{grid-template-columns:1fr;}
}

/* Mercado Pago + seguridad */
.mercado-pago-box{
    border:1px solid rgba(78,171,255,.28);
    background:linear-gradient(135deg, rgba(0,123,255,.10), rgba(212,175,55,.06));
}
.mercado-card-active{
    border-color:rgba(78,171,255,.38);
    box-shadow:0 16px 40px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04);
}
.mercado-card-active h4::before{
    content:'💳 ';
}
.payment-method-card .bb-kicker,
.mercado-pago-box .bb-kicker{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#f5d36b;
    font-weight:800;
}
.password-field{
    position:relative;
    display:flex;
    align-items:center;
}
.password-field input{
    width:100%;
    padding-right:52px !important;
}
.password-toggle{
    position:absolute;
    right:8px;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border:0;
    border-radius:12px;
    background:rgba(212,175,55,.14);
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.password-toggle:hover{
    background:rgba(212,175,55,.26);
}
.security-mini-note{
    font-size:12px;
    color:#aaa;
    margin-top:8px;
}

/* ===== Icono personalizado del ojo en login ===== */
.password-field--icon{
    position:relative;
}
.password-field--icon input{
    padding-right:58px !important;
}
.password-toggle--image{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:40px;
    height:40px;
    padding:0;
    border:1px solid rgba(212,175,55,.35);
    border-radius:14px;
    background:rgba(212,175,55,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
}
.password-toggle--image:hover{
    background:rgba(212,175,55,.20);
    border-color:rgba(212,175,55,.60);
}
.password-toggle--image img{
    width:24px;
    height:24px;
    object-fit:contain;
    display:block;
    pointer-events:none;
}

/* =========================================================
   TABLAS RESPONSIVE GLOBALES - Blackout Barber
   Mejora visual para todas las tablas del sistema.
   Escritorio: tabla premium con scroll elegante.
   Teléfono: tabla convertida en tarjetas con etiquetas.
   ========================================================= */
.table-wrap,
.bb-responsive-table-wrap{
    position:relative;
    max-width:100%;
    overflow:auto;
    border-radius:26px;
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028));
    box-shadow:0 22px 60px rgba(0,0,0,.26);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(212,175,55,.55) rgba(255,255,255,.055);
}

.table-wrap::-webkit-scrollbar,
.bb-responsive-table-wrap::-webkit-scrollbar{
    height:10px;
    width:10px;
}

.table-wrap::-webkit-scrollbar-track,
.bb-responsive-table-wrap::-webkit-scrollbar-track{
    background:rgba(255,255,255,.055);
    border-radius:999px;
}

.table-wrap::-webkit-scrollbar-thumb,
.bb-responsive-table-wrap::-webkit-scrollbar-thumb{
    background:linear-gradient(135deg,rgba(212,175,55,.78),rgba(139,104,16,.78));
    border-radius:999px;
}

.table-wrap table,
table.bb-responsive-table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
}

.table-wrap table th,
table.bb-responsive-table th{
    white-space:nowrap;
    background:linear-gradient(180deg,#121214,#0b0b0d);
    color:var(--gold2);
    font-size:11px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.75px;
    border-bottom:1px solid rgba(212,175,55,.18);
}

.table-wrap table td,
table.bb-responsive-table td{
    border-bottom:1px solid rgba(255,255,255,.075);
    line-height:1.45;
}

.table-wrap table tbody tr,
table.bb-responsive-table tbody tr{
    transition:background .16s ease, transform .16s ease;
}

.table-wrap table tbody tr:hover td,
table.bb-responsive-table tbody tr:hover td{
    background:rgba(212,175,55,.038);
}

.table-wrap table td:first-child,
.table-wrap table th:first-child,
table.bb-responsive-table td:first-child,
table.bb-responsive-table th:first-child{
    padding-left:18px;
}

.table-wrap table td:last-child,
.table-wrap table th:last-child,
table.bb-responsive-table td:last-child,
table.bb-responsive-table th:last-child{
    padding-right:18px;
}

.bb-table-mobile-hint{
    display:none;
}

@media(max-width:760px){
    .table-wrap.bb-responsive-table-wrap{
        overflow:visible;
        border:0!important;
        background:transparent!important;
        box-shadow:none!important;
        border-radius:0!important;
    }

    .table-wrap.bb-responsive-table-wrap::before{
        content:"Vista móvil: desliza o toca las acciones de cada tarjeta";
        display:block;
        margin:0 0 12px;
        padding:10px 12px;
        border-radius:16px;
        background:rgba(212,175,55,.10);
        border:1px solid rgba(212,175,55,.22);
        color:var(--gold2);
        font-size:12px;
        font-weight:850;
        line-height:1.35;
    }

    table.bb-responsive-table{
        min-width:0!important;
        width:100%!important;
        border-collapse:separate!important;
        border-spacing:0 14px!important;
        background:transparent!important;
        font-size:14px!important;
    }

    table.bb-responsive-table thead,
    table.bb-responsive-table tr.bb-responsive-header-row{
        display:none!important;
    }

    table.bb-responsive-table tbody,
    table.bb-responsive-table tr,
    table.bb-responsive-table td{
        display:block;
        width:100%!important;
    }

    table.bb-responsive-table tbody tr{
        position:relative;
        margin:0 0 14px;
        padding:14px;
        border-radius:24px;
        border:1px solid rgba(255,255,255,.10);
        background:
            radial-gradient(circle at top right,rgba(212,175,55,.10),transparent 34%),
            linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
        box-shadow:0 16px 38px rgba(0,0,0,.28);
        overflow:hidden;
    }

    table.bb-responsive-table tbody tr:hover td{
        background:transparent!important;
    }

    table.bb-responsive-table td{
        display:grid;
        grid-template-columns:minmax(98px,38%) minmax(0,1fr);
        gap:10px;
        align-items:start;
        min-height:34px;
        padding:10px 0!important;
        border:0!important;
        border-bottom:1px solid rgba(255,255,255,.065)!important;
        color:#f5f2eb;
        overflow-wrap:anywhere;
        word-break:break-word;
    }

    table.bb-responsive-table td:last-child{
        border-bottom:0!important;
        padding-bottom:0!important;
    }

    table.bb-responsive-table td::before{
        content:attr(data-label);
        display:block;
        color:var(--gold2);
        font-size:10px;
        font-weight:950;
        text-transform:uppercase;
        letter-spacing:.7px;
        line-height:1.3;
    }

    table.bb-responsive-table td:empty{
        display:none!important;
    }

    table.bb-responsive-table tr.bb-table-empty-row{
        padding:18px;
        text-align:center;
    }

    table.bb-responsive-table tr.bb-table-empty-row td,
    table.bb-responsive-table td[colspan]{
        display:block!important;
        text-align:center;
        color:var(--muted);
        border:0!important;
        padding:0!important;
    }

    table.bb-responsive-table tr.bb-table-empty-row td::before,
    table.bb-responsive-table td[colspan]::before{
        display:none!important;
    }

    table.bb-responsive-table .actions,
    table.bb-responsive-table td.bb-table-actions-cell{
        display:flex!important;
        flex-wrap:wrap;
        gap:8px;
        align-items:center;
    }

    table.bb-responsive-table td.bb-table-actions-cell::before{
        width:100%;
        flex:0 0 100%;
    }

    table.bb-responsive-table td.bb-table-actions-cell .btn,
    table.bb-responsive-table td.bb-table-actions-cell button,
    table.bb-responsive-table td.bb-table-actions-cell a.btn{
        flex:1 1 130px;
        min-height:38px;
        margin:0!important;
        justify-content:center;
        text-align:center;
    }

    table.bb-responsive-table .badge,
    table.bb-responsive-table .pill,
    table.bb-responsive-table [class*="badge"],
    table.bb-responsive-table [class*="pill"]{
        width:max-content;
        max-width:100%;
        white-space:normal;
    }

    table.bb-responsive-table input,
    table.bb-responsive-table select,
    table.bb-responsive-table textarea{
        min-width:0;
        width:100%;
    }
}

@media(max-width:420px){
    table.bb-responsive-table tbody tr{
        padding:13px;
        border-radius:22px;
    }

    table.bb-responsive-table td{
        grid-template-columns:1fr;
        gap:5px;
        padding:9px 0!important;
    }

    table.bb-responsive-table td::before{
        font-size:9.5px;
    }

    .table-wrap.bb-responsive-table-wrap::before{
        font-size:11px;
    }
}