/* ============================================================
   DONCUT'S BARBERÍA — Design system
   European-heritage premium. Near-black, ivory and marble —
   with true metallic gold/copper sheen throughout.
   ============================================================ */

:root{
  /* Negro neutro (sin tinte cálido), blancos y grises fríos, y el oro
     reservado para filos y detalles: el énfasis fuerte lo lleva el negro. */
  --ink:#0C0D0F;
  --ink-soft:#16181C;
  --ink-2:#23262B;
  --paper:#F6F7F9;
  --cream:#EDEFF2;
  --cream-deep:#DCDFE4;
  --surface:#FFFFFF;
  /* --crimson es el color de énfasis (precios, acentos de texto): oro profundo,
     oscurecido lo suficiente para cumplir contraste AA sobre blanco. */
  --crimson:#7E631A;
  --crimson-deep:#614D14;
  --crimson-tint:#F4F0E3;
  /* --navy es el secundario: grafito frío, ya no marrón. */
  --navy:#3A3E45;
  --navy-deep:#24272C;
  --navy-tint:#EDEFF2;
  /* --brass es el oro de filo: líneas, bordes, estados activos. */
  --brass:#C9A94F;
  --brass-deep:#9C7F2E;
  --brass-soft:#E9DFBE;
  /* Sin degradados metálicos ni brillos: el oro va plano, como un filo.
     Se conservan los nombres para no tocar el árbol de componentes. */
  --brass-line: linear-gradient(90deg, transparent, var(--brass) 25%, var(--brass) 75%, transparent);
  --brass-gradient: var(--brass);
  --metal-gold: var(--brass);
  --metal-gold-soft: var(--brass-soft);
  --frame-ring: 0 0 0 1px rgba(201,169,79,.30), 0 0 0 3px rgba(201,169,79,.06);
  --engrave-dark: 0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.12);
  --engrave-light: 0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(16,13,9,.2);
  --success:#3F7A46;
  --success-bg:#ECF3ED;
  --success-line:#BFD6C4;
  --danger-bg:#FBEBE8;
  --danger-line:#E7B7AC;
  --text:#14161A;
  --text-muted:#5E626A;
  --text-faint:#676D76;
  --on-crimson:#FFFFFF;
  --on-navy:#F5EFE5;
  --line: rgba(12,13,15,.11);
  --line-soft: rgba(12,13,15,.06);
  --line-on-dark: rgba(255,255,255,.12);
  --shadow-xs: 0 1px 2px rgba(12,13,15,.06);
  --shadow-sm: 0 4px 14px -6px rgba(12,13,15,.16);
  --shadow-md: 0 14px 34px -12px rgba(12,13,15,.26);
  --shadow-lg: 0 36px 70px -24px rgba(12,13,15,.48);
  --shadow-card: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px -16px rgba(12,13,15,.20);
  --shadow-glow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 30px 60px -22px rgba(12,13,15,.58);
  --radius-xs:8px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:22px;
  --radius-xl:32px;
  --font-display:'Fraunces', 'Bitter', Georgia, serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --dur-fast: .16s;
  --dur: .32s;

  /* Liquid Glass — navigation-layer surfaces only, never content */
  --glass-dark: rgba(16,13,9,.68);
  --glass-dark-2: rgba(16,13,9,.44);
  --glass-light: rgba(255,255,255,.62);
  --glass-light-2: rgba(255,255,255,.86);
  --glass-border: rgba(255,255,255,.16);
  --glass-border-soft: rgba(255,255,255,.09);
  --glass-blur: blur(24px) saturate(180%);
  --glass-blur-sm: blur(16px) saturate(160%);
  --glass-shine: linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,0) 45%);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background: radial-gradient(120% 100% at 50% -8%, #FBFCFD 0%, var(--paper) 55%, #E4E7EB 100%);
  color:var(--text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}
body::before{
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
img,svg{ display:block; max-width:100%; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; }
a{ color:var(--navy); text-decoration:none; }
a:hover{ color:var(--crimson); }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--brass-soft); color:var(--ink); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#C6CBD2; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--brass); }

/* ---------- Accessibility primitives ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:9999;
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:var(--radius-xs); font-weight:700; font-size:13px;
  transition:top var(--dur-fast) var(--ease);
  box-shadow:var(--shadow-md);
}
.skip-link:focus{ top:12px; }

:focus{ outline:none; }
:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--crimson);
  border-radius: 6px;
}
.on-dark :focus-visible, [data-surface="dark"] :focus-visible{
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 5px var(--brass-soft);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

@keyframes fadeUp{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@keyframes screenEnter{ from{ opacity:0; transform:translateY(14px) scale(.99); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes staggerIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
@keyframes growBar{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }

.animate-in{ animation:fadeUp var(--dur) var(--ease) both; }
.screen-transition-enter{ animation:screenEnter .42s var(--ease) both; }
.stagger-item{ animation:staggerIn .45s var(--ease) both; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--crimson);
}
.eyebrow.on-navy{ color:var(--navy); }
.eyebrow.on-dark{ color:var(--brass-soft); text-shadow:var(--engrave-dark); }
.font-display{ font-family:var(--font-display); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:500; height:64px;
  background:linear-gradient(180deg, rgba(16,13,9,.72), rgba(16,13,9,.56));
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 34px -22px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 22px; gap:16px;
}
.topbar::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--glass-shine); opacity:.55; mix-blend-mode:overlay;
}
.brand{ display:flex; align-items:center; gap:11px; min-width:0; }
.brand-mark{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 30%, rgba(201,169,79,.07), transparent 70%);
  box-shadow:0 0 0 1px rgba(201,169,79,.07), 0 0 18px -5px rgba(201,169,79,.7);
}
.brand-mark svg{ width:16px; height:16px; }
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:18px;
  color:var(--on-crimson); letter-spacing:.035em; white-space:nowrap;
}
.brand-tag{
  color:var(--brass-soft); font-weight:600; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; margin-left:8px;
  white-space:nowrap; text-shadow:var(--engrave-dark);
}
.topbar-right{ display:flex; align-items:center; gap:12px; }
.demo-badge{
  display:none;
  color:#8E949D; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  padding:6px 11px; border-radius:20px; white-space:nowrap;
}
@media (min-width:720px){ .demo-badge{ display:inline-block; } }

.role-switch{
  display:flex; background:rgba(255,255,255,.08); border-radius:24px; padding:4px; gap:2px;
  border:1px solid var(--glass-border-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.role-btn{
  padding:8px 16px; border-radius:20px; font-size:12.5px; font-weight:700;
  cursor:pointer; color:#9BA1AA; transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height:36px;
}
.role-btn:hover{ color:#fff; }
.role-btn[aria-pressed="true"]{
  background:var(--ink); color:var(--on-crimson);
  box-shadow:0 2px 10px -2px rgba(184,112,58,.65), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ============================================================
   LAYOUT
   ============================================================ */
#app-root{ padding-top:64px; min-height:100vh; }
.stage{
  display:flex; justify-content:center; padding:40px 18px 72px;
}

.intro-copy{
  max-width:640px; margin:0 auto 8px; text-align:center; padding:0 20px;
}
.intro-copy h1{
  font-family:var(--font-display); font-size:clamp(22px,3.4vw,28px); font-weight:700; color:var(--ink);
}
.intro-copy p{ color:var(--text-muted); font-size:13.5px; margin-top:8px; line-height:1.6; }

/* ============================================================
   PHONE SHELL (Cliente / Barbero)
   ============================================================ */
.phone{
  width:100%; max-width:390px; background:linear-gradient(160deg,#050506,#1A1C20 55%,#0809012);
  border-radius:46px; padding:13px; box-shadow:var(--shadow-lg), var(--frame-ring);
  position:relative; border:1px solid var(--glass-border-soft);
}
.phone-screen{
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(201,169,79,.07), transparent 55%),
    linear-gradient(175deg, rgba(250,251,252,.965), rgba(246,247,249,.945) 45%, rgba(236,238,241,.925)),
    url('assets/texture-sidebar.jpg');
  background-size:auto, auto, cover; background-position:center, center, center top;
  border-radius:36px; overflow:hidden; min-height:760px;
  position:relative; display:flex; flex-direction:column; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:26px; background:#050506; border-radius:0 0 18px 18px; z-index:20;
}
.status-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px 4px; font-size:12px; font-weight:700; color:var(--ink);
  flex-shrink:0;
}
.status-icons{ display:flex; gap:4px; align-items:center; }
.status-icons .bar{ width:14px; height:9px; border:1.4px solid var(--ink); border-radius:2px; }
.status-icons .batt{ width:17px; height:9px; border:1.4px solid var(--ink); border-radius:2px; position:relative; }
.status-icons .batt::after{ content:''; position:absolute; inset:1.6px; background:var(--ink); border-radius:1px; width:68%; }

.screen-body{ flex:1; overflow-y:auto; padding-bottom:92px; scroll-behavior:smooth; }
.screen-body:focus{ outline:none; }

/* Bottom tab bar */
.tabbar{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(180deg, var(--glass-light), var(--glass-light-2));
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--glass-border-soft); display:flex; justify-content:space-around;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 -10px 26px -20px rgba(21,19,15,.4);
  padding:9px 4px 18px; z-index:10;
}
.tab-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px; position:relative;
  padding:6px 9px; border-radius:12px; cursor:pointer; min-width:44px; min-height:44px;
  color:var(--text-faint); transition:color var(--dur-fast) var(--ease);
}
.tab-btn svg{ width:21px; height:21px; }
.tab-btn span{ font-size:10px; font-weight:700; letter-spacing:.01em; }
.tab-btn[aria-current="page"]{ color:var(--crimson); }
.tab-btn[aria-current="page"]::after{
  content:''; position:absolute; bottom:1px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--brass);
  box-shadow:0 0 7px 1px rgba(201,169,79,.75);
}
.tab-btn:hover{ color:var(--ink); }
.tab-btn[aria-current="page"]:hover{ color:var(--crimson); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:14px; border-radius:var(--radius-sm); cursor:pointer;
  padding:14px 20px; min-height:48px; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  border:1px solid transparent; text-align:center; position:relative; overflow:hidden;
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn-block{ width:100%; }
/* Acción principal: negro con un filo de oro. Nada de degradados. */
.btn-primary{
  background:var(--ink);
  color:#fff;
  border-color:var(--brass);
  box-shadow:0 6px 18px -10px rgba(12,13,15,.55);
}
.btn-primary:hover{ background:var(--ink-soft); border-color:var(--brass-soft); }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:var(--ink-soft); }
.btn-primary::before, .btn-ink::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
}
/* El barrido de brillo especular se retira: es el gesto que hacía ver la
   paleta anterior como "lujo de hace diez años". */
.btn-primary::after{
  content:none;
  background:none;
  transform:none;
  transition:none;
}
.btn-primary:hover::after{ transform:translateX(130%); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn svg{ width:15px; height:15px; flex-shrink:0; }
.btn-ghost svg{ width:14px; height:14px; flex-shrink:0; }
.icon-sm{ width:16px; height:16px; flex-shrink:0; }
.btn-sm{ padding:9px 14px; font-size:12px; min-height:36px; border-radius:10px; }
.btn-xs{ padding:6px 12px; font-size:11px; min-height:30px; border-radius:16px; font-weight:700; }

.pill-group{ display:inline-flex; background:var(--cream-deep); border-radius:14px; padding:4px; gap:2px; }
.pill-group.on-dark{ background:rgba(255,255,255,.08); }
.pill-btn{
  padding:9px 15px; border-radius:10px; font-weight:700; font-size:12.5px; cursor:pointer;
  color:var(--text-muted); min-height:36px;
}
.pill-btn[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:var(--shadow-xs); }
.on-dark .pill-btn{ color:#C6CBD2; }
.on-dark .pill-btn[aria-pressed="true"]{ background:var(--ink); color:var(--on-crimson); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }

.chip-toggle{
  padding:6px 12px; border-radius:14px; font-size:10.5px; font-weight:700; cursor:pointer;
  background:var(--cream-deep); color:var(--text-muted); min-height:30px;
}
.chip-toggle[aria-pressed="true"]{ background:var(--ink); color:#fff; }

/* Demo scenario switcher — clearly marked as a stakeholder preview control */
.demo-switch{
  border:1px dashed var(--brass); background:linear-gradient(180deg, rgba(201,169,79,.06), transparent);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:14px;
}
.demo-switch-label{
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brass); margin-bottom:8px; display:flex; align-items:center; gap:6px;
}
.demo-switch-label svg{ width:12px; height:12px; }
.demo-switch .chip-row{ display:flex; gap:6px; flex-wrap:wrap; }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; font-weight:700; color:var(--ink); }
.input, select.input, textarea.input{
  padding:14px 16px; border-radius:12px; border:1.5px solid var(--line);
  background:#fff; font-size:14px; width:100%; color:var(--text);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder{ color:var(--text-faint); }
.input:hover{ border-color:#8E949D; }
.input:focus-visible{ border-color:var(--crimson); }
.field-error{ color:var(--crimson); font-size:12px; font-weight:600; display:flex; gap:5px; align-items:flex-start; }
.field.has-error .input{ border-color:var(--crimson); background:var(--crimson-tint); }

.switch{
  width:42px; height:24px; border-radius:14px; position:relative; cursor:pointer;
  background:var(--cream-deep); flex-shrink:0; transition:background var(--dur-fast) var(--ease);
  border:1px solid var(--line);
}
.switch[aria-checked="true"]{ background:var(--success); border-color:var(--success); }
.switch .knob{
  width:18px; height:18px; border-radius:50%; background:#fff; position:absolute; top:2px; left:2px;
  transition:left var(--dur-fast) var(--ease); box-shadow:var(--shadow-xs);
}
.switch[aria-checked="true"] .knob{ left:20px; }

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.4));
  backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.55); border-radius:var(--radius-md);
  padding:18px; box-shadow:var(--shadow-card);
}
.card-row{ display:flex; justify-content:space-between; align-items:center; }
.divider{ height:1px; background:var(--line); margin:10px 0; border:0; }
.divider-brass{ height:2px; background:var(--metal-gold); background-size:200% 100%; border:0; border-radius:2px; }

.avatar{
  border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; flex-shrink:0; font-family:var(--font-display);
}

/* ============================================================
   CLIENTE — screens
   ============================================================ */
.login-wrap{ padding:30px 24px 16px; }
.login-brand{ text-align:center; margin:14px 0 28px; }
.login-mark{
  width:68px; height:68px; margin:0 auto 14px; border-radius:20px; background:linear-gradient(160deg, var(--ink-2), var(--ink));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 1px rgba(201,169,79,.2), 0 18px 34px -14px rgba(16,13,9,.6);
}
.login-mark svg{ width:30px; height:30px; }
.login-title{ font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--ink); letter-spacing:-.01em; }
.login-sub{ font-size:11px; color:var(--crimson); font-weight:700; letter-spacing:.14em; margin-top:3px; }
.form-stack{ display:flex; flex-direction:column; gap:13px; }
.forgot-link{ font-size:12px; font-weight:700; text-align:right; margin-top:-5px; }
.hint-banner{
  background:var(--navy-tint); border:1px solid rgba(31,58,92,.22); border-radius:10px;
  padding:11px 13px; font-size:12px; color:var(--navy); font-weight:600; line-height:1.5;
}

.home-hero{ background:linear-gradient(160deg, rgba(10,11,13,.90), rgba(26,28,32,.86)), url('assets/texture-hero.jpg'); background-size:cover; background-position:center; padding:28px 24px 32px; border-radius:0 0 28px 28px; position:relative; overflow:hidden; border-bottom:1px solid var(--glass-border-soft); box-shadow:var(--shadow-glow); }
.home-hero::before{
  content:''; position:absolute; inset:0; opacity:.6;
  background:radial-gradient(120% 80% at 100% 0%, rgba(201,169,79,.07), transparent 60%), var(--glass-shine);
}
.home-greeting{ color:#9BA1AA; font-size:12px; }
.home-name{ color:#fff; font-size:20px; font-weight:700; font-family:var(--font-display); margin-top:2px; }
.next-appt{
  margin-top:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 16px; display:flex; justify-content:space-between; align-items:center;
  position:relative;
}
.next-appt-label{ color:#9BA1AA; font-size:10.5px; font-weight:700; letter-spacing:.05em; }
.next-appt-title{ color:#fff; font-size:14px; font-weight:700; margin-top:3px; }
.next-appt-time{ color:var(--brass-soft); font-size:12px; margin-top:1px; }
.live-dot{ width:8px; height:8px; background:#4E9E63; border-radius:50%; animation:pulseDot 2s infinite; flex-shrink:0; }

.section-head{ padding:22px 22px 4px; display:flex; justify-content:space-between; align-items:center; }
.section-title{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.005em; }
.section-link{ font-size:12px; font-weight:700; }

.svc-rail{ display:flex; gap:12px; overflow-x:auto; padding:14px 22px 6px; scrollbar-width:thin; }
.svc-card{
  min-width:138px; background:#fff; border-radius:16px; padding:14px; flex-shrink:0; border:1px solid var(--line);
  transition:box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
/* Service "art" — graphic duotone cards standing in for reference photography */
.svc-art{
  position:relative; overflow:hidden; border-radius:12px;
  background:var(--svc-bg, linear-gradient(135deg, var(--ink), var(--ink-2)));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.svc-art::before{
  content:''; position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 7px);
}
.svc-art::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 8%, transparent 40%, rgba(0,0,0,.4) 100%);
}
.svc-art-icon{ position:relative; z-index:1; width:32%; color:var(--svc-fg, var(--brass-soft)); filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.svc-art-mono{ position:absolute; top:6px; right:9px; font-family:var(--font-display); font-weight:700; font-size:10px; color:rgba(255,255,255,.5); z-index:1; }
.svc-art-md{ width:100%; aspect-ratio:4/3; margin-bottom:10px; }
.svc-art-md .svc-art-icon{ width:26%; max-width:34px; }
.svc-art-sm{ width:52px; height:52px; border-radius:11px; }
.svc-art-sm .svc-art-icon{ width:38%; max-width:22px; }
.svc-art-sm .svc-art-mono{ display:none; }
.svc-art-xs{ width:40px; height:40px; border-radius:9px; }
.svc-art-xs .svc-art-icon{ width:40%; max-width:18px; }
.svc-art-xs .svc-art-mono{ display:none; }
.svc-name{ font-size:13px; font-weight:700; color:var(--ink); }
.svc-price{ font-size:13.5px; font-weight:800; color:var(--crimson); margin-top:4px; }

.stat-row{ padding:4px 22px 22px; display:flex; gap:10px; }
.stat-card{
  flex:1; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px;
  text-align:center; cursor:pointer; min-height:44px;
}
.stat-card:hover{ border-color:var(--brass); }
.stat-num{ font-family:var(--font-display); font-weight:800; font-size:19px; }
.stat-label{ font-size:11px; color:var(--text-muted); font-weight:600; margin-top:2px; }

.catalog-list{ padding:6px 22px 22px; display:flex; flex-direction:column; gap:10px; }
.svc-line{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px;
  display:flex; align-items:center; gap:14px; box-shadow:var(--shadow-card);
}
.svc-line-name{ font-size:14px; font-weight:700; color:var(--ink); }
.svc-line-dur{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.svc-line-price{ font-size:16px; font-weight:800; color:var(--crimson); }

.steps-row{ display:flex; gap:6px; padding:14px 22px 18px; }
.step-bar{ flex:1; height:4px; border-radius:3px; background:var(--cream-deep); overflow:hidden; }
.step-bar.filled{ background:var(--crimson); }

.pick-card{
  text-align:left; padding:14px 16px; border-radius:14px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  border:1.5px solid var(--line); background:#fff; width:100%; min-height:48px;
}
.pick-card[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.pick-card:hover:not([aria-pressed="true"]){ border-color:var(--brass); }
.pick-card-name{ font-size:14px; font-weight:700; }
.pick-card-sub{ font-size:11px; opacity:.7; margin-top:2px; }
.pick-card-price{ font-size:15px; font-weight:800; }

.slot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.slot-btn{
  padding:12px 4px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer;
  background:#fff; border:1px solid var(--line); color:var(--ink); min-height:44px;
}
.slot-btn[aria-pressed="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.slot-btn:disabled{ background:#eee; color:#bbb; border-color:#eee; cursor:not-allowed; }
.slot-btn.slot-taken{ background:var(--danger-bg); color:var(--crimson); border-color:var(--danger-line); }

.empty-state{ text-align:center; padding:52px 22px; color:var(--text-muted); }
.empty-state .mark{ font-size:30px; margin-bottom:10px; color:var(--brass); }
.empty-state .title{ font-weight:700; color:var(--ink); font-size:14px; }
.empty-state .desc{ font-size:12.5px; margin-top:5px; line-height:1.5; }

.summary-card{ display:flex; flex-direction:column; gap:10px; }
.summary-row{ display:flex; justify-content:space-between; font-size:13px; }
.summary-row .k{ color:var(--text-muted); }
.summary-row .v{ font-weight:700; color:var(--ink); }
.summary-total .v{ font-weight:800; color:var(--crimson); font-size:15.5px; }

.confirm-hero{ text-align:center; padding:18px 10px 6px; }
.confirm-icon{
  width:66px; height:66px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.confirm-icon svg{ width:28px; height:28px; }
.confirm-title{ font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--ink); letter-spacing:-.005em; }
.confirm-sub{ font-size:13px; color:var(--text-muted); margin-top:7px; line-height:1.55; }

.refer-code-card{
  background:linear-gradient(160deg, rgba(10,11,13,.90), rgba(26,28,32,.86)), url('assets/texture-hero.jpg'); background-size:cover; background-position:center; border:1px solid var(--glass-border-soft); border-radius:18px; padding:24px; text-align:center; position:relative; overflow:hidden; box-shadow:var(--shadow-glow);
}
.refer-code-card::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 0% 0%, rgba(201,169,79,.2), transparent 60%), var(--glass-shine); opacity:.9; }
.refer-code-label{ color:#9BA1AA; font-size:10.5px; font-weight:800; letter-spacing:.1em; position:relative; }
.refer-code{ color:#fff; font-family:var(--font-display); font-size:29px; font-weight:800; letter-spacing:.07em; margin:9px 0; position:relative; }
.refer-code-actions{ display:flex; gap:8px; margin-top:12px; position:relative; }

.progress-track{ height:14px; background:#1A1C20; border-radius:8px; overflow:hidden; }
.progress-fill{
  height:100%; border-radius:8px; transition:width .5s var(--ease);
  background:repeating-linear-gradient(45deg, var(--crimson) 0 8px, #EDEFF2 8px 16px, var(--navy) 16px 24px);
}
.progress-card{ background:linear-gradient(160deg, rgba(10,11,13,.90), rgba(26,28,32,.86)), url('assets/texture-hero.jpg'); background-size:cover; background-position:center; border:1px solid var(--glass-border-soft); border-radius:18px; padding:20px; box-shadow:var(--shadow-glow); }
.progress-meta{ display:flex; justify-content:space-between; margin-top:11px; color:#fff; font-size:12px; font-weight:700; }
.progress-meta .goal{ color:#9BA1AA; }

.tier-row{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.tier-badge{ width:34px; height:34px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; flex-shrink:0; font-family:var(--font-display); }
.tier-name{ font-size:13px; font-weight:700; color:var(--ink); }
.tier-sub{ font-size:11px; color:var(--text-muted); }
.tier-check{ font-size:12px; font-weight:800; }

.chat-mock{ background:#15171B; border-radius:18px; padding:16px; }
.chat-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.chat-name{ color:#fff; font-size:13px; font-weight:700; }
.chat-bubble{ background:var(--cream); border-radius:12px 12px 12px 3px; padding:13px 15px; font-size:13px; color:var(--ink); line-height:1.55; max-width:90%; }
.chat-actions{ display:flex; gap:6px; margin-top:10px; }
.chat-action{ flex:1; text-align:center; padding:8px; border-radius:8px; font-size:11px; font-weight:700; }
.chat-time{ color:#9BA1AA; font-size:10px; text-align:right; margin-top:6px; }

.profile-head{ text-align:center; padding:24px 22px 8px; }
.profile-avatar{ width:66px; height:66px; border-radius:50%; margin:0 auto 11px; }
.avatar-upload-btn{
  position:absolute; bottom:8px; right:-4px; width:26px; height:26px; border-radius:50%;
  background:var(--metal-gold, var(--brass)); color:var(--ink); display:flex; align-items:center; justify-content:center;
  border:2px solid #fff; box-shadow:var(--shadow-sm); cursor:pointer;
}
.avatar-upload-btn svg{ width:13px; height:13px; }
.profile-name{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--ink); }
.profile-phone{ font-size:12.5px; color:var(--text-muted); margin-top:2px; }
.profile-stats{ display:flex; gap:10px; padding:16px 22px; }
.history-row{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; }

/* ============================================================
   BARBERO
   ============================================================ */
.barbero-head{ background:linear-gradient(160deg, rgba(10,11,13,.90), rgba(26,28,32,.86)), url('assets/texture-hero.jpg'); background-size:cover; background-position:center; padding:22px 24px 19px; position:relative; border-bottom:1px solid var(--glass-border-soft); box-shadow:var(--shadow-glow); }
.barbero-head::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(201,169,79,.07), transparent 60%), var(--glass-shine); opacity:.85; }
.barbero-head-row{ display:flex; justify-content:space-between; align-items:center; position:relative; }
.barbero-role{ color:#9BA1AA; font-size:11px; }
.barbero-name{ color:#fff; font-size:16.5px; font-weight:700; font-family:var(--font-display); margin-top:2px; }
.sede-badge{ background:rgba(255,255,255,.08); color:#fff; font-size:11px; font-weight:700; padding:7px 11px; border-radius:9px; border:1px solid rgba(255,255,255,.1); }

.agenda-item{
  background:#fff; border-radius:14px; padding:14px 16px; display:flex; gap:13px; cursor:pointer;
  border:1.5px solid var(--line); width:100%; text-align:left; min-height:44px;
}
.agenda-item:hover{ border-color:var(--brass); }
.agenda-item.is-current{ border-color:var(--crimson); box-shadow:0 0 0 1px var(--crimson); }
.agenda-item.is-done{ opacity:.58; }
.agenda-time{ width:54px; text-align:center; flex-shrink:0; }
.agenda-hour{ font-size:14px; font-weight:800; color:var(--ink); }
.agenda-status{ font-size:8.5px; font-weight:800; margin-top:3px; letter-spacing:.03em; }
.agenda-client{ font-size:14px; font-weight:700; color:var(--ink); }
.agenda-service{ font-size:12px; color:var(--text-muted); margin-top:1px; }

.ficha-avatar-wrap{ text-align:center; margin-bottom:15px; }
.ficha-avatar{ width:58px; height:58px; border-radius:50%; margin:0 auto 9px; font-size:19px; }
.ficha-name{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); }
.alert-banner{
  background:var(--crimson-tint); border:1px solid rgba(184,112,58,.28); color:var(--crimson);
  border-radius:10px; padding:10px 13px; font-size:12px; font-weight:700; margin-bottom:14px; display:flex; gap:7px;
}
.ficha-stats{ display:flex; gap:8px; margin-bottom:16px; }
.ficha-stat{ flex:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px; text-align:center; }
.ficha-stat b{ display:block; font-weight:800; font-size:14.5px; color:var(--ink); }
.ficha-stat span{ font-size:9.5px; color:var(--text-muted); font-weight:600; }
.pref-box{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; font-size:13px; color:var(--ink); margin-bottom:16px; line-height:1.5; }
.mini-history-row{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; justify-content:space-between; }

.result-banner{ margin-top:16px; border-radius:12px; padding:14px; text-align:center; }
.result-banner.ok{ background:var(--success-bg); border:1px solid var(--success-line); }
.result-banner.err{ background:var(--danger-bg); border:1px solid var(--danger-line); }
.result-banner .rt{ font-weight:800; font-size:14px; }
.result-banner.ok .rt{ color:var(--success); }
.result-banner.err .rt{ color:var(--crimson); }
.result-banner .rd{ font-size:12px; color:#5E626A; margin-top:4px; }

.agenda-item.is-static{ cursor:default; }
.agenda-item.is-static:hover{ border-color:var(--line); }

.agenda-item.is-event{
  background:var(--cream); border-style:dashed; border-color:var(--brass);
}
.agenda-event-label{ font-size:14px; font-weight:700; color:var(--ink); }
.agenda-event-tag{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--brass); margin-top:1px; }

.dispo-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; align-items:start; }
.event-manager{ background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.4)); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.55); border-radius:16px; padding:18px; box-shadow:var(--shadow-card); }
.event-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 10px 9px 13px;
}
.event-row-hora{ font-size:12.5px; font-weight:800; color:var(--ink); }
.event-row-label{ font-size:11.5px; color:var(--text-muted); margin-top:1px; }
.event-row.is-editing{ background:var(--navy-tint); border-color:var(--navy); box-shadow:inset 0 0 0 1px var(--navy); }

/* ---------- Cart / checkout (Caja, Agendar extras) ---------- */
.caja-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; align-items:start; }
.cart-panel{
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.4)); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.55); border-radius:16px;
  padding:18px; box-shadow:var(--shadow-card); position:sticky; top:16px;
}
.cart-row{
  display:flex; align-items:center; gap:8px;
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px;
}
.cart-row-name{ font-size:12.5px; font-weight:700; color:var(--ink); display:block; margin-bottom:4px; }
.cart-row-price{ font-size:12.5px; font-weight:800; color:var(--crimson); flex-shrink:0; }
.qty-stepper{ display:inline-flex; align-items:center; gap:6px; }
.qty-stepper button{
  width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--ink); cursor:pointer; flex-shrink:0;
}
.qty-stepper button:hover{ border-color:var(--brass); }
.qty-stepper button svg{ width:11px; height:11px; }
.qty-num{ font-size:12px; font-weight:700; color:var(--ink); min-width:16px; text-align:center; }
@keyframes numberPop{ from{ transform:scale(1.14); } to{ transform:scale(1); } }
.summary-total.animate-in{ animation:numberPop var(--dur-fast) var(--ease) both; }

.cal-event-dot{ position:absolute; top:4px; right:4px; width:5px; height:5px; border-radius:1.5px; background:var(--brass); }
.calendar-day[aria-pressed="true"] .cal-event-dot, .calendar-day.is-selected .cal-event-dot{ background:#fff; }

/* ============================================================
   CALENDAR — shared month-grid component
   ============================================================ */
.calendar{ background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.4)); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); border:1px solid rgba(255,255,255,.55); border-radius:16px; padding:16px; box-shadow:var(--shadow-card); }
.calendar-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.calendar-month-label{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); text-transform:capitalize; }
.cal-nav{
  width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--ink); cursor:pointer; background:var(--paper); border:1px solid var(--line); flex-shrink:0;
}
.cal-nav:hover{ border-color:var(--brass); }
.cal-nav svg{ width:15px; height:15px; }
.cal-nav-next svg{ transform:rotate(180deg); }
.calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.calendar-weekdays span{ text-align:center; font-size:10px; font-weight:800; color:var(--text-faint); letter-spacing:.04em; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calendar-day{
  position:relative; aspect-ratio:1; width:100%; border-radius:9px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-size:12.5px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; min-height:32px;
}
.calendar-day:hover:not(:disabled):not(.is-outside){ border-color:var(--brass); }
.calendar-day.is-outside{ visibility:hidden; pointer-events:none; border:0; }
.calendar-day.is-today{ box-shadow:inset 0 0 0 1.5px var(--brass); }
.calendar-day[aria-pressed="true"], .calendar-day.is-selected{ background:var(--ink); border-color:var(--ink); color:#fff; }
.calendar-day.is-closed{ background:var(--cream-deep); color:var(--text-faint); border-color:var(--cream-deep); }
.calendar-day.is-off{ background:var(--crimson-tint); color:var(--crimson); border-color:rgba(126,27,35,.2); }
.calendar-day[aria-pressed="true"].is-off{ background:var(--crimson); color:#fff; }
.calendar-day:disabled{ cursor:not-allowed; opacity:.5; }
.calendar-day:disabled:not(.is-closed):not(.is-off){ background:transparent; border-color:transparent; color:var(--text-faint); }
.cal-dot{ position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--success); }
.calendar-day[aria-pressed="true"] .cal-dot, .calendar-day.is-selected .cal-dot{ background:#fff; }
.cal-dot-inline{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--success); margin-right:6px; vertical-align:1px; }

.calendar-day-static{
  aspect-ratio:1; border-radius:9px; font-size:12px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; justify-content:center; position:relative; background:var(--paper);
}
.calendar-day-static.is-today{ box-shadow:inset 0 0 0 1.5px var(--brass); }
.calendar-day-static.is-closed{ background:var(--cream-deep); color:var(--text-faint); }
.calendar-day-static.is-off{ background:var(--crimson-tint); color:var(--crimson); }
.calendar-day-static.is-past{ color:var(--text-faint); opacity:.55; }
.calendar-day-static.has-bookings{ background:var(--success-bg); color:var(--success); }
.cal-dot-count{
  position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:8px;
  background:var(--ink); color:#fff; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center;
}

.day-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:10px; }
.day-nav-label{ text-align:center; }
.day-nav-date{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); text-transform:capitalize; }
.day-nav-today{ display:inline-block; margin-top:2px; font-size:10px; font-weight:800; color:var(--success); letter-spacing:.05em; text-transform:uppercase; }
.day-nav-gohoy{ display:inline-block; margin-top:2px; font-size:11px; font-weight:700; color:var(--navy); cursor:pointer; background:none; border:none; }
.day-nav-gohoy:hover{ color:var(--crimson); }

.barber-pill{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 7px; border-radius:24px;
  border:1.5px solid var(--line); background:#fff; font-size:12.5px; font-weight:700; color:var(--ink); cursor:pointer; min-height:40px;
}
.barber-pill[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.barber-pill:hover{ border-color:var(--brass); }

.activity-row{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.activity-badge{ background:var(--success-bg); color:var(--success); font-size:10px; font-weight:800; padding:4px 9px; border-radius:10px; flex-shrink:0; }

/* ============================================================
   ADMIN — desktop
   ============================================================ */
.admin-shell{
  width:100%; max-width:1320px; background:#fff; border-radius:24px; box-shadow:var(--shadow-lg), var(--frame-ring);
  overflow:hidden; display:flex; min-height:780px; max-height:calc(100vh - 80px); border:1px solid var(--line);
}
.admin-sidebar{
  width:248px;
  background:linear-gradient(165deg, rgba(22,24,28,.93), rgba(10,11,13,.96) 60%), url('assets/texture-sidebar.jpg');
  background-size:cover; background-position:center;
  padding:24px 14px; display:flex; flex-direction:column; flex-shrink:0;
  position:relative; border-right:1px solid var(--glass-border-soft); overflow-y:auto;
  box-shadow:6px 0 30px -18px rgba(16,13,9,.5);
}
.admin-sidebar::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(140% 60% at 0% 0%, rgba(201,169,79,.07), transparent 60%), var(--glass-shine);
  opacity:.8;
}
.admin-brand{ display:flex; align-items:center; gap:10px; padding:0 10px 24px; position:relative; }
.admin-brand-mark{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--brass); display:flex; align-items:center; justify-content:center; }
.admin-brand-mark svg{ width:14px; height:14px; }
.admin-brand-name{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:15px; }
.nav-group{ margin-top:12px; position:relative; }
.nav-group-title{ color:#8E949D; font-size:9.5px; font-weight:800; letter-spacing:.1em; padding:0 12px 7px; }
.nav-item{
  width:100%; text-align:left; padding:10px 12px; border-radius:10px; font-size:13px; font-weight:600;
  cursor:pointer; margin-bottom:2px; color:#8E949D; display:flex; align-items:center; gap:9px; min-height:40px;
}
.nav-item svg{ width:16px; height:16px; opacity:.75; flex-shrink:0; }
.nav-item:hover{ background:rgba(255,255,255,.05); color:#fff; }
.nav-item[aria-current="page"]{
  background:linear-gradient(90deg, rgba(201,169,79,.07), rgba(201,169,79,.03) 80%);
  color:#fff; box-shadow:inset 3px 0 0 0 var(--brass);
}
.nav-item[aria-current="page"] svg{ opacity:1; color:var(--brass-soft); }

.admin-main{ flex:1; display:flex; flex-direction:column; min-width:0; min-height:0; }
.admin-topbar{
  padding:19px 30px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap;
}
.admin-title{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--ink); letter-spacing:-.01em; }
.admin-topbar-right{ display:flex; align-items:center; gap:12px; }
.sede-select{
  padding:10px 14px; border-radius:10px; border:1px solid var(--line); font-size:12.5px; font-weight:700;
  background:var(--paper); color:var(--ink); min-height:40px;
}
.admin-content{
  flex:1; overflow-y:auto; padding:34px 38px 46px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(201,169,79,.07), transparent 55%),
    linear-gradient(175deg, rgba(250,251,252,.97), rgba(246,247,249,.95) 40%, rgba(236,238,241,.93)),
    url('assets/texture-sidebar.jpg');
  background-size:auto, auto, cover;
  background-position:center, center, center top;
}
.admin-content:focus{ outline:none; }

.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.kpi-card{
  background:linear-gradient(160deg, rgba(255,255,255,.7), rgba(255,255,255,.38));
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.55); border-radius:16px; padding:19px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.6);
}
.kpi-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--metal-gold); background-size:200% 100%; }
.kpi-label{ font-size:11px; color:var(--text-muted); font-weight:700; }
.kpi-value{ font-family:var(--font-display); font-weight:800; font-size:23px; color:var(--ink); margin-top:5px; }
.kpi-delta{ font-size:11px; font-weight:700; margin-top:3px; }

.chart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.chart-card{
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.3));
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:19px;
  box-shadow:0 10px 26px -18px rgba(16,13,9,.3), inset 0 1px 0 rgba(255,255,255,.55);
}
.chart-card h3{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:15px; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:130px; }
.bars.months{ gap:5px; }
.bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.bar-col .bar{
  width:100%; border-radius:4px 4px 0 0; transition:height .5s var(--ease); position:relative; overflow:hidden;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 3px, transparent 3px 8px);
  background-blend-mode:overlay;
  transform-origin:bottom; animation:growBar .6s var(--ease) both;
}
.bar-col .lbl{ font-size:10px; color:var(--text-muted); font-weight:700; }
.bars.months .lbl{ font-size:8px; }

.segment-card{
  margin-top:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.3));
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.5); border-radius:16px; padding:19px;
  box-shadow:0 10px 26px -18px rgba(16,13,9,.3), inset 0 1px 0 rgba(255,255,255,.55);
}
.segment-row{ display:flex; gap:10px; }
.segment-item{ flex:1; background:#fff; border-radius:11px; padding:13px; text-align:center; border:1px solid var(--line); }
.segment-pct{ font-family:var(--font-display); font-weight:800; font-size:18px; }
.segment-label{ font-size:11px; color:var(--text-muted); font-weight:600; margin-top:2px; }

.rank-row{ display:flex; align-items:center; gap:14px; background:var(--paper); border-radius:12px; padding:14px 18px; }
.rank-n{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--crimson); width:26px; }
.rank-name{ font-size:13.5px; font-weight:700; color:var(--ink); }
.rank-sub{ font-size:11px; color:var(--text-muted); }
.rank-amount{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ink); }

.data-table{ border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.dt-head, .dt-row{ display:grid; align-items:center; }
.dt-head{ background:var(--paper); padding:12px 18px; font-size:10.5px; font-weight:800; color:var(--text-muted); letter-spacing:.04em; }
.dt-row{ padding:13px 18px; border-top:1px solid var(--line-soft); font-size:13px; }
.dt-row.clickable{ cursor:pointer; }
.dt-row.clickable:hover{ background:var(--paper); }
.dt-cell-name{ display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); }

.avail-legend{ display:flex; gap:18px; margin-top:13px; font-size:11.5px; color:var(--text-muted); align-items:center; }
.avail-legend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:6px; vertical-align:-1px; }

.crm-search-row{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.crm-search-row .input{ flex:1; min-width:220px; }

.back-link{ background:none; border:none; font-size:13px; font-weight:700; cursor:pointer; margin-bottom:16px; color:var(--navy); display:inline-flex; align-items:center; gap:6px; min-height:32px; }
.back-link:hover{ color:var(--crimson); }

.ficha-admin-head{ display:flex; gap:22px; }
.ficha-admin-avatar{ width:82px; height:82px; border-radius:50%; font-size:25px; flex-shrink:0; }
.ficha-admin-meta{ display:flex; gap:26px; margin-top:11px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
.settings-card{ background:var(--paper); border-radius:16px; padding:19px; border:1px solid var(--line); }
.settings-card-label{ font-size:12px; font-weight:700; color:var(--text-muted); margin-bottom:11px; }

.pending-row{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:14px; }
.pending-actions{ display:flex; gap:8px; }
.btn-approve{ background:var(--success-bg); color:var(--success); }
.btn-reject{ background:var(--danger-bg); color:var(--crimson); }

.matrix-table .dt-cell{ text-align:center; }
.mx-yes{ color:var(--success); font-weight:800; }
.mx-no{ color:#8E949D; }

.template-card{ background:var(--paper); border-radius:16px; padding:19px; border:1px solid var(--line); }
.template-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; gap:10px; }
.template-title{ font-size:14px; font-weight:700; color:var(--ink); }
.template-body{ background:#fff; border-radius:10px; padding:13px 15px; font-size:13px; color:#5E626A; line-height:1.55; }
.template-meta{ font-size:11px; color:var(--text-faint); margin-top:8px; }

.consolidated-empty{ text-align:center; padding:80px 20px; background:var(--paper); border-radius:18px; }
.consolidated-empty .title{ font-weight:700; color:var(--ink); font-size:15px; }
.consolidated-empty .desc{ font-size:13px; color:var(--text-muted); margin-top:7px; max-width:440px; margin:7px auto 0; line-height:1.6; }
.ghost-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; opacity:.35; }
.ghost-box{ background:#fff; border-radius:10px; height:72px; }

/* ============================================================
   PORTAL SHELL — desktop Cliente / Barbero (reuses admin-shell)
   ============================================================ */
.admin-sidebar.sidebar-light{ background:var(--paper); border-right:1px solid var(--line); }
.admin-sidebar.sidebar-light::before{ display:none; }
.admin-sidebar.sidebar-light .admin-brand-name{ color:var(--ink); }
.admin-sidebar.sidebar-light .nav-group-title{ color:var(--text-faint); }
.admin-sidebar.sidebar-light .nav-item{ color:var(--text-muted); }
.admin-sidebar.sidebar-light .nav-item svg{ opacity:.7; }
.admin-sidebar.sidebar-light .nav-item:hover{ background:var(--cream); color:var(--ink); }
.admin-sidebar.sidebar-light .nav-item[aria-current="page"]{
  background:linear-gradient(90deg, rgba(184,112,58,.13), rgba(184,112,58,.02) 80%);
  color:var(--ink); box-shadow:inset 3px 0 0 0 var(--brass);
}
.admin-sidebar.sidebar-light .nav-item[aria-current="page"] svg{ color:var(--crimson); }
.admin-sidebar.sidebar-light .nav-item[aria-current="page"] svg{ opacity:1; }

.portal-sidebar-footer{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-on-dark);
  display:flex; align-items:center; gap:10px; position:relative;
}
.sidebar-light .portal-sidebar-footer{ border-top-color:var(--line); }
.portal-user-name{ font-size:12.5px; font-weight:700; color:#fff; }
.sidebar-light .portal-user-name{ color:var(--ink); }
.portal-user-sub{ font-size:10.5px; color:#9BA1AA; }
.sidebar-light .portal-user-sub{ color:var(--text-faint); }

.portal-login-wrap{ display:flex; justify-content:center; padding:40px 20px; width:100%; }
.portal-login-card{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:24px;
  box-shadow:var(--shadow-lg); padding:8px; align-self:flex-start;
}

.portal-hero{
  background:linear-gradient(160deg, rgba(10,11,13,.90), rgba(26,28,32,.86)), url('assets/texture-hero.jpg'); background-size:cover; background-position:center; border:1px solid var(--glass-border-soft); border-radius:22px; padding:38px 42px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; box-shadow:var(--shadow-glow);
}
.portal-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0%, rgba(201,169,79,.07), transparent 60%), var(--glass-shine); opacity:.9; }
.portal-hero > div:first-child{ position:relative; flex:1; min-width:260px; }
.portal-hero .next-appt{ margin-top:0; position:relative; }

.svc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:16px; }
.svc-grid-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px;
  box-shadow:var(--shadow-card); text-align:left;
}
.svc-grid-card .svc-art-md{ margin-bottom:12px; }
.svc-grid-card-btn{ width:100%; cursor:pointer; }
.svc-grid-card-btn[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
.svc-grid-card-btn:hover:not([aria-pressed="true"]){ border-color:var(--brass); }

.agendar-desktop-grid{ display:grid; grid-template-columns:1fr 300px; gap:28px; align-items:start; }
.agendar-desktop-summary{ position:sticky; top:16px; }
@media (max-width:920px){ .agendar-desktop-grid{ grid-template-columns:1fr; } .agendar-desktop-summary{ position:static; } }

.barbero-desktop-grid{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
.barbero-desktop-side{ position:sticky; top:16px; }
@media (max-width:920px){ .barbero-desktop-grid{ grid-template-columns:1fr; } }

/* ============================================================
   MOBILE WEB FRAME — Admin viewed on mobile
   ============================================================ */
.mobile-web-frame{
  width:100%; max-width:400px; background:#fff; border-radius:28px; overflow:hidden;
  box-shadow:var(--shadow-lg), var(--frame-ring); border:1px solid var(--line); min-height:780px; display:flex; flex-direction:column;
  position:relative;
}
.mobile-web-topbar{
  background:linear-gradient(180deg, rgba(16,21,36,.96), rgba(16,13,9,.92));
  backdrop-filter:var(--glass-blur-sm); -webkit-backdrop-filter:var(--glass-blur-sm);
  border-bottom:1px solid var(--glass-border-soft);
  color:#fff; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; position:relative;
}
.mobile-web-brand{ font-family:var(--font-display); font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.mobile-web-content{
  flex:1; overflow-y:auto; padding:16px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(201,169,79,.07), transparent 55%),
    linear-gradient(175deg, rgba(250,251,252,.97), rgba(246,247,249,.95) 40%, rgba(236,238,241,.93)),
    url('assets/texture-sidebar.jpg');
  background-size:auto, auto, cover; background-position:center, center, center top;
}
.mobile-web-content:focus{ outline:none; }

.mobile-web-menu-btn{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
}
.mobile-web-menu-btn svg{ width:17px; height:17px; }
.admin-mobile-nav-overlay{ position:absolute; inset:0; background:rgba(16,13,9,.4); z-index:39; }
@keyframes slideInLeft{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
.admin-mobile-nav-panel{
  position:absolute; top:0; left:0; bottom:0; z-index:40; width:82%; max-width:300px;
  background:#fff; box-shadow:var(--shadow-lg); border-right:1px solid var(--line);
  overflow-y:auto; padding:16px 12px 24px;
  animation:slideInLeft var(--dur) var(--ease) both;
}
.admin-mobile-nav-panel-head{ display:flex; align-items:center; justify-content:space-between; padding:0 8px 14px; }
.admin-mobile-nav-panel-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); }
.admin-mobile-nav-group{ margin-bottom:6px; }
.admin-mobile-nav-group .nav-group-title{ color:var(--text-faint); padding:8px 10px 5px; }
.admin-mobile-nav-item{
  width:100%; text-align:left; padding:10px 10px; border-radius:10px; font-size:13.5px; font-weight:600;
  cursor:pointer; color:var(--text); display:flex; align-items:center; gap:10px; min-height:42px;
}
.admin-mobile-nav-item svg{ width:16px; height:16px; opacity:.7; flex-shrink:0; color:var(--text-muted); }
.admin-mobile-nav-item:hover{ background:var(--cream); }
.admin-mobile-nav-item[aria-current="page"]{
  background:linear-gradient(90deg, rgba(184,112,58,.13), rgba(184,112,58,.02) 80%);
  color:var(--ink); box-shadow:inset 3px 0 0 0 var(--brass);
}
.admin-mobile-nav-item[aria-current="page"] svg{ opacity:1; color:var(--crimson); }

.mobile-web-frame .kpi-grid{ grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.mobile-web-frame .kpi-value{ font-size:19px; }
.mobile-web-frame .chart-grid{ grid-template-columns:1fr; }
.mobile-web-frame .grid-2{ grid-template-columns:1fr; }
.mobile-web-frame .segment-row{ flex-direction:column; }
.mobile-web-frame .data-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.mobile-web-frame .dt-head, .mobile-web-frame .dt-row{ min-width:460px; }
.mobile-web-frame .ficha-admin-head{ flex-direction:column; }
.mobile-web-frame .crm-search-row{ flex-direction:column; align-items:stretch; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .admin-sidebar{ width:208px; }
}
@media (max-width:760px){
  .admin-shell{ flex-direction:column; min-height:0; max-height:none; }
  .admin-sidebar{ width:100%; flex-direction:row; flex-wrap:wrap; align-items:center; padding:14px; }
  .admin-brand{ padding:0 10px 0 0; }
  .nav-group{ margin-top:0; }
  .nav-group-title{ display:none; }
  .nav-item{ padding:8px 11px; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .chart-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .admin-content{ padding:20px 16px 32px; }
  .admin-topbar{ padding:16px 18px; }
}
@media (max-width:420px){
  .topbar{ padding:0 12px; }
  .brand-tag{ display:none; }
  .role-btn{ padding:8px 11px; }
  .kpi-grid{ grid-template-columns:1fr; }
}

/* Print: keep it clean if the demo gets exported */
@media print{
  .topbar{ position:static; }
  .phone{ box-shadow:none; }
}

/* ============================================================
   ACCESO — validación en vivo, aviso de privacidad y recuperación
   ============================================================ */
:root{
  --danger:#A8442B;
  --danger-deep:#8A351F;
}

.field-hint{ font-size:11.5px; color:var(--text-muted); margin-top:6px; line-height:1.45; }
.field-ok, .field-bad, .form-error{
  display:flex; align-items:flex-start; gap:6px;
  font-size:11.5px; font-weight:600; margin-top:6px; line-height:1.45;
}
.field-ok{ color:var(--success); }
.field-bad{ color:var(--danger); }
.field-ok svg, .field-bad svg, .form-error svg{ width:14px; height:14px; flex:0 0 14px; margin-top:1px; }
.form-error{
  background:var(--danger-bg); border:1px solid var(--danger-line); color:var(--danger-deep);
  padding:10px 12px; border-radius:var(--radius-sm); margin-top:2px; font-size:12px;
}
.input.is-ok{ border-color:var(--success); box-shadow:0 0 0 3px rgba(76,122,61,.10); }
.input.is-bad{ border-color:var(--danger-line); box-shadow:0 0 0 3px rgba(168,68,43,.09); }
.input-code{ letter-spacing:.42em; font-size:20px; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }

/* Medidor y checklist de contraseña */
.pass-feedback{ margin-top:9px; }
.pass-meter{ height:5px; border-radius:99px; background:var(--cream-deep); overflow:hidden; }
.pass-meter-fill{ display:block; height:100%; border-radius:99px; transition:width var(--dur) var(--ease), background var(--dur) var(--ease); }
.pass-weak{ background:var(--danger); }
.pass-mid{ background:var(--brass-deep); }
.pass-good{ background:var(--success); }
.pass-strong{ background:linear-gradient(90deg, var(--success), var(--brass)); }
.pass-nivel{ font-size:11px; font-weight:800; margin-top:5px; letter-spacing:.02em; }
.pass-nivel.pass-weak{ background:none; color:var(--danger); }
.pass-nivel.pass-mid{ background:none; color:var(--brass-deep); }
.pass-nivel.pass-good, .pass-nivel.pass-strong{ background:none; color:var(--success); }
.pass-rules{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px; }
.pass-rules li{ display:flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; color:var(--text-muted); }
.pass-rules li.ok{ color:var(--success); }
.pass-rules li.pending{ color:var(--text-faint); }
.rule-icon{ display:inline-flex; width:15px; height:15px; border-radius:99px; align-items:center; justify-content:center; flex:0 0 15px; }
.pass-rules li.ok .rule-icon{ background:var(--success-bg); color:var(--success); }
.pass-rules li.pending .rule-icon{ background:var(--cream-deep); color:var(--text-faint); }
.rule-icon svg{ width:9px; height:9px; stroke-width:3; }

/* Consentimiento del aviso de privacidad */
.consent-row{
  display:flex; gap:10px; align-items:flex-start;
  font-size:11.5px; line-height:1.5; color:var(--text-muted); font-weight:500;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; cursor:pointer; transition:border-color var(--dur-fast) var(--ease);
}
.consent-row:hover{ border-color:var(--brass); }
.consent-row.is-bad{ border-color:var(--danger-line); background:var(--danger-bg); }
.consent-row input[type="checkbox"]{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; accent-color:var(--crimson); cursor:pointer; }
.link-inline{
  background:none; border:0; padding:0; font:inherit; font-weight:800; color:var(--crimson);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.link-inline:hover{ color:var(--crimson-deep); }

/* Cabeceras y navegación de las pantallas de acceso */
.auth-heading{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.auth-sub{ font-size:12.5px; color:var(--text-muted); line-height:1.55; margin-top:-2px; }
.back-link{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  background:none; border:0; padding:4px 0; font-size:12px; font-weight:700; color:var(--text-muted); cursor:pointer;
}
.back-link:hover{ color:var(--ink); }
.back-link svg{ width:15px; height:15px; }
.forgot-link{ background:none; border:0; cursor:pointer; color:var(--crimson); align-self:flex-end; }

.canal-group{ border:0; padding:0; margin:0; display:grid; gap:8px; }
.canal-group legend{ font-size:12px; font-weight:800; color:var(--ink); margin-bottom:8px; padding:0; }
.canal-btn{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; font-size:13px; font-weight:700; color:var(--ink); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.canal-btn:hover{ border-color:var(--brass); }
.canal-btn[aria-pressed="true"]{ border-color:var(--ink); background:var(--cream); box-shadow:var(--shadow-xs); }
.canal-btn svg{ width:18px; height:18px; color:var(--crimson); flex:0 0 18px; }

.demo-note{
  display:flex; align-items:center; gap:7px; justify-content:center; flex-wrap:wrap;
  font-size:11px; color:var(--text-muted); background:var(--cream); border:1px dashed var(--line);
  border-radius:var(--radius-sm); padding:9px 11px; margin-top:10px; line-height:1.5; text-align:center;
}
.demo-note svg{ width:13px; height:13px; color:var(--brass-deep); flex:0 0 13px; }
.demo-note b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* Aviso de privacidad */
.aviso-wrap{ display:flex; flex-direction:column; gap:12px; width:100%; text-align:left; }
.aviso-meta{ font-size:11px; color:var(--text-faint); margin-top:-6px; }
.aviso-body{
  max-height:46vh; overflow-y:auto; padding:14px 15px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-md); box-shadow:var(--shadow-card);
}
.aviso-body p{ font-size:12px; line-height:1.65; color:var(--text-muted); margin-bottom:11px; }
.aviso-body p:last-child{ margin-bottom:0; }
.aviso-body b{ color:var(--ink); font-weight:800; }
.aviso-slot{ background:var(--brass-soft); color:var(--ink); border-radius:4px; padding:1px 5px; font-weight:700; }
.aviso-legal-note{
  display:flex; gap:7px; align-items:flex-start; font-size:11px; line-height:1.5; color:var(--danger-deep);
  background:var(--danger-bg); border:1px solid var(--danger-line); border-radius:var(--radius-sm); padding:10px 12px;
}
.aviso-legal-note svg{ width:14px; height:14px; flex:0 0 14px; margin-top:1px; }

/* ============================================================
   PERFIL — accesos y cierre de sesión
   ============================================================ */
.profile-mail{ font-size:11.5px; color:var(--text-faint); margin-top:2px; }
.profile-actions{ display:flex; flex-direction:column; gap:8px; padding:14px 22px 6px; }
.profile-action{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:13px 14px; cursor:pointer; box-shadow:var(--shadow-card);
  transition:border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.profile-action:hover{ border-color:var(--brass); transform:translateY(-1px); }
.profile-action > svg{ width:19px; height:19px; color:var(--crimson); flex:0 0 19px; }
.profile-action-label{ flex:1; min-width:0; display:block; font-size:13.5px; font-weight:800; color:var(--ink); }
.profile-action-label small{ display:block; font-size:11px; font-weight:500; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.profile-action-badge{
  background:var(--crimson); color:#fff; font-size:11px; font-weight:800;
  min-width:20px; height:20px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px;
}
.profile-action-chev{ color:var(--text-faint); font-size:18px; line-height:1; }
.profile-action-danger > svg{ color:var(--danger); }
.profile-action-danger:hover{ border-color:var(--danger-line); background:var(--danger-bg); }
.portal-logout{
  background:none; border:0; padding:6px; border-radius:9px; cursor:pointer; color:var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center;
}
.portal-logout:hover{ background:var(--cream-deep); color:var(--danger); }
.portal-logout svg{ width:17px; height:17px; }

/* ============================================================
   MIS CITAS — cancelar y reprogramar
   ============================================================ */
.next-appt-btn{ width:100%; text-align:left; cursor:pointer; border:0; }
.next-appt-cta{ font-size:11px; font-weight:800; color:var(--brass-soft); letter-spacing:.02em; white-space:nowrap; }

.citas-list{ display:flex; flex-direction:column; gap:10px; padding:12px 22px 18px; }
.cita-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 15px; box-shadow:var(--shadow-card);
  display:grid; grid-template-columns:1fr auto; gap:4px 12px; align-items:start;
}
.cita-card.is-editing{ border-color:var(--brass); box-shadow:var(--shadow-sm); }
.cita-card.is-past{ opacity:.72; box-shadow:none; }
.cita-main{ min-width:0; }
.cita-servicio{ font-size:14px; font-weight:800; color:var(--ink); line-height:1.3; }
.cita-meta{ font-size:12px; color:var(--text-muted); margin-top:3px; }
.cita-barbero{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--text-faint); margin-top:5px; font-weight:600; }
.cita-barbero svg{ width:14px; height:14px; }
.cita-precio{ font-size:14px; font-weight:800; color:var(--crimson); white-space:nowrap; }
.cita-estado{ font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:99px; white-space:nowrap; }
.cita-estado.estado-cancelada{ background:var(--danger-bg); color:var(--danger-deep); }
.cita-estado.estado-confirmada, .cita-estado.estado-reprogramada{ background:var(--success-bg); color:var(--success); }
.cita-actions{ grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cita-actions .btn{ flex:1; min-width:130px; }
.cita-confirm{
  grid-column:1 / -1; margin-top:11px; padding:12px 13px;
  background:var(--danger-bg); border:1px solid var(--danger-line); border-radius:var(--radius-sm);
}
.cita-confirm p{ font-size:12px; line-height:1.5; color:var(--danger-deep); font-weight:600; }
.cita-confirm .cita-actions{ margin-top:11px; }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger:hover{ background:var(--danger-deep); border-color:var(--danger-deep); }
.btn-ghost-danger{ background:transparent; border-color:var(--danger-line); color:var(--danger); }
.btn-ghost-danger:hover{ background:var(--danger-bg); }

.cita-reprogramar{ grid-column:1 / -1; margin-top:12px; padding-top:13px; border-top:1px dashed var(--line); }
.reprog-title{ font-size:12.5px; font-weight:800; color:var(--ink); margin-bottom:10px; }
.reprog-slots{ margin-top:12px; }
.reprog-msg{
  display:flex; gap:7px; align-items:flex-start; font-size:12px; line-height:1.5; font-weight:600;
  color:var(--text-muted); background:var(--cream); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px 12px;
}
.reprog-msg svg{ width:14px; height:14px; flex:0 0 14px; margin-top:1px; color:var(--brass-deep); }
.reprog-hint{ grid-column:1 / -1; font-size:11px; color:var(--text-faint); margin-top:8px; }
.slot-btn .slot-tag{
  display:block; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--brass-deep); margin-top:2px;
}
.slot-btn[aria-pressed="true"] .slot-tag{ color:var(--brass-soft); }

/* ============================================================
   NOTIFICACIONES — campana, panel y pop-ups
   ============================================================ */
.notif-wrap{ position:relative; display:inline-flex; }
.notif-bell{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:11px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.notif-bell:hover{ border-color:var(--brass); }
.notif-bell svg{ width:18px; height:18px; }
.notif-bell.on-dark{ background:rgba(255,255,255,.08); border-color:var(--line-on-dark); color:var(--brass-soft); width:34px; height:34px; }
.notif-bell.on-dark:hover{ background:rgba(255,255,255,.16); border-color:var(--brass); }
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px;
  border-radius:99px; background:var(--danger); color:#fff;
  font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--surface);
}
.notif-bell.on-dark .notif-badge{ box-shadow:0 0 0 2px var(--ink); }
.notif-overlay{ position:fixed; inset:0; z-index:60; background:transparent; }
.notif-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:61; width:min(340px, calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-md); overflow:hidden; text-align:left;
  animation:notifIn .2s var(--ease);
}
@keyframes notifIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.notif-panel-head{
  display:flex; align-items:center; gap:8px; padding:12px 12px 10px;
  border-bottom:1px solid var(--line); background:var(--cream);
}
.notif-panel-title{ flex:1; font-size:13px; font-weight:800; color:var(--ink); }
.notif-mark{ background:none; border:0; font-size:11px; font-weight:800; color:var(--crimson); cursor:pointer; }
.notif-mark:hover{ color:var(--crimson-deep); }
.notif-list{ max-height:340px; overflow-y:auto; }
.notif-item{ display:flex; gap:10px; padding:12px; border-bottom:1px solid var(--line-soft); }
.notif-item:last-child{ border-bottom:0; }
.notif-item.is-unread{ background:linear-gradient(90deg, rgba(201,169,79,.07), transparent); }
.notif-item-icon{
  width:28px; height:28px; flex:0 0 28px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
}
.notif-item-icon svg{ width:14px; height:14px; }
.notif-cancelacion{ background:var(--danger-bg); color:var(--danger); }
.notif-reprogramacion{ background:var(--navy-tint); color:var(--navy); }
.notif-item-body{ min-width:0; }
.notif-item-title{ font-size:12.5px; font-weight:800; color:var(--ink); line-height:1.35; }
.notif-item-text{ font-size:11.5px; color:var(--text-muted); line-height:1.5; margin-top:3px; }
.notif-item-time{ font-size:10.5px; color:var(--text-faint); margin-top:5px; font-weight:700; }
.notif-empty{ padding:26px 18px; font-size:12px; color:var(--text-muted); text-align:center; line-height:1.55; }

/* Pop-ups instantáneos */
.toast-stack{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
  pointer-events:none; max-width:min(380px, calc(100vw - 32px));
}
.toast{
  pointer-events:auto; width:100%;
  display:flex; gap:11px; align-items:flex-start;
  background:var(--ink); color:#fff; border:1px solid var(--line-on-dark);
  border-radius:var(--radius-md); padding:13px 13px 13px 14px;
  box-shadow:var(--shadow-lg), var(--frame-ring);
  animation:toastIn .3s var(--ease);
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }
.toast.toast-out{ animation:toastOut .26s var(--ease) forwards; }
@keyframes toastOut{ to{ opacity:0; transform:translateX(16px); } }
.toast-icon{
  width:30px; height:30px; flex:0 0 30px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
}
.toast-icon svg{ width:15px; height:15px; }
.toast-cancelacion .toast-icon{ background:rgba(168,68,43,.22); color:#F0A78F; }
.toast-reprogramacion .toast-icon{ background:rgba(201,169,79,.07); color:var(--brass-soft); }
.toast-body{ min-width:0; flex:1; }
.toast-dest{
  font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--brass); margin-bottom:3px;
}
.toast-title{ font-size:13px; font-weight:800; line-height:1.3; }
.toast-text{ font-size:11.5px; color:rgba(255,255,255,.74); line-height:1.5; margin-top:4px; }
.toast-close{
  background:none; border:0; color:rgba(255,255,255,.5); cursor:pointer; padding:2px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; border-radius:6px;
}
.toast-close:hover{ color:#fff; background:rgba(255,255,255,.1); }
.toast-close svg{ width:14px; height:14px; }

/* El topbar del admin móvil usa backdrop-filter, lo que crea su propio contexto
   de apilamiento: sin un z-index explícito, el panel de avisos que cuelga de la
   campana queda por debajo de las tarjetas del contenido (que también crean
   contexto por su transform). Se sube el topbar y, con él, el drawer del menú. */
.mobile-web-topbar{ z-index:45; }
.admin-mobile-nav-overlay{ z-index:48; }
.admin-mobile-nav-panel{ z-index:49; }
.admin-topbar{ position:relative; z-index:45; }

/* Dentro de los marcos angostos (teléfono del barbero, frame móvil del admin)
   el panel de 340px se salía por la izquierda y quedaba recortado por el
   overflow del marco. Ahí se ancla al encabezado completo. */
.barbero-head .notif-wrap, .mobile-web-topbar .notif-wrap{ position:static; }
.barbero-head .notif-panel, .mobile-web-topbar .notif-panel{
  left:14px; right:14px; width:auto; top:calc(100% + 8px);
}

/* Encabezado del barbero (móvil): la sede baja bajo el nombre para dejar sitio
   a la campana de avisos y al cierre de sesión sin que el pill se parta. */
.barbero-head-row{ align-items:flex-start; }
.barbero-head-sede{
  display:inline-flex; align-items:center; gap:6px; width:auto;
  margin-top:9px; white-space:nowrap;
}
.barbero-head-sede svg{ width:13px; height:13px; flex:0 0 13px; }
.barbero-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }

@media (max-width:520px){
  .toast-stack{ right:12px; left:12px; bottom:12px; max-width:none; }
  .cita-actions .btn{ min-width:0; }
}
@media (prefers-reduced-motion: reduce){
  .toast, .notif-panel{ animation:none; }
  .profile-action:hover{ transform:none; }
}

/* ============================================================
   ADMIN — Filtro de sucursal y calendario de visitas
   ============================================================ */
.sucursal-filtro{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:18px; box-shadow:var(--shadow-card);
}
.sf-label{ min-width:0; }
.sf-title{
  display:block; font-size:10px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--brass-deep);
}
.sf-sub{ display:block; font-size:12px; color:var(--text-muted); margin-top:3px; }
.sf-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
.sf-pill{
  display:flex; align-items:center; gap:9px; cursor:pointer; text-align:left;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 13px; color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.sf-pill:hover{ border-color:var(--brass); }
.sf-pill[aria-pressed="true"]{ border-color:var(--ink); background:var(--cream); box-shadow:var(--shadow-xs); }
.sf-pill svg{ width:16px; height:16px; flex:0 0 16px; color:var(--crimson); }
.sf-pill-body{ font-size:12.5px; font-weight:800; line-height:1.25; }
.sf-pill-body small{ display:block; font-size:10.5px; font-weight:500; color:var(--text-muted); margin-top:2px; }

/* Dos columnas: calendario compacto a la izquierda, detalle del día a la derecha */
.visitas-layout{ display:grid; grid-template-columns:minmax(240px,330px) minmax(0,1fr); gap:18px; align-items:start; }
.visitas-cal-col{ min-width:0; }
.visitas-detail-col{ min-width:0; }

/* Calendario compacto: celdas más chicas para que el mes entre de un vistazo */
.visitas-cal-col .calendar{ padding:14px; }
.visitas-cal-col .calendar-grid{ gap:4px; }
.visitas-day{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:38px; padding:3px 0; font-size:12px; cursor:pointer;
}
.vd-num{ font-size:12px; font-weight:700; line-height:1; }
.vd-count{
  font-size:9.5px; font-weight:800; line-height:1; padding:1px 5px; border-radius:99px;
  background:rgba(16,13,9,.10); color:var(--ink);
}
.visitas-day.n0{ background:transparent; }
.visitas-day.n1{ background:rgba(201,169,79,.07); border-color:rgba(201,169,79,.07); }
.visitas-day.n2{ background:rgba(201,169,79,.32); border-color:rgba(201,169,79,.40); }
.visitas-day.n3{ background:rgba(184,112,58,.42); border-color:rgba(184,112,58,.52); }
.visitas-day.n4{ background:rgba(143,90,44,.62); border-color:rgba(143,90,44,.7); color:#fff; }
.visitas-day.n4 .vd-count{ background:rgba(255,255,255,.28); color:#fff; }
.visitas-day.is-selected{
  background:var(--ink); border-color:var(--ink); color:#fff;
  box-shadow:0 0 0 2px var(--brass);
}
.visitas-day.is-selected .vd-count{ background:rgba(255,255,255,.24); color:#fff; }
.visitas-day:disabled{ cursor:not-allowed; }

.visitas-legend{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  margin-top:12px; font-size:10.5px; color:var(--text-muted); font-weight:600;
}
.vl-scale{ display:inline-flex; gap:2px; }
.vl-scale i{ width:13px; height:13px; border-radius:4px; display:block; }
.vl-scale i.n0{ background:var(--cream-deep); }
.vl-scale i.n1{ background:rgba(201,169,79,.07); }
.vl-scale i.n2{ background:rgba(201,169,79,.32); }
.vl-scale i.n3{ background:rgba(184,112,58,.42); }
.vl-scale i.n4{ background:rgba(143,90,44,.62); }
.vl-sep{ width:1px; height:13px; background:var(--line); }
.visitas-legend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; vertical-align:-1px; margin-right:3px; }

.visitas-mes-resumen{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:14px;
}
.visitas-mes-resumen > div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:11px 10px; text-align:center; box-shadow:var(--shadow-card);
}
.visitas-mes-resumen b{ display:block; font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--ink); }
.visitas-mes-resumen span{ display:block; font-size:10px; color:var(--text-muted); margin-top:3px; line-height:1.3; }

/* Panel de detalle del día */
.visitas-detalle{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.vd-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border-bottom:1px solid var(--line); background:var(--cream);
}
.vd-eyebrow{
  font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-deep);
}
.vd-title{ font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--ink); margin-top:3px; text-transform:capitalize; }
.vd-kpis{ display:flex; gap:16px; }
.vd-kpis span{ font-size:10.5px; color:var(--text-muted); text-align:right; }
.vd-kpis b{ display:block; font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--ink); }

.vd-empty{
  display:flex; align-items:center; gap:12px; padding:30px 20px; color:var(--text-muted);
}
.vd-empty svg{ width:22px; height:22px; color:var(--brass-deep); flex:0 0 22px; }
.vd-empty b{ display:block; font-size:13px; color:var(--ink); }
.vd-empty span{ display:block; font-size:12px; margin-top:2px; line-height:1.5; }

.vd-grupos{ display:flex; flex-direction:column; }
.vd-grupo{ border-bottom:1px solid var(--line-soft); }
.vd-grupo:last-child{ border-bottom:0; }
.vd-grupo-head{
  display:flex; align-items:center; gap:10px; padding:11px 18px; background:var(--paper);
}
.vd-grupo-name{ flex:1; min-width:0; font-size:13px; font-weight:800; color:var(--ink); }
.vd-grupo-count{ font-size:11px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.vd-grupo-money{ font-size:12.5px; font-weight:800; color:var(--crimson); white-space:nowrap; }
.vd-citas{ display:flex; flex-direction:column; }
.vd-cita{
  display:grid; grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.4fr) auto;
  gap:10px; align-items:center; padding:9px 18px; font-size:12px;
  border-top:1px solid var(--line-soft);
}
.vd-cita.is-live{ background:var(--success-bg); }
.vd-hora{ font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.vd-cliente{ font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-servicio{ color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vd-precio{ font-weight:700; color:var(--crimson); text-align:right; white-space:nowrap; }
.vd-libres{ padding:11px 18px; font-size:11px; color:var(--text-faint); border-top:1px solid var(--line-soft); }

@media (max-width:1080px){
  .visitas-layout{ grid-template-columns:1fr; }
  .visitas-cal-col{ max-width:420px; }
}
@media (max-width:760px){
  .sucursal-filtro{ flex-direction:column; align-items:stretch; gap:12px; }
  .sf-pills{ margin-left:0; }
  .sf-pill{ flex:1; min-width:140px; }
  .vd-cita{ grid-template-columns:50px minmax(0,1fr) auto; }
  .vd-servicio{ grid-column:2 / -1; grid-row:2; font-size:11px; }
}

/* ============================================================
   PRODUCCIÓN POR BARBERO — cortes vs producto
   ============================================================ */
.prod-totales{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px;
}
.prod-totales > div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 15px; box-shadow:var(--shadow-card);
}
.prod-totales b{ display:block; font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--ink); }
.prod-totales span{ display:block; font-size:11px; color:var(--text-muted); margin-top:3px; }

.prod-lista{ display:flex; flex-direction:column; gap:10px; }
.prod-row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; box-shadow:var(--shadow-card);
}
.prod-head{ display:flex; align-items:center; gap:12px; }
.prod-bar{
  display:flex; height:9px; border-radius:99px; overflow:hidden; margin-top:12px; background:var(--cream-deep);
}
.prod-bar-cortes{ background:var(--crimson); }
.prod-bar-prod{ background:var(--brass); }
.prod-desglose{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:9px; font-size:11.5px; color:var(--text-muted); font-weight:600;
}
.prod-desglose em{ font-style:normal; color:var(--text-faint); }
.sw-cortes, .sw-prod{
  display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px;
}
.sw-cortes{ background:var(--crimson); }
.sw-prod{ background:var(--brass); }

/* ============================================================
   FICHA DEL CLIENTE — gasto, referidos y registro visual
   ============================================================ */
.gasto-split{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; margin-bottom:14px;
}
.gasto-bar{ display:flex; height:9px; border-radius:99px; overflow:hidden; background:var(--cream-deep); }
.gasto-bar-cortes{ background:var(--crimson); }
.gasto-bar-prod{ background:var(--brass); }
.gasto-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:9px; font-size:11.5px; color:var(--text-muted); }
.gasto-legend b{ color:var(--ink); font-weight:800; }

.ficha-fotos-head, .ficha-hist-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; font-weight:700; color:var(--text-muted); margin:16px 0 4px;
}
.ficha-fotos-head small{ font-size:11px; font-weight:700; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.ficha-fotos-nota{ font-size:10.5px; color:var(--text-faint); line-height:1.45; margin-bottom:9px; }
.ficha-filtro{ padding:3px; }
.ficha-filtro .pill-btn{ font-size:11px; padding:5px 11px; min-height:0; }

.foto-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:9px; }
.foto-item{
  position:relative; margin:0; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--cream); box-shadow:var(--shadow-card);
}
.foto-item img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
.foto-item figcaption{
  font-size:9.5px; font-weight:700; color:var(--text-muted);
  padding:5px 6px; text-align:center; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.foto-del{
  position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:8px; cursor:pointer;
  background:rgba(16,13,9,.62); border:1px solid rgba(255,255,255,.16); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
}
.foto-del:hover{ background:var(--danger); }
.foto-del svg{ width:12px; height:12px; }
.foto-add{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  aspect-ratio:3/4; cursor:pointer; text-align:center;
  border:1.5px dashed var(--line); border-radius:var(--radius-sm); background:var(--cream);
  font-size:10.5px; font-weight:700; color:var(--text-muted); padding:8px;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.foto-add:hover{ border-color:var(--brass); color:var(--ink); }
.foto-add svg{ width:22px; height:22px; color:var(--brass-deep); }

.foto-cobro{
  display:flex; align-items:center; gap:10px; cursor:pointer; margin-top:11px;
  background:var(--surface); border:1.5px dashed var(--brass); border-radius:var(--radius-sm);
  padding:11px 12px; text-align:left;
  transition:background var(--dur-fast) var(--ease);
}
.foto-cobro:hover{ background:var(--cream); }
.foto-cobro svg{ width:19px; height:19px; color:var(--brass-deep); flex:0 0 19px; }
.foto-cobro span{ font-size:12px; font-weight:800; color:var(--ink); line-height:1.3; }
.foto-cobro small{ display:block; font-size:10.5px; font-weight:500; color:var(--text-muted); margin-top:2px; }

.tipo-tag{ font-weight:800; padding:1px 5px; border-radius:4px; font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.tipo-corte{ background:var(--crimson-tint); color:var(--crimson-deep); }
.tipo-prod{ background:var(--brass-soft); color:var(--brass-deep); }

/* ============================================================
   ADMIN — Disponibilidad: cobertura del equipo
   ============================================================ */
.dispo-kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px;
}
.dispo-kpis > div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:13px 15px; box-shadow:var(--shadow-card);
}
.dispo-kpis b{ display:block; font-family:var(--font-display); font-size:20px; font-weight:800; color:var(--ink); }
.dispo-kpis span{ display:block; font-size:11px; color:var(--text-muted); margin-top:3px; line-height:1.35; }

.dispo-layout{ display:grid; grid-template-columns:minmax(240px,330px) minmax(0,1fr); gap:18px; align-items:start; }
.dispo-cal-col, .dispo-detalle-col{ min-width:0; }

/* Calendario compacto de cobertura */
.dispo-cal-col .calendar{ padding:14px; }
.dispo-cal-col .calendar-grid{ gap:4px; }
.dispo-day{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; min-height:38px; padding:3px 0; cursor:pointer;
}
.dd-num{ font-size:12px; font-weight:700; line-height:1; }
.dd-cob{ font-size:8.5px; font-weight:800; line-height:1; opacity:.8; font-variant-numeric:tabular-nums; }
.dispo-day.cob-full{ background:rgba(76,122,61,.16); border-color:rgba(76,122,61,.30); }
.dispo-day.cob-part{ background:rgba(201,169,79,.07); border-color:rgba(201,169,79,.38); }
.dispo-day.cob-none{ background:var(--danger-bg); border-color:var(--danger-line); color:var(--danger-deep); }
.dispo-day.is-selected{ background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 0 0 2px var(--brass); }
.dd-dot{
  position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:99px; background:var(--brass-deep);
}
.dispo-day.is-selected .dd-dot{ background:var(--brass-soft); }

.dispo-legend{
  display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:12px;
  font-size:10.5px; color:var(--text-muted); font-weight:600;
}
.dispo-legend i{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:4px; vertical-align:-1px; }
.lg-full{ background:rgba(76,122,61,.30); }
.lg-part{ background:rgba(201,169,79,.40); }
.lg-none{ background:var(--danger-line); }
.lg-closed{ background:var(--cream-deep); }
.lg-dot{ background:var(--brass-deep); border-radius:99px !important; width:7px !important; height:7px !important; }

/* Detalle del día */
.dispo-detalle{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.dd-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border-bottom:1px solid var(--line); background:var(--cream);
}
.dd-cob-badge{
  font-size:11px; font-weight:800; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:99px; padding:5px 11px; white-space:nowrap;
}
.dd-filas{ display:flex; flex-direction:column; }
.dd-fila{
  display:flex; align-items:flex-start; gap:11px; padding:12px 18px; border-top:1px solid var(--line-soft);
}
.dd-fila:first-child{ border-top:0; }
.dd-fila.is-off{ background:var(--cream); }
.dd-fila-body{ flex:1; min-width:0; }
.dd-fila-name{ font-size:13px; font-weight:800; color:var(--ink); }
.dd-fila-sub{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.dd-bloqueos{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.dd-bloqueo{
  font-size:10px; font-weight:700; padding:3px 7px; border-radius:6px;
  background:var(--brass-soft); color:var(--brass-deep); border:1px dashed var(--brass);
}
.dd-estado{
  font-size:10px; font-weight:800; padding:4px 9px; border-radius:99px; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.04em;
}
.st-trabaja{ background:var(--success-bg); color:var(--success); }
.st-descanso{ background:var(--danger-bg); color:var(--danger-deep); }
.st-cerrado{ background:var(--cream-deep); color:var(--text-muted); }

/* Matriz equipo × días */
.dispo-matriz-wrap{
  margin-top:18px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden;
}
.dispo-matriz-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line); background:var(--cream);
  font-size:13px; font-weight:800; color:var(--ink);
}
.dispo-matriz-head small{ font-size:11px; font-weight:500; color:var(--text-muted); }
.dm-mes{ text-transform:capitalize; }
.dispo-matriz-scroll{ overflow-x:auto; }
.dispo-matriz{ border-collapse:separate; border-spacing:0; width:100%; }
.dm-esquina, .dm-barbero{
  position:sticky; left:0; z-index:2; background:var(--surface);
  text-align:left; padding:7px 12px; border-right:1px solid var(--line);
}
.dm-esquina{
  font-size:9.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-faint); background:var(--cream);
}
.dm-barbero{ font-size:11.5px; font-weight:700; color:var(--ink); white-space:nowrap; min-width:118px; }
.dm-barbero-in{ display:flex; align-items:center; gap:7px; }
.dm-dia{ padding:5px 0 6px; min-width:22px; }
.dm-dow{ display:block; font-size:8px; font-weight:700; color:var(--text-faint); text-transform:uppercase; }
.dm-num{ display:block; font-size:10px; font-weight:700; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.dm-dia.is-today .dm-num{ color:var(--crimson); }
.dm-dia.is-selected{ background:var(--cream); }
.dm-dia.is-selected .dm-num{ color:var(--ink); }
.dm-celda{ padding:2px; text-align:center; }
.dm-mark{
  position:relative; display:block; width:100%; min-width:18px; height:20px; border-radius:5px;
  border:1px solid transparent; cursor:pointer;
}
.dm-mark.st-trabaja{ background:rgba(76,122,61,.26); }
.dm-mark.st-descanso{ background:var(--danger-line); }
.dm-mark.st-cerrado{ background:var(--cream-deep); cursor:not-allowed; }
.dm-mark:not(:disabled):hover{ border-color:var(--ink); }
.dm-mark.is-selected{ box-shadow:0 0 0 2px var(--brass); }
.dm-dot{
  position:absolute; top:2px; right:2px; width:4px; height:4px; border-radius:99px; background:var(--brass-deep);
}

@media (max-width:1080px){
  .dispo-layout{ grid-template-columns:1fr; }
  .dispo-cal-col{ max-width:400px; }
}
@media (max-width:760px){
  .dm-barbero{ min-width:96px; }
}

/* Los calendarios compactos (Visitas y Disponibilidad) heredaban `aspect-ratio:1`
   de .calendar-day; combinado con el min-height de 38px eso les imponía también
   38px de ancho mínimo, así que las 7 columnas pedían 290px dentro de una
   columna de 270px útiles y el grid se recortaba por la derecha. Se libera el
   ancho: alto fijo, ancho fluido. */
.visitas-cal-col .calendar-grid, .visitas-cal-col .calendar-weekdays,
.dispo-cal-col .calendar-grid, .dispo-cal-col .calendar-weekdays{
  grid-template-columns:repeat(7, minmax(0, 1fr));
}
.visitas-day, .dispo-day{ aspect-ratio:auto; min-width:0; }
.visitas-cal-col .calendar, .dispo-cal-col .calendar{ padding:14px 12px; }
.vd-count, .dd-cob{ max-width:100%; overflow:hidden; }

/* El marco móvil del Admin es angosto sin importar el ancho del viewport, así
   que las media queries no bastan: dentro de él hay que forzar la disposición
   de una columna igual que en pantallas chicas. */
.mobile-web-frame .visitas-layout,
.mobile-web-frame .dispo-layout{ grid-template-columns:minmax(0,1fr); }
.mobile-web-frame .visitas-cal-col,
.mobile-web-frame .dispo-cal-col{ max-width:none; }
.mobile-web-frame .sucursal-filtro{ flex-direction:column; align-items:stretch; gap:12px; }
.mobile-web-frame .sf-pills{ margin-left:0; }
.mobile-web-frame .sf-pill{ flex:1; min-width:0; }
.mobile-web-frame .vd-cita{ grid-template-columns:46px minmax(0,1fr) auto; }
.mobile-web-frame .vd-servicio{ grid-column:2 / -1; grid-row:2; font-size:11px; }
.mobile-web-frame .dispo-kpis,
.mobile-web-frame .prod-totales,
.mobile-web-frame .visitas-mes-resumen{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mobile-web-frame .dm-barbero{ min-width:88px; }
.mobile-web-frame .vd-kpis{ gap:12px; }

/* Al colapsar a una columna el calendario tendía a estirarse a todo el ancho
   (celdas de 91px), justo lo que se quería evitar. Se mantiene compacto y
   alineado a la izquierda en cualquier ancho. */
.visitas-cal-col, .dispo-cal-col{ max-width:400px; }
.mobile-web-frame .visitas-cal-col,
.mobile-web-frame .dispo-cal-col{ max-width:100%; }

/* Con duraciones reales (30/60/90 min) la hora de inicio ya no basta:
   se muestra también a qué hora se libera la silla. */
.agenda-hasta{ font-size:9.5px; font-weight:700; color:var(--text-faint); margin-top:1px; }
.vd-hora small{ display:block; font-size:9.5px; font-weight:700; color:var(--text-faint); margin-top:1px; }

/* ============================================================
   ADMIN — Catálogo editable
   ============================================================ */
.horario-card{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; margin-bottom:16px; box-shadow:var(--shadow-card);
}
.horario-info{ flex:1; min-width:200px; }
.horario-valor{
  display:block; font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--ink); margin:3px 0 2px;
}
.horario-form{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.horario-form .input{ width:auto; min-width:104px; }
.horario-form span{ font-size:12px; color:var(--text-muted); font-weight:700; }

.cat-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.cat-tab{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:9px 14px; font-size:12.5px; font-weight:800; color:var(--ink);
}
.cat-tab:hover{ border-color:var(--brass); }
.cat-tab[aria-pressed="true"]{ border-color:var(--ink); background:var(--cream); box-shadow:var(--shadow-xs); }
.cat-tab small{
  font-size:10.5px; font-weight:800; background:var(--cream-deep); color:var(--text-muted);
  border-radius:99px; padding:2px 7px;
}
.cat-tab[aria-pressed="true"] small{ background:var(--ink); color:#fff; }
.cat-tab-desc{ font-size:11.5px; color:var(--text-muted); margin-bottom:14px; }

.cat-lista{ display:flex; flex-direction:column; gap:8px; }
.cat-fila{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 14px; box-shadow:var(--shadow-card);
}
.cat-fila-main{ flex:1; min-width:160px; }
.cat-nombre{ font-size:13.5px; font-weight:800; color:var(--ink); }
.cat-detalle{ font-size:11px; color:var(--text-muted); margin-top:2px; line-height:1.4; }
.cat-dur{ font-size:12px; font-weight:700; color:var(--text-muted); text-align:right; white-space:nowrap; }
.cat-dur small{ display:block; font-size:10px; font-weight:600; color:var(--text-faint); margin-top:1px; }
.cat-precio{ font-size:14px; font-weight:800; color:var(--crimson); min-width:64px; text-align:right; }
.cat-btns{ display:flex; gap:4px; }
.cat-btn{ min-height:32px; min-width:32px; border-radius:9px; color:var(--navy); }
.cat-btn svg{ width:15px; height:15px; }
.cat-btn:hover{ background:var(--cream); }
.cat-btn-del{ color:var(--danger); }
.cat-btn-del:hover{ background:var(--danger-bg); }

.cat-form{
  background:var(--cream); border:1.5px solid var(--brass); border-radius:var(--radius-sm);
  padding:14px; box-shadow:var(--shadow-sm);
}
.cat-form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.cat-field-ancho{ grid-column:1 / -1; }
.cat-form-btns{ display:flex; gap:8px; margin-top:13px; flex-wrap:wrap; }

.cat-acciones{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.cat-nota{
  display:flex; gap:7px; align-items:flex-start; margin-top:12px;
  font-size:11px; line-height:1.5; color:var(--text-muted);
  background:var(--cream); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:10px 12px;
}
.cat-nota svg{ width:14px; height:14px; flex:0 0 14px; margin-top:1px; color:var(--brass-deep); }

.mobile-web-frame .cat-form-grid{ grid-template-columns:1fr; }
.mobile-web-frame .cat-fila{ gap:10px; }

/* El oro entra como filo, no como lavado: una línea fina en el borde inferior
   de los paneles oscuros en lugar de un resplandor difuso. */
.home-hero, .portal-hero, .barbero-head, .refer-code-card, .progress-card{
  border-bottom:1px solid rgba(201,169,79,.34);
}

/* ============================================================
   LEGIBILIDAD — nada de texto por debajo de 10.5px
   ------------------------------------------------------------
   Varias vistas densas habían bajado a 8–9.5px, ilegible en un
   teléfono. Se sube el piso y se llevan los objetivos táctiles al
   mínimo de WCAG 2.2 AA (24×24px; los 44px de Apple son AAA).
   ============================================================ */
.dm-dow{ font-size:10.5px; }
.dm-num{ font-size:11px; }
.dm-esquina{ font-size:10.5px; }
.agenda-status{ font-size:10.5px; }
.agenda-hasta{ font-size:11px; }
.dd-cob{ font-size:10.5px; }
.vd-count{ font-size:10.5px; }
.vd-hora small{ font-size:10.5px; }
.toast-dest{ font-size:10.5px; }
.foto-item figcaption{ font-size:10.5px; }
.ficha-fotos-nota{ font-size:11px; }
.cita-estado{ font-size:11px; }
.dd-estado{ font-size:10.5px; }
.notif-item-time{ font-size:11px; }
.visitas-legend, .dispo-legend{ font-size:11px; }
.visitas-mes-resumen span{ font-size:11px; }
.cat-tab small{ font-size:11px; }
.cat-detalle, .cat-dur small{ font-size:11px; }
.vd-eyebrow, .sf-title{ font-size:10.5px; }
.prod-desglose{ font-size:12px; }
.dd-bloqueo{ font-size:11px; }
.tipo-tag{ font-size:10px; }
.demo-note, .cat-nota, .aviso-legal-note, .aviso-meta{ font-size:11.5px; }
.field-hint, .field-ok, .field-bad, .pass-rules li, .pass-nivel{ font-size:12px; }
.profile-action-label small{ font-size:11.5px; }
.svc-line-dur, .rank-sub{ font-size:12px; }

/* Objetivos táctiles: mínimo 24px en todo lo que se toca. */
.dm-mark{ height:24px; min-width:24px; }
.dm-dia{ min-width:24px; }
.btn-xs{ min-height:26px; }
.foto-del{ width:26px; height:26px; }
.cal-nav{ width:34px; height:34px; }

/* Confirmación en línea antes de borrar — mismo lenguaje que cancelar cita. */
.confirm-inline{
  grid-column:1 / -1; flex-basis:100%; margin-top:11px; padding:11px 12px;
  background:var(--danger-bg); border:1px solid var(--danger-line); border-radius:var(--radius-sm);
}
.confirm-inline p{ font-size:12px; line-height:1.5; color:var(--danger-deep); font-weight:600; }
.confirm-inline b{ font-weight:800; }
.confirm-aviso{ display:block; margin-top:3px; font-weight:500; color:var(--text-muted); font-size:11.5px; }
.confirm-btns{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.foto-confirm{
  position:absolute; inset:auto 0 0 0; display:flex; align-items:center; justify-content:center; gap:5px;
  background:rgba(12,13,15,.86); padding:7px 5px; backdrop-filter:blur(4px);
}
.foto-confirm span{ font-size:10.5px; font-weight:800; color:#fff; }
.foto-confirm .btn{ min-height:24px; padding:3px 9px; font-size:10.5px; }

/* Atajo "como la última vez": el camino corto del cliente frecuente. */
.repetir-card{
  display:flex; align-items:center; gap:12px; margin:16px 22px 4px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:12px 13px; box-shadow:var(--shadow-card);
  border-left:3px solid var(--brass);
}
.repetir-foto{
  width:52px; height:64px; flex:0 0 52px; border-radius:10px; object-fit:cover; border:1px solid var(--line);
}
.repetir-art{ flex:0 0 52px; }
.repetir-art .svc-art{ width:52px; height:64px; }
.repetir-body{ flex:1; min-width:0; }
.repetir-eyebrow{
  font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-deep);
}
.repetir-nombre{ font-size:14px; font-weight:800; color:var(--ink); margin-top:2px; line-height:1.25; }
.repetir-meta{ font-size:11.5px; color:var(--text-muted); margin-top:3px; }
.repetir-btn{ flex-shrink:0; }
.admin-shell .repetir-card{ margin:0 0 18px; }

/* Pestañas de sección del admin */
.admin-subtabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.admin-subtab{
  background:transparent; border:0; border-bottom:2px solid transparent; cursor:pointer;
  padding:7px 2px; margin-right:10px; font-size:13px; font-weight:700; color:var(--text-muted);
  min-height:32px;
}
.admin-subtab:hover{ color:var(--ink); }
.admin-subtab[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--brass); }
.mobile-web-content .admin-subtabs{ margin-bottom:14px; }
/* "Hoy" en la navegación de día del barbero estaba a 10px. */
.day-nav-today{ font-size:11px; }

/* En el ancho del teléfono la tarjeta se apretaba y partía el rótulo y el
   precio en dos líneas: el botón baja a su propia fila. */
.repetir-card{ flex-wrap:wrap; }
.repetir-eyebrow{ letter-spacing:.05em; white-space:nowrap; }
.repetir-meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.phone .repetir-btn, .mobile-web-frame .repetir-btn{ flex:1 0 100%; margin-top:2px; }

/* ============================================================
   ADMIN — Datos del negocio (Ronda 18)
   Los campos que alimentan la landing page y el aviso de privacidad.
   ============================================================ */
.neg-alerta{
  display:flex; gap:11px; align-items:flex-start;
  padding:13px 15px; border-radius:12px; margin-bottom:16px;
  font-size:13.5px; line-height:1.5;
  border:1px solid var(--line); background:var(--cream);
}
.neg-alerta svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; color:var(--brass); }
.neg-alerta b{ display:block; margin-bottom:2px; color:var(--ink); }
.neg-alerta.is-ok{ border-color:rgba(76,122,61,.3); background:rgba(76,122,61,.07); }
.neg-alerta.is-ok svg{ color:var(--success); }
.neg-alerta.is-bad{ border-color:var(--danger-line); background:rgba(168,68,43,.07); }
.neg-alerta.is-bad svg{ color:var(--danger); }

.neg-bloque{
  background:var(--paper); border:1px solid var(--line); border-radius:16px;
  padding:19px; margin-bottom:16px;
}
.neg-bloque .section-title{ margin-bottom:4px; }
.neg-ayuda{ font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:0 0 15px; }
.neg-ayuda-inline{ display:block; font-size:11.5px; color:var(--text-muted); line-height:1.45; margin-top:3px; }
.neg-ayuda code{ font-size:11.5px; background:var(--cream-deep); padding:1px 5px; border-radius:4px; }

/* ============================================================
   EDITOR DE CONTENIDO DE LA LANDING
   ------------------------------------------------------------
   Lista de bloques plegables. Cerrado, cada bloque enseña lo que
   dice hoy la página; abierto, sus campos. Sólo uno a la vez.

   La barra de guardar es `sticky` al fondo del panel: con siete
   bloques desplegables el botón se iba fuera de pantalla justo
   cuando hacía falta.
   ============================================================ */
.cms-lista{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }

.cms-bloque{
  background:var(--paper); border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  transition:border-color 180ms ease, background-color 180ms ease;
}
.cms-bloque.is-abierto{ background:var(--surface); border-color:var(--brass); }
.cms-bloque.is-bloqueado{ background:var(--cream); }

.cms-cabeza{ display:flex; align-items:stretch; gap:0; margin:0; font-size:inherit; font-weight:inherit; }

.cms-toggle{
  flex:1 1 auto; min-width:0; min-height:52px;
  display:flex; align-items:center; gap:10px;
  padding:12px 6px 12px 14px; text-align:left;
  background:transparent; border:0; cursor:pointer; color:var(--text);
  font-family:inherit; font-size:13.5px;
}
.cms-toggle:hover{ background:rgba(201,169,79,.07); }
.cms-chevron{
  width:15px; height:15px; flex:none; color:var(--text-faint);
  transition:transform 200ms ease;
}
.cms-bloque.is-abierto .cms-chevron{ transform:rotate(90deg); }
.cms-icono{ width:16px; height:16px; flex:none; color:var(--brass-deep); }
.cms-nombre{ font-weight:800; flex:none; }
.cms-resumen{
  flex:1 1 auto; min-width:0; text-align:right;
  color:var(--text-muted); font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cms-bloque.is-abierto .cms-resumen{ opacity:0; }

.cms-candado{
  flex:none; width:46px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-left:1px solid var(--line);
  color:var(--text-faint); cursor:pointer;
}
.cms-candado svg{ width:16px; height:16px; }
.cms-candado:hover{ background:rgba(201,169,79,.1); color:var(--crimson); }
.cms-candado[aria-pressed="true"]{ color:var(--crimson); background:var(--crimson-tint); }

.cms-cuerpo{ padding:2px 16px 18px; }
.cms-candado-aviso{
  display:flex; gap:9px; align-items:flex-start; margin:8px 0 0;
  padding:10px 12px; border-radius:10px;
  background:var(--crimson-tint); border:1px solid rgba(126,99,26,.24);
  color:var(--crimson-deep); font-size:12.5px; line-height:1.5;
}
.cms-candado-aviso svg{ width:15px; height:15px; flex:none; margin-top:2px; }

/* Fichas: credenciales, pilares y preguntas comparten forma. */
.cms-rejilla{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:12px; }
.cms-ficha{
  position:relative; padding:14px; border-radius:12px;
  background:var(--paper); border:1px solid var(--line);
}
.cms-bloque.is-abierto .cms-ficha{ background:var(--cream); }
.cms-ficha-ancha{ margin-bottom:12px; }
.cms-ficha-num{
  display:inline-block; margin-bottom:8px;
  font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--brass-deep);
  font-variant-numeric:tabular-nums;
}
.cms-ficha-cabeza{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.cms-ficha-cabeza .cms-ficha-num{ margin-bottom:0; }
.cms-ficha-titulo{
  flex:1 1 auto; min-width:0; font-weight:700; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Imágenes */
.cms-imagenes{ display:flex; flex-direction:column; gap:16px; }
.cms-imagen{
  display:grid; grid-template-columns:minmax(0, 210px) minmax(0, 1fr); gap:16px;
  padding:14px; border-radius:12px; background:var(--cream); border:1px solid var(--line);
}
@media (max-width:720px){ .cms-imagen{ grid-template-columns:1fr; } }
.cms-imagen-vista{
  position:relative; aspect-ratio:16/10; max-width:100%;
  border-radius:10px; overflow:hidden; background:var(--ink-soft);
  border:1px solid var(--line);
}
.cms-imagen-vista img{ width:100%; height:100%; object-fit:cover; display:block; }
.cms-imagen-marca{
  position:absolute; left:8px; top:8px;
  padding:2px 8px; border-radius:99px;
  font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(12,13,15,.78); color:#EDEFF2;
}
.cms-imagen-marca.is-propia{ background:var(--crimson); color:#fff; }
.cms-imagen-datos h4{ margin:0 0 3px; font-size:14px; font-weight:800; }
.cms-imagen-datos .neg-ayuda{ margin-bottom:12px; }
.cms-imagen-btns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
/* El botón de subir es una <label> con el input escondido dentro: así
   se ve como los demás botones sin pelearse con el estilo nativo. */
.cms-imagen-btns label{ cursor:pointer; }
.cms-imagen-btns label.is-off{ opacity:.5; cursor:not-allowed; }

/* Subtítulos dentro del bloque de imágenes */
.cms-subtitulo{
  margin:22px 0 3px; font-size:13px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--text);
}
.cms-subtitulo:first-child{ margin-top:6px; }

/* Medidor de espacio. Mientras las fotos vivan en el navegador comparten
   presupuesto con las citas y los clientes, y no hay forma de que el
   negocio lo sepa si no se le enseña. */
.cms-medidor{
  display:flex; flex-direction:column; gap:7px;
  padding:12px 14px; margin:4px 0 6px; border-radius:11px;
  background:var(--cream); border:1px solid var(--line);
}
.cms-medidor p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text-muted); }
.cms-medidor b{ color:var(--text); font-variant-numeric:tabular-nums; }
.cms-medidor-pista{
  height:6px; border-radius:99px; overflow:hidden;
  background:var(--cream-deep);
}
.cms-medidor-pista span{ display:block; height:100%; background:var(--brass); border-radius:99px; }
.cms-medidor.is-apretado{ background:var(--danger-bg); border-color:var(--danger-line); }
.cms-medidor.is-apretado .cms-medidor-pista span{ background:#B4462F; }

/* Una fila por servicio del catálogo */
.cms-svcs{ display:flex; flex-direction:column; gap:8px; }
.cms-svc{
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; align-items:center;
  padding:10px; border-radius:11px;
  background:var(--cream); border:1px solid var(--line);
}
.cms-svc.is-propia{ border-color:var(--brass); }
.cms-svc-vista{
  width:72px; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
  background:var(--ink-soft); border:1px solid var(--line);
}
.cms-svc-vista img{ width:100%; height:100%; object-fit:cover; display:block; }
/* El arte por defecto viene con su propio tamaño; aquí se encaja en la
   miniatura sin tocar el componente que usa el resto de la plataforma. */
.cms-svc-vista .svc-art{ width:100%; height:100%; border-radius:0; }
.cms-svc-datos{ min-width:0; display:flex; flex-direction:column; gap:7px; }
.cms-svc-cabeza{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cms-svc-nombre{ font-weight:700; font-size:13px; }
.cms-svc-estado{
  margin-right:auto; font-size:11.5px; color:var(--text-muted);
  white-space:nowrap;
}
.cms-svc.is-propia .cms-svc-estado{ color:var(--crimson-deep); font-weight:700; }
.cms-svc .field{ margin:0; }
.cms-svc .input{ font-size:12.5px; }
@media (max-width:560px){
  .cms-svc{ grid-template-columns:1fr; }
  .cms-svc-vista{ width:100%; max-width:180px; }
  .cms-svc-estado{ margin-right:0; }
}

/* Diálogo de cambiar la propia contraseña */
.modal-fondo{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(12,13,15,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.modal-caja{
  width:min(26rem, 100%); max-height:88vh; overflow-y:auto;
  padding:22px; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
  box-shadow:0 30px 70px -30px rgba(12,13,15,.6);
}
.form-ok{
  display:flex; gap:7px; align-items:flex-start; margin:10px 0 0;
  font-size:12.5px; line-height:1.5; color:var(--success);
}
.form-ok svg{ width:15px; height:15px; flex:none; margin-top:2px; }

/* Poner una contraseña concreta desde Equipo */
.plant-poner{
  padding:12px 13px; margin-bottom:11px; border-radius:10px;
  background:var(--surface); border:1px solid var(--brass);
}

/* Estado vacío de Equipo y sedes */
.plant-primero{
  padding:40px 28px; text-align:center; border-radius:16px;
  background:var(--surface); border:1px solid var(--line);
}
.plant-primero svg{ width:30px; height:30px; color:var(--brass-deep); }
.plant-primero h3{ margin:12px 0 6px; font-size:18px; font-weight:800; }
.plant-primero p{
  margin:0 auto 18px; max-width:44ch;
  font-size:13px; line-height:1.65; color:var(--text-muted);
}

/* Aviso de primer arranque con las contraseñas temporales. Se enseña una
   sola vez, así que tiene que ser imposible de pasar por alto. */
.claves-iniciales{
  margin-top:14px; padding:14px 16px; border-radius:12px;
  background:var(--crimson-tint); border:1px solid var(--brass);
  text-align:left;
}
/* Sólo el título del recuadro, no cualquier negrita que haya dentro: la
   regla general partía en dos las frases del texto. */
.claves-iniciales > b{ display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text); }
.claves-iniciales > b svg{ width:15px; height:15px; color:var(--crimson); }
.claves-iniciales p{ margin:5px 0 10px; font-size:12px; color:var(--text-muted); line-height:1.5; }
.claves-iniciales ul{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:8px; }
.claves-iniciales li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  padding:9px 11px; border-radius:9px; background:var(--surface); border:1px solid var(--line);
}
.ci-quien{ font-weight:700; font-size:12.5px; flex:1 1 100%; }
.ci-tel{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.claves-iniciales code{
  margin-left:auto; padding:3px 10px; border-radius:6px;
  background:var(--crimson-tint); border:1px solid var(--brass);
  font-size:14px; letter-spacing:.1em; color:var(--crimson-deep);
}

/* ---------------- Equipo y sedes ----------------
   La pantalla está organizada como el negocio, no como la base de datos:
   cada sede es una sección y su gente vive dentro. Mover a alguien de
   sede se ve — la fila cambia de lista.

   Las filas nacen cerradas. Con tres sedes y ocho barberos, tenerlo todo
   desplegado eran veintisiete campos abiertos a la vez y había que buscar
   a la gente haciendo scroll en vez de leerla.
   ------------------------------------------------------------------- */
.plant-resumen{
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  padding:16px 18px; margin-bottom:14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
}
.plant-marcador{ display:flex; flex-direction:column; gap:1px; }
.plant-marcador b{
  font-family:var(--display, inherit); font-size:24px; font-weight:800;
  line-height:1; color:var(--text); font-variant-numeric:tabular-nums;
}
.plant-marcador span{ font-size:11.5px; color:var(--text-muted); }
.plant-resumen-nota{
  flex:1 1 280px; display:flex; gap:9px; align-items:flex-start; margin:0;
  padding-left:22px; border-left:1px solid var(--line);
  font-size:12.5px; line-height:1.55; color:var(--text-muted);
}
.plant-resumen-nota svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--brass-deep); }
@media (max-width:720px){
  .plant-resumen-nota{ padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:12px; }
}

/* Una sede */
.plant-sede{
  margin-bottom:14px; border-radius:16px; overflow:hidden;
  background:var(--paper); border:1px solid var(--line);
}
.plant-sede.is-cerrada{ background:var(--cream); }
.plant-sede-cabeza{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:15px 16px; border-bottom:1px solid var(--line);
}
.plant-sede-quien{ flex:1 1 200px; min-width:0; }
.plant-sede-quien h3{ margin:0; font-size:16px; font-weight:800; color:var(--text); }
.plant-sede-quien p{ margin:2px 0 0; font-size:12px; color:var(--text-muted); }
.plant-sede.is-cerrada .plant-sede-quien h3{ color:var(--text-muted); }
.plant-sede-form{ padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface); }

/* Las filas */
.plant-filas{ padding:6px; display:flex; flex-direction:column; gap:4px; }
.plant-vacia{
  margin:0; padding:18px 12px; text-align:center;
  font-size:12.5px; color:var(--text-muted);
}
.plant-fila{ border-radius:11px; transition:background-color 160ms ease; }
.plant-fila.is-abierta{ background:var(--surface); box-shadow:0 0 0 1px var(--brass) inset; }
.plant-fila.is-baja{ opacity:.6; }

.plant-fila-cabeza{
  width:100%; min-height:56px;
  display:flex; align-items:center; gap:11px;
  padding:9px 12px; text-align:left; cursor:pointer;
  background:transparent; border:0; border-radius:11px;
  color:var(--text); font-family:inherit;
}
.plant-fila-cabeza:hover{ background:rgba(201,169,79,.08); }
.plant-chevron{ width:14px; height:14px; flex:none; color:var(--text-faint); transition:transform 200ms ease; }
.plant-fila.is-abierta .plant-chevron{ transform:rotate(90deg); }

.plant-inicial{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff; font-size:12px; font-weight:800; letter-spacing:.02em;
}
.plant-fila.is-baja .plant-inicial{ filter:grayscale(1); }

.plant-quien{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.plant-quien b{ font-size:13.5px; font-weight:700; }
.plant-quien span{
  font-size:12px; color:var(--text-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.plant-fila.is-baja .plant-quien b{ text-decoration:line-through; text-decoration-thickness:1px; }

/* El estado de acceso se lee sin abrir nada: es el dato que se consulta. */
.plant-chip{
  flex:none; padding:3px 10px; border-radius:99px;
  font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  border:1px solid transparent;
}
.plant-chip.is-sin{ color:var(--text-muted); background:var(--cream); border-color:var(--line); }
.plant-chip.is-barbero{ color:var(--navy-deep); background:var(--navy-tint); border-color:var(--cream-deep); }
.plant-chip.is-admin{ color:var(--crimson-deep); background:var(--crimson-tint); border-color:rgba(126,99,26,.3); }
.plant-chip.is-baja{ color:#8E3A26; background:var(--danger-bg); border-color:var(--danger-line); }

.plant-detalle{ padding:2px 14px 14px 14px; }
.plant-detalle-pie{ margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
.plant-add{ margin:2px 6px 12px; }

/* Rotación entre sedes */
.plant-rotacion{
  margin:12px 0 0; padding:13px 14px; border:1px solid var(--line);
  border-radius:11px; background:var(--cream);
}
.plant-rotacion legend{ padding:0 6px; font-size:12.5px; font-weight:800; color:var(--text); }
.plant-dias{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap:8px; }
.plant-dia{ display:flex; flex-direction:column; gap:3px; }
.plant-dia > span{ font-size:11.5px; font-weight:700; color:var(--text-muted); }
.plant-dia .input{ font-size:12px; padding:7px 9px; }

/* Acceso */
.plant-acceso{
  margin-top:12px; padding:13px 14px; border-radius:11px;
  background:var(--cream); border:1px solid var(--line);
}
.plant-cuenta{ display:flex; flex-direction:column; gap:3px; margin-bottom:11px; font-size:12.5px; }
.plant-cuenta-dato{ color:var(--text-muted); }
.plant-cuenta code{ background:var(--surface); padding:1px 6px; border-radius:5px; font-size:12px; color:var(--text); }
.plant-acciones{ display:flex; flex-wrap:wrap; gap:8px; }

/* La contraseña temporal sólo se enseña una vez, así que tiene que verse. */
.plant-clave{
  display:flex; gap:10px; align-items:flex-start;
  padding:11px 13px; margin-bottom:12px; border-radius:10px;
  background:var(--success-bg); border:1px solid var(--success-line);
  font-size:12.5px; line-height:1.55; color:var(--text);
}
.plant-clave svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--success); }
.plant-clave code{
  background:var(--surface); border:1px solid var(--success-line);
  padding:2px 8px; border-radius:6px; font-size:14px; letter-spacing:.08em;
}

@media (max-width:560px){
  .plant-fila-cabeza{ flex-wrap:wrap; }
  .plant-chip{ margin-left:45px; }
  .plant-sede-cabeza .btn{ flex:1 1 auto; }
}

/* Barra de guardar */
.cms-barra{
  position:sticky; bottom:0; z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  padding:13px 16px; margin-top:6px;
  background:var(--surface); border:1px solid var(--brass);
  border-radius:14px;
  box-shadow:0 -6px 24px -18px rgba(12,13,15,.5);
}
.cms-barra-estado{ margin:0; flex:1 1 220px; font-size:12.5px; color:var(--text-muted); line-height:1.5; }
.cms-barra-estado b{ color:var(--text); }
.cms-barra-llave{
  display:inline-flex; align-items:center; gap:5px; margin-left:10px;
  color:var(--crimson-deep); font-weight:700;
}
.cms-barra-llave svg{ width:13px; height:13px; }
.cms-barra-mal{
  display:inline-flex; align-items:flex-start; gap:7px;
  color:#8E3A26; font-weight:700;
}
.cms-barra-mal svg{ width:15px; height:15px; flex:none; margin-top:2px; }
.cms-barra:has(.cms-barra-mal){ border-color:var(--danger-line); background:var(--danger-bg); }

.cms-barra-btns{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Marca "pendiente" junto a la etiqueta del campo que aún no se confirma. */
.neg-pendiente{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:5px;
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--crimson); background:var(--crimson-tint); border:1px solid rgba(126,99,26,.28);
}

.neg-sede{
  border:1px solid var(--line); border-radius:12px; padding:15px;
  margin-bottom:11px; background:var(--cream);
}
.neg-sede:last-child{ margin-bottom:0; }
.neg-sede-titulo{
  display:flex; align-items:center; gap:7px; margin-bottom:13px;
  font-weight:700; font-size:14px; color:var(--ink);
}
.neg-sede-titulo svg{ width:16px; height:16px; color:var(--brass); }

.neg-estado{ display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.neg-estado-fila{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; line-height:1.5; color:var(--text-muted);
}
.neg-estado-fila svg{ width:15px; height:15px; flex:0 0 15px; margin-top:2px; }
.neg-estado-fila.is-ok svg{ color:var(--success); }
.neg-estado-fila.is-bad svg{ color:var(--danger); }

.neg-vista-previa{
  margin-top:15px; padding:17px; border-radius:12px;
  background:var(--cream); border:1px solid var(--line);
  max-height:340px; overflow-y:auto;
}
.neg-acciones{ margin-top:4px; }

/* ============================================================
   PORTADA DE ACCESO — cliente o miembro (Ronda 21)
   ============================================================ */
.portada, .portada-caja{
  width:min(100%, 420px); margin:0 auto; padding:34px 26px 30px;
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 28px 60px -34px rgba(0,0,0,.32);
}
.portada-pregunta{
  text-align:center; font-family:var(--font-display); font-size:19px; font-weight:700;
  color:var(--ink); margin:22px 0 18px;
}
.portada-rutas{ display:flex; flex-direction:column; gap:11px; }
.portada-ruta{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  padding:17px 16px; border-radius:15px; cursor:pointer;
  border:1px solid var(--line); background:var(--cream);
  transition:border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}
.portada-ruta:hover{ border-color:var(--brass); background:var(--paper); transform:translateY(-2px); }
.portada-ruta-icono{
  width:44px; height:44px; flex:0 0 44px; border-radius:50%;
  display:grid; place-items:center; color:var(--brass);
  border:1px solid rgba(176,141,87,.34); background:var(--paper);
}
.portada-ruta-icono svg{ width:21px; height:21px; }
.portada-ruta-texto{ flex:1; display:flex; flex-direction:column; gap:3px; }
.portada-ruta-texto b{ font-size:15px; color:var(--ink); font-weight:700; }
.portada-ruta-texto span{ font-size:12.5px; color:var(--text-muted); line-height:1.45; }
.portada-ruta-flecha{ width:16px; height:16px; flex:0 0 16px; color:var(--text-faint); transform:rotate(180deg); }
.portada-ruta:hover .portada-ruta-flecha{ color:var(--brass); }
.portada-pie{
  margin:20px 0 0; text-align:center; font-size:12px; color:var(--text-muted); line-height:1.5;
}
.portada-pie a{ color:var(--crimson); font-weight:600; }
.role-btn-salir{ display:inline-flex; align-items:center; gap:5px; }
.role-btn-salir svg{ width:13px; height:13px; }

/* Editor de contenido de la landing (Ronda 22) */
.cont-medidor{
  float:right; font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--text-faint); font-variant-numeric:tabular-nums;
}
.cont-medidor.is-cerca{ color:var(--brass); }
.cont-medidor.is-bad{ color:var(--danger); }
.cont-num{
  font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--brass); letter-spacing:.06em;
}
.neg-sede-titulo .cont-borrar{ margin-left:auto; min-width:30px; min-height:30px; }
.neg-sede-titulo .cont-borrar svg{ width:14px; height:14px; }
textarea.input{ resize:vertical; min-height:74px; line-height:1.5; font-family:inherit; }

/* Editor de bloques del panorama (Ronda 23) */
.pan-lista{ display:flex; flex-direction:column; gap:8px; }
.pan-fila{
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:11px;
  border:1px solid var(--line); background:var(--cream);
}
.pan-fila.is-oculta{ opacity:.55; }
.pan-fila.is-oculta .pan-nombre{ text-decoration:line-through; }
.pan-orden{
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  display:grid; place-items:center; font-size:11px; font-weight:800;
  color:var(--brass); border:1px solid rgba(176,141,87,.34);
}
.pan-nombre{ flex:1; font-size:13.5px; font-weight:600; color:var(--ink); }
.pan-fila .btn-ghost{ min-width:28px; min-height:28px; }
.pan-fila .btn-ghost[disabled]{ opacity:.3; pointer-events:none; }
.pan-flecha-arriba{ transform:rotate(90deg); }
.pan-flecha-abajo{ transform:rotate(-90deg); }
.pan-fila svg{ width:14px; height:14px; }

/* ============================================================
   LA APLICACIÓN DE VERDAD, SIN MAQUETA
   ------------------------------------------------------------
   Todo lo de abajo se activa cuando hay una sesión real. Lo que
   quita son decisiones de presentación de prototipo: el marco que
   dibuja un teléfono, la tarjeta redondeada con sombra que hacía
   parecer la plataforma una captura dentro de una página, y los
   dos rótulos que decían que esto era una demostración.

   No se borran de la hoja: en la demostración siguen valiendo, y
   es lo que se le enseña a alguien para explicarle el producto.
   ============================================================ */

/* Cuelgan del andamiaje y no de la sesión: en el dominio real no se ven
   tampoco ANTES de entrar, que es cuando se veían y no debían. */
body[data-andamiaje="no"] .brand-tag,
body[data-andamiaje="no"] .demo-badge{ display:none; }

/* El lienzo deja de estar centrado con aire alrededor y pasa a ser la
   ventana entera, menos la barra de arriba. */
body[data-presentacion="real"] .stage{
  display:block; padding:0;
}

body[data-presentacion="real"] .admin-shell{
  max-width:none; min-height:calc(100vh - 64px); max-height:none;
  border-radius:0; border:0; box-shadow:none;
}

/* En móvil se va el teléfono dibujado: en un teléfono de verdad, dibujar
   otro alrededor es absurdo, y en un monitor sólo servía para la foto. */
body[data-presentacion="real"] .phone{
  max-width:none; padding:0; border-radius:0; border:0; box-shadow:none; background:none;
}
body[data-presentacion="real"] .phone-screen{
  border-radius:0; min-height:calc(100vh - 64px); box-shadow:none;
}
body[data-presentacion="real"] .phone-notch{ display:none; }

/* La barra de arriba ya no tiene tres grupos de botones, sólo la marca y
   las dos acciones de la persona. Sin esto quedaban pegadas al borde. */
body[data-presentacion="real"] .topbar-right{ gap:6px; }