/* =========================================================
   Bilaby — Panel del negocio · sistema de diseño (demo)
   ========================================================= */
:root{
  --brand:#DA403A;
  --brand-soft:rgba(233,30,99,.12);
  --brand-ink:#ffffff;       /* texto legible SOBRE el color de marca (auto por JS) */
  --brand-text:#DA403A;      /* marca usada como texto/icono sobre fondo CLARO (auto por JS) */
  --brand-text-d:#f472a3;    /* idem sobre fondo OSCURO (sidebar / modo oscuro) */
  --sidebar:#1b1b1f;        /* panel en gris carbón (no azul) */
  --sidebar-2:#2a2a30;
  --sidebar-tx:#c9c9d1;
  --bg:#f6f7f9;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --border:#edeef2;
  --text:#15181f;
  --muted:#6b7280;
  --ok:#059669; --okb:#d1fae5;
  --warn:#d97706; --warnb:#fef3c7;
  --info:#2563eb; --infob:#dbeafe;
  --danger:#dc2626; --dangerb:#fee2e2;
  --r:18px; --r-sm:12px; --r-xs:9px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-md:0 2px 6px rgba(16,24,40,.05),0 8px 22px -8px rgba(16,24,40,.12);
  --sh-lg:0 18px 48px -10px rgba(16,24,40,.20),0 8px 18px -10px rgba(16,24,40,.12);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);          /* salida suave premium */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);   /* leve rebote elegante */
  --rail:76px;                                   /* ancho del menú plegado */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overscroll-behavior:none}
body{
  height:100%; margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;                             /* contiene desbordes laterales sin romper el fixed de iOS */
  overscroll-behavior:none;                      /* sin rebote que arrastre la página (iOS) */
  max-width:100%;                                /* nada empuja el ancho de la página */
}
::selection{background:var(--brand-soft)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d6dae1;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#c2c8d1;background-clip:padding-box}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;min-height:100dvh;transition:grid-template-columns .32s var(--ease-out)}
.sidebar{background:var(--sidebar);color:var(--sidebar-tx);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:16px 14px;overflow:hidden}
.brand{display:flex;align-items:center;gap:11px;padding:8px 4px 16px}
/* flecha plegar/desplegar el menú */
.sb-collapse{margin-left:auto;width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:rgba(148,163,184,.12);color:#9a9aa3;cursor:pointer;transition:background .16s var(--ease),color .16s var(--ease),transform .3s var(--ease-out)}
.sb-collapse:hover{background:rgba(148,163,184,.22);color:#fff}
.sb-collapse svg{width:16px;height:16px;transition:transform .3s var(--ease-out)}
body.sb-collapsed .sb-collapse svg{transform:rotate(180deg)}
.brand .logo{width:40px;height:40px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(16,24,40,.18)}
.brand .logo svg,.brand .logo img{width:26px;height:26px;object-fit:contain}
.brand .bn{font-size:15px;font-weight:700;color:#fff;line-height:1.15}
.brand .bs{font-size:11px;color:#9a9aa3;margin-top:1px}
.nav{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.nav-group{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#6f6f78;padding:14px 12px 5px}
.nav-group:first-child{padding-top:2px}
body.sb-collapsed .nav-group{height:1px;padding:0;margin:9px 12px;overflow:hidden;text-indent:-9999px;background:#2e2e36}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);color:var(--sidebar-tx);font-size:13.5px;font-weight:500;cursor:pointer;border:none;background:none;text-align:left;width:100%;transition:background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease);position:relative}
.nav-item .ic{width:20px;display:flex;align-items:center;justify-content:center;opacity:.92}
.ic-svg{width:18px;height:18px;display:inline-block;flex:none}
.nav-item .ic .ic-svg{width:19px;height:19px}
.btn .ic-svg{width:15px;height:15px;margin-right:-1px}
.theme-btn .ic-svg{width:17px;height:17px}
.nav-item:hover{background:var(--sidebar-2);color:#fff}
.nav-item.active{background:linear-gradient(90deg,var(--brand-soft),transparent);color:#fff}
.nav-item.active::before{content:'';position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav-foot{margin-top:auto;border-top:1px solid #2e2e36;padding-top:12px}
.nav-foot a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:#9a9aa3;text-decoration:none;font-size:13px;transition:.16s var(--ease)}
.nav-foot a:hover{background:var(--sidebar-2);color:#fff}
.demo-pill{margin:10px 4px 0;font-size:10.5px;color:#6f6f78;text-align:center}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:8;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:16px 26px;display:flex;align-items:center;gap:16px}
.topbar h2{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em}
.topbar .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.topbar .acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.content{padding:22px 26px 40px}
/* la entrada solo anima al navegar (no en el auto-refresco) */
body.nav-anim .content{animation:fadeUp .28s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{font:inherit;font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;transition:.15s var(--ease);display:inline-flex;align-items:center;gap:7px}
.btn:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-brand{background:var(--brand);border-color:var(--brand-text);color:var(--brand-ink)}
.btn-brand .ic-svg{color:var(--brand-ink)}
.btn-brand:hover{filter:brightness(1.05);box-shadow:0 8px 20px var(--brand-soft)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--surface-2);color:var(--text);box-shadow:none;transform:none}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-sm{padding:6px 10px;font-size:12px}
.icon-btn{width:36px;height:36px;justify-content:center;padding:0;font-weight:700}

/* ---------- segmented / chips ---------- */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{border:none;background:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);padding:6px 13px;border-radius:7px;cursor:pointer;transition:.15s var(--ease)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--sh)}
.chip{font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:6px 12px;cursor:pointer;color:var(--muted);transition:.15s var(--ease)}
.chip:hover{border-color:#cfd4dc;color:var(--text)}
.chip.active{background:var(--text);color:#fff;border-color:var(--text)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.filter{display:inline-flex;gap:7px;align-items:center;flex-wrap:wrap}
.fb{font-size:12px;border:1px solid var(--border);border-radius:18px;padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;background:var(--surface);transition:.15s var(--ease)}
.fb:hover{border-color:#cfd4dc}
.fb.off{opacity:.4}

/* ---------- cards / kpi ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:20px}
.card h3{margin:0 0 16px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.card .ch{display:flex;align-items:center;gap:10px;margin:-2px 0 16px}
.card .ch h3{margin:0}
.card .ch .meta{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:500;text-align:right}
.card .ch>.btn{margin-left:auto}
.card .ch .meta+.btn{margin-left:0}
/* subtítulo bajo el título de una tarjeta (descripción de la sección) */
.card .hint{font-size:12.5px;color:var(--muted);margin:-10px 0 16px;line-height:1.45}
.grid{display:grid;gap:16px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:16px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:20px;transition:.18s var(--ease)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.kpi .ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:13px;background:var(--brand-soft);color:var(--brand-text)}
.kpi .ico .ic-svg{width:21px;height:21px}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:6px}
.kpi .trend{font-size:11.5px;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:3px}
.trend.tr-up{color:var(--ok)} .trend.tr-down{color:var(--danger)} .trend.tr-flat{color:var(--muted)}
/* aviso / banner */
.banner{display:flex;align-items:center;gap:12px;background:var(--brand-soft);border:1px solid transparent;border-radius:var(--r);padding:13px 16px;margin-bottom:16px;font-size:13.5px;color:var(--text)}
.banner span{display:flex;align-items:center;gap:8px}
.banner .ic-svg{width:18px;height:18px;color:var(--brand-text)}
.banner button{margin-left:auto}
/* botón buscar ⌘K + campana */
.kbtn{gap:8px;color:var(--muted)}
.kbtn .kbd{font-size:11px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-weight:600}
.bell{position:relative}
.badge-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--surface)}
.tone-brand{background:var(--brand-soft);color:var(--brand-text)}
.tone-ok{background:var(--okb);color:var(--ok)} .tone-info{background:var(--infob);color:var(--info)}
.tone-warn{background:var(--warnb);color:var(--warn)} .tone-violet{background:#ede9fe;color:#7c3aed}

/* ---------- bars ---------- */
.barrow{display:flex;align-items:center;gap:12px;margin-bottom:13px;font-size:13px}
.barrow:last-child{margin-bottom:0}
.barrow .nm{width:150px;flex:none;display:flex;align-items:center;gap:8px}
.barrow .bx{flex:1;height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.barrow .bf{height:100%;border-radius:6px;transition:width .5s var(--ease)}
.barrow .vv{width:62px;text-align:right;flex:none;color:var(--muted);font-weight:600}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.tbl th,.tbl td{text-align:left;padding:13px 16px;font-size:13px;border-bottom:1px solid var(--border)}
.tbl th{background:var(--surface-2);color:var(--muted);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em}
.tbl tbody tr{transition:background .14s var(--ease);cursor:pointer}
.tbl tbody tr:hover{background:var(--surface-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl td.r,.tbl th.r{text-align:right}
.tbl .nowrap{white-space:nowrap}
.cell-name{display:flex;align-items:center;gap:10px;min-width:0}
.cell-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* input de edición en línea (tablas / formularios compactos) */
.cell-inp{border:1px solid var(--border);border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;background:var(--surface);color:var(--text);transition:.15s var(--ease)}
.cell-inp:focus{outline:none;border-color:var(--brand-text);box-shadow:0 0 0 3px var(--brand-soft)}
.suf{color:var(--muted);font-size:12px;margin-left:5px}
/* catálogo: cabecera de categoría + checks compactos */
.cat-head{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:24px 2px 11px;display:flex;align-items:center;gap:9px;color:var(--text)}
.cat-head::before{content:"";width:4px;height:17px;border-radius:3px;background:var(--brand);flex:none}
.cat-n{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:1px 8px}
.chk-mini{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:3px;white-space:nowrap;vertical-align:middle}
.chk-mini input{width:auto;margin:0}
.chk-row{display:flex;align-items:center;gap:8px;margin:0;font-weight:500}
.chk-row input{width:auto;margin:0}
/* editor de variantes (modal de servicio) */
.svv-row{display:grid;grid-template-columns:1fr auto auto auto;gap:8px;align-items:center;margin-bottom:8px}
/* enlace público de reservas (Ajustes) */
.reslink code{display:block;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:11px 13px;font-size:12.5px;color:var(--text);word-break:break-all;line-height:1.4}
/* avisos del bot (campana de notificaciones) */
.aviso-row{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border:1px solid transparent;border-radius:12px;background:var(--brand-soft);margin-bottom:8px}
.aviso-row .aviso-ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--surface);color:var(--brand-text)}
.aviso-row .aviso-ic .ic-svg{width:17px;height:17px}
/* ficha de cliente Pro: alerta importante + galería antes/después */
.alert-banner{display:flex;align-items:center;gap:9px;background:var(--dangerb);color:#9a1c1c;border:1px solid #f3c2c2;border-radius:11px;padding:9px 13px;font-size:13px;font-weight:600;margin:12px 0 0;line-height:1.4}
.alert-banner .ic-svg{width:18px;height:18px;flex:none;color:var(--danger)}
body.dark .alert-banner{background:rgba(220,38,38,.16);color:#fca5a5;border-color:rgba(220,38,38,.3)}
.cd-fotos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.cd-foto{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.cd-foto img{width:100%;height:100%;object-fit:cover;display:block}
.cd-foto img.broken{opacity:.25}
.cd-foto .cd-foto-x{position:absolute;top:2px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:14px;line-height:17px;text-align:center;cursor:pointer}
.cd-foto .cd-foto-t{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);color:#fff;font-size:9.5px;padding:1px 4px;text-align:center}
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.search{position:relative}
.search input{padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;font-size:13px;width:260px;background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%239ca3af' stroke-width='2'><circle cx='6.5' cy='6.5' r='4.5'/><path d='M13 13l-3-3'/></svg>") no-repeat 11px center;transition:.15s var(--ease)}
.search input:focus{outline:none;border-color:var(--brand-text);box-shadow:0 0 0 3px var(--brand-soft)}

/* ---------- badges / avatar ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.b-conf{background:var(--okb);color:var(--ok)} .b-pend{background:var(--warnb);color:var(--warn)}
.b-comp{background:var(--infob);color:var(--info)} .b-no{background:var(--dangerb);color:var(--danger)}
.av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex:none}

/* ---------- agenda día ---------- */
.cal{display:flex;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
/* align-items:flex-start -> las columnas toman la altura TOTAL de su contenido (no solo la
   parte visible); así el divisor vertical (border-right) llega hasta el final al hacer scroll. */
.axis{width:58px;flex:none;border-right:1px solid #d3d8e0}   /* divisor del eje: mismo tono que la rejilla (visible también sobre el sombreado) */
.axis .ah{height:64px;border-bottom:1px solid var(--border);position:relative;z-index:3;background:var(--surface);box-shadow:0 7px 10px -7px rgba(16,24,40,.16)}
.axis .slot{position:relative}
.axis .hr{position:absolute;left:0;right:0;font-size:11.5px;color:#aab1bd;font-weight:500;padding-left:8px}
body.dark .axis .hr{color:#8a909c}
/* etiqueta de la hora actual sobre el eje (estilo Booksy) */
.now-pill{position:absolute;left:4px;right:4px;font-size:10.5px;font-weight:800;color:#ef4444;background:var(--surface);border:1.5px solid #ef4444;border-radius:9px;text-align:center;line-height:15px;height:18px;z-index:4}
.col{flex:1;min-width:150px;border-right:1px solid #d3d8e0}   /* divisor de columnas (profesionales/días): visible también sobre el sombreado de fuera de horario */
.col:last-child{border-right:none}
body.dark .axis,body.dark .col{border-right-color:#2a2a30}
.col .ch2{height:68px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;text-align:center;position:relative;z-index:3;background:var(--surface);box-shadow:0 7px 10px -7px rgba(16,24,40,.16)}
.col-av{position:relative;overflow:hidden;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:.4px;flex:none;box-shadow:0 0 0 2px var(--surface),inset 0 0 0 1px rgba(255,255,255,.28),0 4px 11px -2px rgba(16,24,40,.3)}
.col-nm{font-size:12px;font-weight:600;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbody{position:relative}
.off{position:absolute;inset:0;z-index:0;background:rgba(100,116,139,.10)}   /* fuera de horario: sombreado claro pero visible (no tapa la cuadrícula) */
.gl{position:absolute;left:0;right:0;border-top:1px solid #d3d8e0;z-index:1}   /* la cuadrícula se ve también sobre el sombreado de fuera de horario */
/* resaltado de franja solo con ratón real (en móvil no deja "cuadro rosa" pegado al tocar) */
@media (hover:hover) and (pointer:fine){ .slotline:hover{background:var(--brand-soft);cursor:pointer} }
.nowline{position:absolute;left:0;right:0;height:2px;background:#ef4444;z-index:3}
/* selección por arrastre (crear/bloquear), estilo Google Calendar */
.sel-range{position:absolute;left:5px;right:5px;border-radius:10px;background:var(--brand-soft);border:1.5px solid var(--brand);z-index:6;pointer-events:none;box-shadow:0 6px 18px var(--brand-soft);animation:selpop .12s var(--ease-out)}
@keyframes selpop{from{opacity:.4;transform:scale(.98)}to{opacity:1;transform:none}}
.sel-range span{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:800;color:var(--brand-ink);background:var(--brand);padding:2px 9px;border-radius:0 0 9px 9px;box-shadow:0 2px 8px var(--brand-soft)}
body.selecting{cursor:ns-resize;-webkit-user-select:none;user-select:none}
body.selecting .cbody,body.selecting .slotline{cursor:ns-resize}
.cal-hint{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin:-2px 2px 12px}
.cal-hint .ic-svg{width:14px;height:14px;color:var(--brand-text)}
/* asa para redimensionar (borde inferior de citas/bloqueos) */
.ev-resize{position:absolute;left:0;right:0;bottom:0;height:11px;cursor:ns-resize;touch-action:none;z-index:3}
.ev-resize::after{content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:24px;height:3px;border-radius:3px;background:var(--muted);opacity:.55;transition:.15s var(--ease)}
.ev:hover .ev-resize::after,.blk:hover .ev-resize::after{opacity:.9}
.ev.resizing,.blk.resizing{box-shadow:0 0 0 2px var(--brand),0 10px 24px rgba(0,0,0,.3);z-index:8}
.res-lbl{position:absolute;left:6px;bottom:13px;font-size:10.5px;font-weight:800;background:rgba(0,0,0,.62);color:#fff;padding:1px 7px;border-radius:7px;z-index:9;pointer-events:none;white-space:nowrap}
/* vista de 3 días */
.cal-tres .col{min-width:165px}
/* día con varias profesionales: reparten el ancho para caber todas sin scroll horizontal */
body.scr-agenda #agView .cal.cal-fit{overflow-x:hidden}
.cal-fit .col{min-width:0;flex:1 1 0}
.ch2.col-today{color:var(--brand-text);font-weight:700}
/* lista de usuarios/accesos */
.usu-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.usu-row:last-child{border-bottom:none}
.usu-nm{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.usu-row .btn-sm{margin-left:auto}
.usu-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--brand-text);font-weight:600;margin-top:3px}
.usu-link .ic-svg{width:14px;height:14px}
/* cita moviéndose con el dedo */
.ev.moving{opacity:.93;box-shadow:0 0 0 2px var(--brand),0 14px 30px rgba(0,0,0,.35);z-index:9;cursor:grabbing}
/* afinado de hora en el menú del hueco (+/−) */
.rng-edit{display:flex;gap:10px;margin:8px 0 4px}
.rng-row{flex:1;display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:8px 9px}
.rng-lb{font-size:11.5px;color:var(--muted);font-weight:700;margin-right:auto}
.rng-btn{width:30px;height:30px;flex:none;border:1px solid var(--border);background:var(--surface);border-radius:9px;font-size:19px;font-weight:700;color:var(--text);cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s var(--ease)}
.rng-btn:hover{border-color:var(--brand-text);color:var(--brand-text)} .rng-btn:active{transform:scale(.9)}
.rng-val{font-size:15px;font-weight:800;min-width:46px;text-align:center;font-variant-numeric:tabular-nums}
.rng-dur{font-size:12.5px;text-align:center;margin:2px 0 4px}
.nowline::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#ef4444}
/* cita estilo Booksy: fondo pastel + texto oscuro + acento lateral del color */
.ev{position:absolute;left:6px;right:6px;border-radius:10px;padding:6px 9px;font-size:11.5px;color:var(--text);overflow:hidden;cursor:pointer;border-left:3px solid var(--brand);box-shadow:0 1px 3px rgba(16,24,40,.07);transition:transform .12s var(--ease),box-shadow .15s var(--ease);z-index:2}
.ev:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,24,40,.16);z-index:4}
/* el nombre manda; la hora acompaña. Nada se recorta con puntos suspensivos:
   lo que no cabe a lo ancho sigue en la línea de abajo. */
.ev .t{font-weight:500;line-height:1.25;overflow-wrap:anywhere} .ev .t b{font-weight:800}
.ev-h{font-weight:600;font-size:10.5px;opacity:.75;white-space:nowrap}
.ev .s{color:inherit;opacity:.85;margin-top:1px;line-height:1.25;overflow-wrap:anywhere}
.ev.pend{border-left-style:dashed;opacity:.9}
/* banda de "reposo" (tiempo de procesado): la profesional queda libre */
.ev-free{position:absolute;left:0;right:0;pointer-events:none;z-index:1;border-top:1px dashed rgba(16,24,40,.18);border-bottom:1px dashed rgba(16,24,40,.18);background:repeating-linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.55) 5px,rgba(255,255,255,.18) 5px,rgba(255,255,255,.18) 10px)}
body.dark .ev-free{border-color:rgba(255,255,255,.18);background:repeating-linear-gradient(135deg,rgba(0,0,0,.28),rgba(0,0,0,.28) 5px,rgba(0,0,0,.1) 5px,rgba(0,0,0,.1) 10px)}
.ev .t,.ev .s{position:relative;z-index:2}

/* ============ AGENDA — pasada premium AAA ============ */
/* brillo sutil sobre el color de la profesional (da profundidad "cara") */
.ev::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(157deg,rgba(255,255,255,.24),rgba(255,255,255,0) 46%)}
.ev:active{transform:scale(.985)}
/* acento del color de la profesional en la cabecera de su columna (vista día) */
.col .ch2::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--emp,var(--brand));opacity:.92}
.cbody{background:transparent}
.col-av{transition:transform .18s var(--ease-spring,cubic-bezier(.2,1.3,.4,1))}
.col-av::after{content:"";position:absolute;inset:0;background:radial-gradient(115% 78% at 50% -18%,rgba(255,255,255,.5),rgba(255,255,255,0) 60%);pointer-events:none}
.col .ch2:hover .col-av{transform:scale(1.06)}
/* micro-interacciones al tocar */
.ag-arrow:active{transform:scale(.9)}
.ag-date:active{transform:scale(.97)}
.seg button{transition:background .18s var(--ease),color .18s var(--ease),transform .12s var(--ease)}
.seg button:active{transform:scale(.92)}
.seg button.on{animation:segPop .24s var(--ease-spring,cubic-bezier(.2,1.3,.4,1))}
@keyframes segPop{0%{transform:scale(.9)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.ag-empbtn:active,.ag-today:active,.ag-bell:active{transform:scale(.93)}
.ag-empitem{transition:background .15s var(--ease),transform .1s var(--ease)}
.ag-empitem:active{transform:scale(.98)}
.fab:active{transform:scale(.88)}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0}
.fab:active::after{animation:fabRipple .5s var(--ease-out)}
@keyframes fabRipple{0%{opacity:.5;box-shadow:0 0 0 0 var(--brand-soft)}100%{opacity:0;box-shadow:0 0 0 22px var(--brand-soft)}}
/* estrellas al crear cita */
.spark-layer{position:fixed;z-index:9997;pointer-events:none;transform:translate(-50%,-50%)}
.spark{position:absolute;left:0;top:0;color:var(--brand);animation:sparkFly .95s cubic-bezier(.2,.7,.3,1) forwards;filter:drop-shadow(0 2px 5px rgba(16,24,40,.18));will-change:transform,opacity}
.spark svg{width:100%;height:100%;fill:currentColor;display:block}
@keyframes sparkFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(150deg)}}
@media(prefers-reduced-motion:reduce){.spark-layer{display:none}.seg button.on{animation:none}.fab:active::after{animation:none}}
/* ==================================================== */
.blk{position:absolute;left:6px;right:6px;border-radius:9px;padding:5px 8px;font-size:11px;cursor:pointer;color:var(--muted);background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 6px,#eceef2 6px,#eceef2 12px);border:1px solid var(--border);display:flex;align-items:center;z-index:2;transition:.14s var(--ease)}
.blk:hover{color:var(--danger);border-color:var(--danger)}
.blk span{display:flex;align-items:center;gap:5px;font-weight:600;overflow:hidden;white-space:nowrap}
.blk .ic-svg{width:13px;height:13px}
body.dark .blk{background:repeating-linear-gradient(45deg,#161618,#161618 6px,#26262a 6px,#26262a 12px)}

/* ---------- agenda semana ---------- */
/* Vista de semana = 7 columnas de día (en móvil se desplazan en horizontal). */
.weekgrid{display:grid;grid-template-columns:repeat(7,minmax(132px,1fr));gap:8px;align-items:stretch}
.wd{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);min-height:160px;display:flex;flex-direction:column;box-shadow:var(--sh);overflow:hidden}
.wd.today{border-color:var(--brand-text);box-shadow:0 0 0 1px var(--brand),var(--sh)}
.wd .wh{padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface-2);position:sticky;top:0;z-index:1}
.wd.today .wh{background:var(--brand-soft)}
.wd .wh b{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.wd .wh span{font-size:10.5px;color:var(--muted);line-height:1.3}
.wc{margin:6px;padding:7px 9px;border-radius:var(--r-xs);border-left:3px solid;font-size:11.5px;cursor:pointer;background:var(--surface-2);transition:.14s var(--ease)}
.wc:hover{transform:translateX(2px);background:#eef0f3}
.wc .wt{font-weight:700}

/* ---------- agenda mes ---------- */
.month{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.month .mh{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface-2);border-bottom:1px solid var(--border)}
.month .mh div{padding:10px;text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.month .mg{display:grid;grid-template-columns:repeat(7,1fr)}
.mcell{min-height:96px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:8px;cursor:pointer;transition:.14s var(--ease);position:relative}
.mcell:nth-child(7n){border-right:none}
.mcell:hover{background:var(--surface-2)}
.mcell.empty{background:#fcfcfd;cursor:default}
.mcell.today .dn{background:var(--brand);color:var(--brand-ink)}
.mcell .dn{font-size:12px;font-weight:600;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.mcell .mcnt{margin-top:8px;font-size:11px}
.mcell .pill{display:inline-block;background:var(--brand-soft);color:var(--brand-text);border-radius:12px;padding:2px 8px;font-weight:600}
.mcell .mrev{color:var(--muted);font-size:10.5px;margin-top:3px}

/* ---------- equipo / servicios ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.emp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:18px;transition:.16s var(--ease)}
.emp-card:hover{box-shadow:var(--sh-lg)}
.emp-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.emp-head .nm{font-weight:700;font-size:15px}
.emp-head .st{font-size:12px;color:var(--muted)}
.hrow{display:flex;justify-content:space-between;font-size:12px;padding:4px 0;border-top:1px dashed var(--border)}
.hrow .d{color:var(--muted)} .hrow.libre .h{color:#cbd0d8}
.switch{position:relative;width:40px;height:23px;flex:none;cursor:pointer}
.switch input{display:none}
.switch .tr{position:absolute;inset:0;background:#cbd1da;border-radius:20px;transition:.18s var(--ease)}
.switch .tr::before{content:'';position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.18s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .tr{background:var(--ok)}
.switch input:checked + .tr::before{transform:translateX(17px)}

/* ---------- forms ---------- */
.field{margin-bottom:14px;min-width:0}   /* la celda encoge en grid: evita que el input de hora desborde/solape */
.field label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;font-size:13.5px;background:var(--surface);transition:.15s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-text);box-shadow:0 0 0 3px var(--brand-soft)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* cuándo es la cita: fecha + desde + hasta en una sola fila, para que la pantalla
   quepa entera y solo scrollee la lista de servicios */
.row3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-bottom:12px}
.row3>.field{margin-bottom:0;min-width:0}
.nc-when .field label{text-align:center;margin-bottom:5px}
/* [type=…] para ganar a la regla de móvil que los alinea a la izquierda */
.nc-when .field input[type=time],.nc-when .field input[type=date]{text-align:center;font-weight:700;font-variant-numeric:tabular-nums;padding-left:4px;padding-right:4px}
.nc-when .field input[type=time]{font-size:15px}
.nc-when .field input[type=date]{font-size:13px}
/* señal: opcional y poco frecuente, en una línea en vez de un bloque entero */
.nc-dep{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nc-dep label{margin:0 !important;flex:1;min-width:0}
.nc-dep input{width:104px;flex:none;text-align:center;font-weight:600}
/* 190px: lo justo para que el resto del formulario quepa sin scroll en pantallas
   de 812px de alto. La lista es lo único que se desplaza. */
.svc-list{max-height:190px;overflow:auto;border:1px solid var(--border);border-radius:var(--r-sm);padding:6px;display:flex;flex-direction:column;gap:5px}
/* Imprescindible: es un flex en columna con altura limitada, así que por defecto
   sus hijos se ENCOGEN para caber (Safari lo hace; Chrome no). Al aplastarse la
   fila, el nombre se salía por arriba y la duración por abajo. Con flex:none
   conservan su alto y la lista scrollea, que es lo que se espera. */
.svc-list>*{flex:none}
.svc-list input{width:auto}
/* fila de servicio: cómoda, tappable, con check y precio alineado */
/* Cada servicio es un <label> dentro de .field, así que hay que ganarle a
   `.field label` (que si no lo convierte en bloque con estilo de etiqueta).
   position:relative es imprescindible: sin él, el checkbox absoluto de dentro
   toma como referencia el .modal, se escapa del recorte de la lista y le añade
   cientos de píxeles de scroll en blanco. */
label.svc-row{display:flex;position:relative;overflow:hidden;align-items:center;gap:11px;padding:10px 12px 10px 15px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--surface);font-size:13.5px;font-weight:500;color:var(--text);margin-bottom:0;
  transition:border-color .15s var(--ease),background .15s var(--ease),transform .14s var(--ease-spring),box-shadow .15s var(--ease)}
/* filo con el color del servicio: se ve de qué color saldrá la cita antes de elegirlo */
label.svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sv,var(--brand));opacity:.5;transition:.16s var(--ease)}
.svc-row:hover{border-color:var(--sv,var(--brand-text));background:var(--surface-2);transform:translateY(-1px);box-shadow:var(--sh)}
.svc-row:active{transform:scale(.988)}
.svc-row:has(input:checked){background:color-mix(in srgb,var(--sv) 8%,var(--surface));border-color:var(--sv)}
.svc-row:has(input:checked)::before{opacity:1;width:4px}
.svc-row input{position:absolute;opacity:0;pointer-events:none}
.svc-check{width:22px;height:22px;flex:none;border:2px solid var(--border);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;transition:.16s var(--ease)}
.svc-check .ic-svg{width:14px;height:14px;opacity:0;transform:scale(.4);transition:.2s var(--ease-spring)}
.svc-row input:checked ~ .svc-check{background:var(--sv,var(--brand));border-color:var(--sv,var(--brand));box-shadow:0 3px 8px -2px var(--sv,transparent)}
.svc-row input:checked ~ .svc-check .ic-svg{opacity:1;transform:none}
.svc-row input:checked ~ .svc-info .svc-nm{color:var(--text);font-weight:700}
.svc-row input:focus-visible ~ .svc-check{box-shadow:0 0 0 3px color-mix(in srgb,var(--sv) 40%,transparent)}

/* ---------- pie del formulario: resumen en vivo + acción principal ---------- */
.nc-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.nc-sum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:12px;padding:10px 14px;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.nc-sum.on{border-color:color-mix(in srgb,var(--brand) 28%,var(--border))}
.nc-sum-ph{font-size:12.5px;color:var(--muted)}
.nc-sum-l{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted)}
.nc-sum-l .ic-svg{width:15px;height:15px}
.nc-sum-v{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--brand-text);font-variant-numeric:tabular-nums}
.nc-sum-v.pop{animation:sumPop .34s var(--ease-spring)}
@keyframes sumPop{0%{transform:scale(1)}42%{transform:scale(1.14)}100%{transform:scale(1)}}
.nc-foot .pill{width:100%}
.pill--brand{--p-hi:#ef5b55;--p-lo:var(--brand);--p-edge:#932521;--p-glow:rgba(218,64,58,.6)}
.nc-cancel{display:block;width:100%;margin-top:9px;border:none;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:9px;border-radius:10px;transition:.15s var(--ease)}
.nc-cancel:hover{background:var(--surface-2);color:var(--text)}
@media(prefers-reduced-motion:reduce){.nc-sum-v.pop{animation:none}.svc-row{transition:none}}
.svc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.svc-info>*{flex:none}   /* mismo motivo: el nombre y la duración no deben encogerse */
/* line-height holgado: con `overflow:hidden` y la altura por defecto, la caja queda
   justa al glifo y recorta la tinta de las tildes/ñ arriba y de las colas (g, p) abajo. */
.svc-nm{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-meta{font-size:11.5px;color:var(--muted)}
.svc-price{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap}
.svc-cat{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:6px 4px 1px}
.svc-empty{padding:18px 12px;text-align:center;color:var(--muted);font-size:13px}
/* control de duración (ampliar/reducir) */
.dur-step{display:flex;align-items:center;gap:10px}
.dur-btn{width:38px;height:38px;flex:none;border:1px solid var(--border);background:var(--surface);border-radius:11px;font-size:22px;line-height:1;font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s var(--ease)}
.dur-btn:hover{border-color:var(--brand-text);color:var(--brand-text);background:var(--surface-2)}
.dur-btn:active{transform:scale(.94)}
.dur-val{min-width:74px;text-align:center;font-size:15px;font-weight:700;letter-spacing:-.01em}
.dur-reset{margin-left:auto;border:none;background:var(--surface-2);color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;cursor:pointer}
.dur-reset:hover{color:var(--text)}
/* Nueva cita: Fecha (todo el ancho) + Desde/Hasta en la misma fila, todo alineado y centrado */
.n-fecha-c{margin-bottom:12px}
.n-fecha-c label,.nc-times .field label{text-align:center}
.n-fecha-c input{text-align:center;font-weight:600}
.nc-times{margin-bottom:6px}
.nc-times .field{min-width:0;margin-bottom:0}
.nc-times .field input[type=time]{text-align:center;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:.02em;padding-left:6px;padding-right:6px}
/* ---- pantalla Servicios: tarjetas (sin tabla ancha) ---- */
.svc-cards{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.svc-card{border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--sh);overflow:hidden;transition:.15s var(--ease-out)}
.svc-card.off{opacity:.55}
.svc-card-main{display:flex;align-items:center;gap:12px;width:100%;border:none;background:none;font:inherit;text-align:left;cursor:pointer;padding:13px 14px}
.svc-card-main:hover{background:var(--surface-2)}
.svc-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.svc-card-nm{font-size:15px;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.svc-card-tag{font-size:10.5px;font-weight:700;color:var(--brand-text);background:var(--brand-soft);padding:2px 7px;border-radius:20px;letter-spacing:0}
.svc-card-sub{font-size:12.5px;color:var(--muted)}
.svc-card-price{font-size:15.5px;font-weight:800;color:var(--text);white-space:nowrap;letter-spacing:-.01em}
.svc-card-chev{flex:none;color:#c3c8d2;display:flex;transform:rotate(-90deg)}
.svc-card-chev .ic-svg{width:18px;height:18px}
.svc-card-foot{display:flex;align-items:center;gap:16px;padding:9px 14px;border-top:1px solid var(--border);background:var(--surface-2)}
.svc-tog{display:inline-flex;align-items:center;gap:8px}
.svc-tog-l{font-size:12.5px;font-weight:600;color:var(--muted)}
.svc-edit{margin-left:auto}
.svc-card:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.svc-card-main:active{background:var(--surface-2)}
body.dark .svc-card{background:#161618}
body.dark .svc-card-foot{background:#101012}
/* entrada escalonada de las tarjetas (toque AAA) */
.svc-cards .svc-card{animation:svcCardIn .34s var(--ease-out) both}
.svc-cards .svc-card:nth-child(1){animation-delay:.02s}
.svc-cards .svc-card:nth-child(2){animation-delay:.06s}
.svc-cards .svc-card:nth-child(3){animation-delay:.10s}
.svc-cards .svc-card:nth-child(4){animation-delay:.14s}
.svc-cards .svc-card:nth-child(5){animation-delay:.18s}
.svc-cards .svc-card:nth-child(n+6){animation-delay:.22s}
@keyframes svcCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* estado vacío de Servicios: mensaje + flecha-tutorial animada hacia el botón */
.empty-svc{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px 30px;gap:7px;animation:fadeUp .35s var(--ease-out) both}
.empty-svc-ic{width:76px;height:76px;border-radius:22px;background:var(--brand-soft);color:var(--brand-text);display:flex;align-items:center;justify-content:center;margin-bottom:8px;box-shadow:0 14px 30px -14px var(--brand);animation:svcPop .55s var(--ease-spring) both}
.empty-svc-ic .ic-svg{width:38px;height:38px}
.empty-svc h3{font-size:18.5px;font-weight:800;letter-spacing:-.02em;margin:0}
.empty-svc p{font-size:14px;margin:0 0 2px;max-width:270px;line-height:1.45}
.empty-svc-arrow{color:var(--brand-text);margin-top:4px;animation:arrowBob 1.15s ease-in-out infinite}
.empty-svc-arrow .ic-svg{width:30px;height:30px;stroke-width:2.4}
.empty-svc-cta{margin-top:4px;box-shadow:0 12px 26px -10px var(--brand);animation:svcPop .55s var(--ease-spring) .12s both}
@keyframes arrowBob{0%,100%{transform:translateY(-2px);opacity:.5}50%{transform:translateY(9px);opacity:1}}
@keyframes svcPop{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
/* misma altura en campos del formulario (select de duración = resto). Se excluyen
   los inputs de hora, que en iOS tienen su propia altura mínima nativa. */
.field select,.field input:not([type=time]):not([type=checkbox]):not([type=radio]):not([type=color]){height:44px}
@media(prefers-reduced-motion:reduce){.empty-svc-arrow,.empty-svc-ic,.empty-svc-cta,.svc-cards .svc-card{animation:none}}
/* aviso de hueco ocupado con botón para solapar */
.solape-warn{display:flex;align-items:center;gap:10px;margin-top:8px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--warn,#d99a2e) 40%,var(--border));background:color-mix(in srgb,var(--warn,#d99a2e) 9%,var(--surface));border-radius:12px;font-size:13px}
.solape-warn>.ic-svg{width:20px;height:20px;flex:none;color:var(--warn,#d99a2e)}
.solape-warn>div{flex:1;min-width:0}
.solape-warn .btn{flex:none}
/* opción "crear cliente" en el selector */
.cp-create .cp-create-av{background:var(--brand);color:var(--brand-ink);display:flex;align-items:center;justify-content:center}
.cp-create .cp-create-av .ic-svg{width:18px;height:18px}
.cp-create .cp-nm{color:var(--brand-text);font-weight:700}
/* cita solapada (puesta encima a propósito): borde punteado para distinguirla */
.ev-solapa{border-left-style:dashed;outline:1.5px dashed color-mix(in srgb,var(--text) 35%,transparent);outline-offset:-3px}
/* ---------- color del servicio: vista previa real + paleta ---------- */
.svc-dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.sv-prev{display:flex;align-items:flex-start;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:10px 11px;margin-bottom:11px}
.sv-prev-ax{font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:5px;flex:none}
.sv-prev-ev{flex:1;min-width:0;border-radius:11px;border-left:3px solid;padding:6px 9px;display:flex;flex-direction:column;gap:1px;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);transition:background .18s var(--ease),color .18s var(--ease)}
.sv-prev-t{font-size:11.5px;line-height:1.2;overflow-wrap:anywhere} .sv-prev-t b{font-weight:800;font-size:12px}
.sv-prev-h{font-weight:600;font-size:10.5px;opacity:.75;white-space:nowrap}
.sv-prev-s{font-size:10.5px;line-height:1.2;opacity:.85;overflow-wrap:anywhere}
.sw2-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sw2{width:30px;height:30px;flex:none;border-radius:9px;cursor:pointer;padding:0;border:1px solid rgba(0,0,0,.08);background:var(--sw,var(--surface-2));
  position:relative;display:inline-flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform .14s var(--ease-spring),box-shadow .14s var(--ease)}
.sw2:hover{transform:translateY(-2px);box-shadow:0 6px 12px -4px var(--sw,rgba(0,0,0,.3)),inset 0 1px 0 rgba(255,255,255,.3)}
.sw2.sel{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.sw2.sel::after{content:"";position:absolute;width:9px;height:5px;border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg) translate(1px,-2px);filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.sw2-auto{background:var(--sw);color:#fff}
.sw2-auto .ic-svg{width:15px;height:15px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.sw2-auto.sel::after{display:none}
.sw2-custom{overflow:hidden;background:conic-gradient(from 210deg,#e0608f,#d99a2e,#7fae3a,#2fa1a8,#4a8fd6,#9a6cd0,#e0608f)}
.sw2-custom input[type=color]{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);opacity:0;cursor:pointer;border:none;padding:0}
.sw2-custom.sel::after{display:none}
.swatches{display:flex;gap:9px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.14s var(--ease)}
.swatch:hover{transform:scale(1.1)}
.swatch.sel{border-color:#fff;box-shadow:0 0 0 2px var(--text)}
/* color de marca personalizado + vista previa de contraste en vivo */
.brand-custom{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.brand-pick{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text)}
.brand-pick input[type=color]{width:36px;height:36px;border:1px solid var(--border);border-radius:10px;padding:0;background:none;cursor:pointer;flex:none}
.brand-pick input[type=color]::-webkit-color-swatch-wrapper{padding:3px}
.brand-pick input[type=color]::-webkit-color-swatch{border:none;border-radius:7px}
.brand-pick input[type=color]::-moz-color-swatch{border:none;border-radius:7px}
.brand-prev{margin-left:auto;display:inline-flex;align-items:center;padding:7px 15px;border-radius:10px;background:var(--brand);color:var(--brand-ink);font-size:13px;font-weight:700;box-shadow:0 5px 14px -5px var(--brand)}

/* ---------- modal / drawer ---------- */
body.ov-open{overflow:hidden}   /* con un modal abierto, el fondo no se desplaza */
.overlay{position:fixed;left:0;right:0;top:var(--ovt,0px);height:var(--ovh,100%);background:rgba(15,23,42,.45);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;animation:ovin .2s var(--ease)}
@keyframes ovin{from{opacity:0}to{opacity:1}}
.modal{position:relative;background:var(--surface);border-radius:20px;width:440px;max-width:93vw;max-height:90vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:24px;box-shadow:var(--sh-lg);animation:modin .26s var(--ease-out)}
@keyframes modin{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.modal h3{margin:0 0 4px;font-size:18px;letter-spacing:-.02em;padding-right:30px}
.modal .msub{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.modal .info{font-size:13px;margin:8px 0;color:#374151;display:flex;gap:8px}
.modal .info b{color:var(--text);min-width:78px;display:inline-block}
.acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.acts .btn{flex:1;justify-content:center;min-width:96px}
.drawer-wrap{position:fixed;inset:0;z-index:50;animation:ovin .2s var(--ease)}
.drawer-wrap .dim{position:absolute;inset:0;background:rgba(15,23,42,.4)}
.drawer{position:absolute;top:0;right:0;height:100%;width:452px;max-width:94vw;background:var(--surface);box-shadow:-18px 0 60px rgba(16,24,40,.20);display:flex;flex-direction:column;overflow:hidden;animation:drin .3s var(--ease-out)}
@keyframes drin{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.drawer-body{flex:1;overflow:auto;padding:14px 24px 28px}
.drawer .dh{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.drawer .dh .nm{font-size:18px;font-weight:700}
.timeline{position:relative;margin-top:6px}
.tl-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.tl-item .tl-when{font-size:12px;color:var(--muted);width:84px;flex:none}
.tl-item .tl-body{font-size:13px}

/* ---------- toast ---------- */
.toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{background:#0f172a;color:#fff;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:500;box-shadow:var(--sh-lg);display:flex;align-items:center;gap:10px;animation:toin .3s var(--ease)}
.toast.ok{background:#065f46} .toast.err{background:#991b1b}
.toast-act{margin-left:6px;background:rgba(255,255,255,.16);border:none;color:#fff;font:inherit;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:7px;cursor:pointer}
.toast-act:hover{background:rgba(255,255,255,.28)}
@keyframes toin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- paleta de comandos ---------- */
.pal-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .1s var(--ease)}
.pal-row.sel{background:var(--brand-soft)}
.pal-ic{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.pal-row.sel .pal-ic{background:var(--brand);color:var(--brand-ink)}
.pal-ic .ic-svg{width:16px;height:16px}
.pal-lb{font-size:13.5px;font-weight:600}
.pal-sub{margin-left:auto;font-size:11.5px;color:var(--muted)}

.empty{padding:44px 20px;text-align:center;color:#9aa1ad;font-size:14px;line-height:1.5}
.empty .ic-svg{width:30px;height:30px;color:#cdd3dc;margin:0 auto 12px;display:block}
.empty .sub{display:block;margin-top:6px;font-size:12.5px;color:#aab1bd;font-weight:400}
body.dark .empty{color:#7f868f}
body.dark .empty .ic-svg{color:#4a4d55}
body.dark .empty .sub{color:#71777f}
.muted{color:var(--muted)}
.section-gap{margin-top:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* botón menú móvil (oculto en escritorio) + fondo del cajón */
.hamb{display:none;width:38px;height:38px;border:1px solid var(--border);background:var(--surface);border-radius:10px;align-items:center;justify-content:center;cursor:pointer;flex:none;color:var(--text)}
.hamb svg{width:20px;height:20px}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55}

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

/* ---------- Ajustes (rework por categorías) ---------- */
.set-wrap{display:grid;grid-template-columns:236px 1fr;gap:26px;align-items:start}
.set-rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:4px}
.set-nav{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:var(--r-sm);border:1px solid transparent;background:none;cursor:pointer;text-align:left;width:100%;color:var(--text);transition:background .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.set-nav:hover{background:var(--surface-2)}
.set-nav.on{background:var(--surface);border-color:var(--border);box-shadow:var(--sh)}
.set-nav-ic{width:36px;height:36px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--muted);transition:background .16s var(--ease),color .16s var(--ease)}
.set-nav-ic .ic-svg{width:18px;height:18px}
.set-nav:hover .set-nav-ic{color:var(--text)}
.set-nav.on .set-nav-ic{background:var(--brand-soft);color:var(--brand-text)}
.set-nav-tx{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.set-nav-tx b{font-size:13.5px;font-weight:650;letter-spacing:-.01em}
.set-nav-tx i{font-size:11.5px;color:var(--muted);font-style:normal;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-content{min-width:0}
.set-panel{display:none}
.set-panel.on{display:flex;flex-direction:column;gap:16px;animation:setIn .32s var(--ease-out)}
@keyframes setIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.set-h{display:flex;align-items:flex-start;gap:13px;margin:-1px 0 18px}
.set-ico{width:40px;height:40px;flex:none;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-text)}
.set-ico .ic-svg{width:20px;height:20px}
.set-h h3{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.set-sub{margin:3px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:52ch}
.set-div{height:1px;background:var(--border);margin:16px 0}
.set-togglerow{display:flex;align-items:center;justify-content:space-between;gap:16px}
.set-togglerow .tlbl{font-size:13.5px;font-weight:600}
.set-togglerow .tsub{font-size:12px;color:var(--muted);font-weight:400;margin-top:3px;max-width:460px;line-height:1.45}
.set-savebar{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:14px;margin-top:20px;padding:14px 2px calc(14px + var(--safe-b));background:linear-gradient(to top,var(--bg) 62%,transparent)}
.set-savebar .sv-status{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:8px;min-height:16px}
.set-savebar .sv-dot{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warnb)}
.set-savebar .btn-brand{margin-left:auto}
@media(max-width:900px){
  .set-wrap{grid-template-columns:1fr;gap:14px}
  .set-rail{position:static;flex-direction:row;overflow-x:auto;gap:8px;padding:2px 0 6px;margin:0 -2px;scrollbar-width:none}
  .set-rail::-webkit-scrollbar{display:none}
  .set-nav{flex:none;width:auto;padding:8px 12px}
  .set-nav-tx i{display:none}
}
body.dark .set-nav.on{background:#1d1d21;border-color:#2e2e36}
body.dark .set-nav-ic{background:#26262c}
body.dark .set-nav:hover{background:#1d1d21}
/* tablet: barra lateral compacta (solo iconos) */
@media(max-width:920px) and (min-width:641px){.app{grid-template-columns:72px 1fr}.brand .bn,.brand .bs,.nav-item .lbl,.nav-foot a span{display:none}.nav-item{justify-content:center}}

/* móvil (≤640px): barra lateral como cajón deslizante + ajustes de layout */
@media(max-width:640px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:248px;height:100vh;transform:translateX(-100%);transition:transform .25s var(--ease);z-index:60;box-shadow:8px 0 30px rgba(0,0,0,.3)}
  body.sb-open .sidebar{transform:none}
  body.sb-open .sb-backdrop{display:block}
  .hamb{display:flex}
  .topbar{padding:12px 14px;gap:10px;position:sticky;top:0}
  .topbar h2{font-size:17px}
  .topbar .sub{font-size:11.5px}
  .kbtn{display:none}                 /* atajo ⌘K no aplica en móvil */
  .content{padding:16px 14px 88px}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:12px}
  .kpi .v{font-size:23px}
  .cal{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .col{min-width:140px}
  /* la semana mantiene las 7 columnas y se desplaza en horizontal (no una por fila) */
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tbl{min-width:560px}
  .modal{width:94vw}
  .drawer{width:100vw;max-width:100vw}
  .toolbar{gap:8px}
  .topbar .acts .btn span.kbd{display:none}
}

/* ---------- modo oscuro ---------- */
body.dark{
  /* gris oscuro neutro (zinc) premium, sin tinte azul — un punto más claro */
  --bg:#1c1c1f; --surface:#26262b; --surface-2:#303036; --border:#3c3c44; --text:#eef0f2; --muted:#a2a2ab;
  --sidebar:#161619; --sidebar-2:#2c2c33; --sidebar-tx:#cdcdd4;
  --sh:0 1px 2px rgba(0,0,0,.4); --sh-lg:0 16px 40px rgba(0,0,0,.6);
  --brand-text:var(--brand-text-d);   /* sobre fondo oscuro, la marca usa su variante clara */
}
/* el menú lateral es oscuro aunque el resto esté en claro: ahí la marca usa la variante clara */
.sidebar{--brand-text:var(--brand-text-d)}
body.dark .topbar{background:rgba(29,29,32,.85)}
body.dark input,body.dark select,body.dark textarea{color:var(--text);background:#161618;border-color:var(--border)}
body.dark input[type=date],body.dark input[type=time]{color-scheme:dark}
body.dark .search input{background-color:#161618}
body.dark .off{background:rgba(255,255,255,.035)}
body.dark .gl{border-top-color:#2a2a30}
body.dark .seg button.on{background:#161618;color:#fff}
body.dark .chip,body.dark .fb,body.dark .btn{background:var(--surface)}
body.dark .badge.b-conf{background:#06342a;color:#6ee7b7}
body.dark .badge.b-pend{background:#3a2c08;color:#fcd34d}
body.dark .badge.b-comp{background:#10254d;color:#93c5fd}
body.dark .badge.b-no{background:#3f1416;color:#fca5a5}

/* ---------- skeleton ---------- */
.sk{background:linear-gradient(90deg,var(--surface-2),#eef1f5 40%,var(--surface-2) 80%);background-size:200% 100%;animation:sh 1.2s ease-in-out infinite;border-radius:8px}
body.dark .sk{background:linear-gradient(90deg,#26262a,#33333a 40%,#26262a 80%);background-size:200% 100%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:16px}
.sk-card{height:104px;border-radius:14px}

/* ---------- drag & drop ---------- */
.ev{cursor:grab} .ev:active{cursor:grabbing}
.ev.dragging{opacity:.45}
.cbody.drop{box-shadow:inset 0 0 0 2px var(--brand)}
.drophint{position:absolute;left:6px;right:6px;border:2px dashed var(--brand);border-radius:9px;background:var(--brand-soft);pointer-events:none;z-index:2}

/* ---------- gráfico de barras ---------- */
.chart{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:8px}
.chart .gb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.chart .gb .fill{width:64%;min-height:3px;background:linear-gradient(180deg,var(--brand),var(--brand));border-radius:7px 7px 0 0;transition:height .5s var(--ease);position:relative}
.chart .gb .fill:hover{filter:brightness(1.08)}
.chart .gb.today .fill{outline:2px solid var(--text);outline-offset:2px}
.chart-wide{gap:3px}
.chart-wide .gb.thin .fill{width:80%;border-radius:3px 3px 0 0}
.chart-wide .gb .lbl{font-size:9px}
/* VIP + etiquetas */
.vip-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;color:#9a6a00;background:linear-gradient(135deg,#fde68a,#fbbf24);padding:1px 8px;border-radius:20px;vertical-align:middle}
/* badges de segmento de cliente */
.cbadge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:20px;vertical-align:middle;line-height:1.7}
.cbadge.vip{color:#9a6a00;background:linear-gradient(135deg,#fde68a,#fbbf24)}
.cbadge.nuevo{color:#047857;background:#d1fae5}
.cbadge.recurrente{color:#3730a3;background:#e0e7ff}
body.dark .cbadge.nuevo{color:#6ee7b7;background:rgba(16,185,129,.16)}
body.dark .cbadge.recurrente{color:#c7d2fe;background:rgba(99,102,241,.18)}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:16px}
.tag.sm{font-size:10.5px;padding:1px 7px}
.tag b{cursor:pointer;font-weight:700;opacity:.7}
.tag b:hover{opacity:1}
textarea.notas{min-height:64px;resize:vertical;font-family:inherit}
/* objetivo de facturación */
.goalbar{position:relative;height:26px;background:var(--surface-2);border-radius:13px;overflow:hidden}
.goalbar.sm{height:8px;border-radius:6px;margin-top:6px}
.goalfill{height:100%;background:linear-gradient(90deg,var(--brand),#b3144e);border-radius:13px;transition:width .6s var(--ease)}
.goalpct{position:absolute;top:0;left:12px;line-height:26px;font-size:12.5px;font-weight:700;color:var(--text)}
/* reseñas */
.stars{display:inline-flex;gap:1px;color:#d1d5db;font-size:15px;letter-spacing:1px}
.stars .star.on{color:#f59e0b}
/* tarjeta de puntuación media (Reseñas) */
.score-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.score-card .big{font-size:48px;font-weight:800;line-height:1;letter-spacing:-.02em}
.score-card .stars{font-size:18px}
.review{padding:12px 0;border-bottom:1px solid var(--border)}
.review:last-child{border-bottom:none}
.rv-h{display:flex;align-items:center;gap:11px}
.rv-h .stars{margin-left:auto}
.rv-t{margin-top:8px;font-size:13.5px;color:var(--text);padding-left:45px}
.rate{display:flex;gap:6px;font-size:30px;color:#d1d5db;cursor:pointer}
.rate span{transition:.1s var(--ease)} .rate span:hover{transform:scale(1.1)}
.rate span.on{color:#f59e0b}
/* bonos */
.bono{display:flex;align-items:center;gap:10px;background:var(--surface-2);border-radius:10px;padding:10px 12px;margin-bottom:8px}
/* portfolio / galería */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.work{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1;background:var(--surface-2);box-shadow:var(--sh);cursor:default}
.work img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease)}
.work:hover img{transform:scale(1.05)}
.work img.broken{opacity:0}
.work-ov{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;padding:10px;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);color:#fff}
.work-ov b{font-size:13px} .work-svc{font-size:11px;opacity:.85}
.work-del{width:26px;height:26px;border:none;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:16px;cursor:pointer;flex:none;opacity:0;transition:.15s var(--ease)}
.work:hover .work-del{opacity:1}
.work-del:hover{background:var(--danger)}
/* mapa de calor */
.heat{display:flex;flex-direction:column;gap:4px;overflow-x:auto;overscroll-behavior-x:contain}
.hm-row{display:flex;gap:4px;align-items:center}
.hm-day{width:42px;flex:none;font-size:11.5px;color:var(--muted);font-weight:600}
.hm-h{flex:1;min-width:26px;text-align:center;font-size:10.5px;color:var(--muted)}
.hm-cell{flex:1;min-width:26px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text)}
.hm-head .hm-h{font-weight:600}
.chart .gb .lbl{font-size:11px;color:var(--muted);text-transform:capitalize}
.chart .gb .val{font-size:10.5px;color:var(--muted);font-weight:600}

/* ---------- toggle tema en topbar (discreto, poco protagonismo) ---------- */
/* el topbar comparte la clase .acts con los modales: neutralizamos el flex:1
   de los botones de acción de modal para que los iconos no se ensanchen */
.topbar .acts .btn{flex:none;min-width:0}
.theme-btn{width:30px;height:30px;border-color:transparent;background:transparent;color:var(--muted)}
.theme-btn .ic-svg{width:16px;height:16px}
.theme-btn:hover{background:var(--surface-2);color:var(--text);box-shadow:none}
.notas{width:100%;min-height:70px;resize:vertical}

/* =========================================================
   PULIDO PREMIUM v3 — móvil perfecto, notch, plegado y animaciones
   ========================================================= */

/* ---- menú plegable (rail de iconos) en escritorio/tablet ---- */
@media(min-width:641px){
  body.sb-collapsed .app{grid-template-columns:var(--rail) 1fr}
  body.sb-collapsed .brand{justify-content:center;padding-left:0;padding-right:0;gap:0}
  body.sb-collapsed .brand .bn,
  body.sb-collapsed .brand .bs,
  body.sb-collapsed .nav-item .lbl,
  body.sb-collapsed .nav-foot a span,
  body.sb-collapsed .demo-pill{opacity:0;width:0;overflow:hidden;white-space:nowrap;pointer-events:none}
  body.sb-collapsed .sb-collapse{position:absolute;top:18px;right:14px;background:transparent}
  body.sb-collapsed .nav-item,
  body.sb-collapsed .nav-foot a{justify-content:center;padding-left:0;padding-right:0}
  body.sb-collapsed .nav-item.active::before{left:-14px}
  /* tooltip al pasar el ratón sobre un icono plegado */
  body.sb-collapsed .nav-item{position:relative}
  body.sb-collapsed .nav-item::after{content:attr(data-lbl);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.9);transform-origin:left center;background:#0f172a;color:#fff;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:var(--sh-lg);transition:opacity .14s var(--ease),transform .14s var(--ease-out);z-index:40}
  body.sb-collapsed .nav-item:hover::after{opacity:1;transform:translateY(-50%) scale(1)}
}
.brand .logo{transition:transform .2s var(--ease-out)}
.sidebar:hover .logo{transform:scale(1.05)}

/* ---- barra superior elevada al hacer scroll (sensación premium) ---- */
.topbar{transition:box-shadow .25s var(--ease),background .25s var(--ease)}
body.scrolled .topbar{box-shadow:0 6px 24px rgba(16,24,40,.09)}
body.dark.scrolled .topbar{box-shadow:0 6px 24px rgba(0,0,0,.5)}
.topbar h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.main{min-width:0}

/* ---- entradas escalonadas (nav + tarjetas) ---- */
@keyframes navIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
/* solo en la primera carga (no en cada navegación) */
.nav.intro .nav-item{animation:navIn .32s var(--ease-out) backwards}
.nav.intro .nav-item:nth-child(1){animation-delay:.02s}.nav.intro .nav-item:nth-child(2){animation-delay:.05s}
.nav.intro .nav-item:nth-child(3){animation-delay:.08s}.nav.intro .nav-item:nth-child(4){animation-delay:.11s}
.nav.intro .nav-item:nth-child(5){animation-delay:.14s}.nav.intro .nav-item:nth-child(6){animation-delay:.17s}
.nav.intro .nav-item:nth-child(7){animation-delay:.20s}.nav.intro .nav-item:nth-child(8){animation-delay:.23s}
.nav.intro .nav-item:nth-child(9){animation-delay:.26s}.nav.intro .nav-item:nth-child(10){animation-delay:.29s}
.nav.intro .nav-item:nth-child(11){animation-delay:.32s}
.nav-item:hover{transform:translateX(3px)}
.nav-item.active{transform:none}
.nav-item.active::before{transition:transform .3s var(--ease-spring);animation:barIn .34s var(--ease-spring) backwards}
@keyframes barIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}

@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.nav-anim .kpi,body.nav-anim .card,body.nav-anim .emp-card{animation:riseIn .4s var(--ease-out) backwards}
body.nav-anim .kpi-grid .kpi:nth-child(1),body.nav-anim .cards>*:nth-child(1),body.nav-anim .grid>*:nth-child(1){animation-delay:.03s}
body.nav-anim .kpi-grid .kpi:nth-child(2),body.nav-anim .cards>*:nth-child(2),body.nav-anim .grid>*:nth-child(2){animation-delay:.07s}
body.nav-anim .kpi-grid .kpi:nth-child(3),body.nav-anim .cards>*:nth-child(3),body.nav-anim .grid>*:nth-child(3){animation-delay:.11s}
body.nav-anim .kpi-grid .kpi:nth-child(4),body.nav-anim .cards>*:nth-child(4),body.nav-anim .grid>*:nth-child(4){animation-delay:.15s}
body.nav-anim .kpi-grid .kpi:nth-child(5),body.nav-anim .cards>*:nth-child(5){animation-delay:.19s}
body.nav-anim .kpi-grid .kpi:nth-child(6),body.nav-anim .cards>*:nth-child(6){animation-delay:.23s}

/* micro-interacciones premium (sin rotaciones en botones: evita el efecto "inclinado") */
.kpi .ico{transition:transform .3s var(--ease-spring)}
.kpi:hover .ico{transform:scale(1.07)}
.btn:active{transform:scale(.97)}
.icon-btn{transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn:active{transform:scale(.94)}
.hamb{transition:transform .18s var(--ease),background .15s var(--ease)}
.hamb:active{transform:scale(.92)}
.av{transition:transform .2s var(--ease-spring)}
.tbl tbody tr:hover .av{transform:scale(1.06)}

/* ---- iPhone: safe-area (notch / Dynamic Island / barra inferior) ---- */
.topbar{padding-top:max(16px,calc(env(safe-area-inset-top) + 12px));padding-right:max(26px,calc(env(safe-area-inset-right) + 10px))}
.sidebar{padding-top:max(16px,calc(env(safe-area-inset-top) + 10px))}
.toasts{bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px))}

/* ---- MÓVIL (≤640px): que encaje sin zoom, con notch resuelto ---- */
@media(max-width:640px){
  /* iOS hace zoom si la fuente del campo es <16px → forzamos 16px al enfocar */
  input,select,textarea,.field input,.field select,.field textarea,.search input{font-size:16px}
  .topbar{padding:max(12px,calc(env(safe-area-inset-top) + 8px)) max(14px,env(safe-area-inset-right)) 12px max(14px,env(safe-area-inset-left));gap:10px}
  .content{padding:16px max(14px,env(safe-area-inset-left)) calc(96px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-right))}
  .sidebar{padding-top:max(18px,calc(env(safe-area-inset-top) + 12px))}
  .sb-backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  /* la flecha del menú cierra el cajón en móvil (apunta a la izquierda) */
  .sb-collapse{width:32px;height:32px}
  /* toques cómodos y sin retardo */
  .nav-item,.btn,.chip,.fb,.seg button,.icon-btn,.hamb{touch-action:manipulation}
  .search input{width:100%}
  .toolbar .search{flex:1;min-width:0}
  /* tarjetas un poco más compactas y legibles */
  .card{padding:16px}
  .kpi{padding:16px}
  /* modales pegados abajo se sienten más nativos */
  .modal{border-radius:20px}
  /* tarjetas grandes apiladas; los pares de campos siguen lado a lado pero
     pueden encogerse (min-width:0) para no montarse */
  .grid2{grid-template-columns:1fr}
  .row2{gap:10px}
  /* forzar rejillas de KPIs/resumen a 2 columnas aunque tengan estilo en línea */
  .kpi-grid{grid-template-columns:1fr 1fr!important}
  /* horas/fechas: texto a la izquierda, sin aspecto de caja vacía */
  .field input[type=time],.field input[type=date]{text-align:left}
}

/* móvil muy estrecho: todo a una columna para que respire */
@media(max-width:380px){.kpi-grid{grid-template-columns:1fr!important}}

/* ---- robustez de layout: las celdas de rejilla pueden encogerse (anti-solape) ---- */
.row2,.grid,.grid2,.kpi-grid,.cards{min-width:0}
.field,.row2>*,.grid>*,.grid2>*{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}

/* ---- pantalla de login / bloqueo (acabado premium) ---- */
.login-logo{display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px;animation:riseIn .5s var(--ease-spring) backwards}
.login-logo img{width:184px;height:auto;display:block}
.login-card{width:368px;text-align:center;padding:30px 28px 26px}
.login-card h3{font-size:23px;letter-spacing:-.02em;margin:2px 0 4px}
.login-card .msub{font-size:13.5px;color:var(--muted);margin-bottom:20px}
.login-card .field input{font-size:15px;padding:12px 14px;border-width:1.5px;border-radius:12px}
.lg-field{text-align:left;margin-bottom:14px}
.lg-field label{font-size:12.5px;font-weight:600;margin-bottom:6px}
.login-card .field input.bad{border-color:var(--danger)}
.login-card .pwrap{position:relative}
.login-card .pwrap input{padding-right:46px}
.login-card .eye{position:absolute;top:0;right:0;height:100%;width:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--muted);cursor:pointer;border-radius:0 12px 12px 0}
.login-card .eye:hover{color:var(--text)} .login-card .eye .ic-svg{width:21px;height:21px}
.login-btn{width:100%;justify-content:center;gap:8px;padding:14px;font-size:15.5px;margin-top:4px;box-shadow:0 12px 26px -8px var(--brand)}
.login-btn .spin{width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px;margin-right:7px}
@keyframes spin{to{transform:rotate(360deg)}}
/* spinner genérico dentro de un botón (p. ej. "Creando…" al crear una cita) */
.btn .spin{width:15px;height:15px;border:2.4px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-2px;margin-right:8px}
.btn[disabled]{opacity:.8;cursor:default}
.lg-error{display:flex;align-items:center;gap:7px;justify-content:center;color:var(--danger);font-size:12.5px;font-weight:600;margin-top:10px;animation:shakeX .3s ease}
.lg-error .ic-svg{width:15px;height:15px;flex:none}
@keyframes shakeX{10%,90%{transform:translateX(-1px)}30%,70%{transform:translateX(2px)}50%{transform:translateX(-3px)}}
.lg-foot{margin-top:16px;font-size:13px}
.lg-foot a{color:var(--brand-text);font-weight:700;text-decoration:none}
@media(max-width:640px){ .login-card{width:auto} }

/* ---- foco visible (teclado) elegante en toda la app ---- */
.btn:focus-visible,.nav-item:focus-visible,.icon-btn:focus-visible,.chip:focus-visible,.seg button:focus-visible,.swatch:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-soft)}

/* ---- refinamientos modo oscuro ---- */
body.dark ::-webkit-scrollbar-thumb{background:#34343c;background-clip:padding-box}
body.dark ::-webkit-scrollbar-thumb:hover{background:#44444d;background-clip:padding-box}
body.dark .sb-collapse{background:rgba(148,163,184,.14)}
body.dark .sb-collapse:hover{background:rgba(148,163,184,.26)}
body.dark .topbar{border-bottom-color:#2a2a30}
body.dark .login-logo{box-shadow:0 14px 34px rgba(0,0,0,.5)}
body.dark .kbtn .kbd,body.dark .seg{background:#161618}
body.dark code{background:#161618!important;color:var(--text)}

/* ---- herramientas del menú lateral: tema + idioma (compactas, al pie) ---- */
@keyframes tmpop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.sb-tools{display:flex;gap:8px;padding:4px 4px 10px;position:relative}
.sb-tool{flex:none;height:32px;min-width:38px;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #2e2e36;background:transparent;color:#9a9aa3;border-radius:9px;cursor:pointer;font:inherit;font-size:12px;font-weight:600;padding:0 9px;transition:background .15s var(--ease),color .15s var(--ease)}
.sb-tool:hover{background:var(--sidebar-2);color:#fff}
.sb-tool .ic-svg{width:16px;height:16px}
.sb-lang .sb-flag{font-size:14px;line-height:1} .sb-lang .sb-code{letter-spacing:.04em}
.lang-pop{position:absolute;left:4px;bottom:calc(100% - 2px);min-width:182px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--sh-lg);padding:6px;z-index:62;animation:tmpop .14s var(--ease-out)}
.lang-opt{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;font:inherit;font-size:13.5px;color:var(--text);padding:8px 9px;border-radius:8px;cursor:pointer;text-align:left}
.lang-opt:hover{background:var(--surface-2)} .lang-opt.on{color:var(--brand-text);font-weight:700}
.lang-opt .lang-check{margin-left:auto;display:inline-flex} .lang-opt .lang-check .ic-svg{width:15px;height:15px;color:var(--brand-text)}
.lang-opt .sb-flag{font-size:15px}
/* en el menú plegado (rail) las herramientas se apilan y el código se oculta */
body.sb-collapsed .sb-tools{flex-direction:column;align-items:center}
body.sb-collapsed .sb-lang .sb-code{display:none}

/* ---- cabecera de agenda (fecha prominente + ⌄) estilo Booksy ---- */
.ag-head{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ag-datenav{display:flex;align-items:center;gap:6px;position:relative}
/* resumen del periodo (nº citas + previsto) junto a la fecha */
.ag-sum{display:inline-flex;align-items:baseline;gap:5px;font-size:13px;color:var(--muted);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ag-sum:empty{display:none}
.ag-sum .ag-cnt b{color:var(--text);font-weight:700}
.ag-arrow{width:34px;height:34px;flex:none;border:1px solid var(--border);background:var(--surface);border-radius:10px;font-size:20px;line-height:1;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s var(--ease)}
.ag-arrow:hover{border-color:var(--brand-text);color:var(--brand-text)}
.ag-date{position:relative;display:inline-flex;align-items:center;gap:6px;border:none;background:none;font:inherit;font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--text);cursor:pointer;padding:5px 9px;border-radius:10px;text-transform:capitalize}
.ag-date:hover{background:var(--surface-2)}
.ag-date .ic-svg{width:16px;height:16px;color:var(--muted)}
.ag-today{margin-left:auto}
/* calendario del mes propio (tocar un día navega directo, sin "OK") */
.ag-calpop{position:absolute;top:calc(100% + 6px);left:34px;z-index:60;width:262px;background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:var(--sh-md);padding:11px}
.calpop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.calpop-title{font-size:14.5px;font-weight:700;text-transform:capitalize;letter-spacing:-.01em}
.calpop-nav{width:30px;height:30px;flex:none;border:none;background:none;border-radius:9px;font-size:19px;line-height:1;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s var(--ease)}
.calpop-nav:hover{background:var(--surface-2);color:var(--brand-text)}
.calpop-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;margin-bottom:3px}
.calpop-dow span{text-align:center;font-size:10.5px;font-weight:700;color:var(--muted)}
.calpop-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:34px;gap:2px}
.calpop-cell{min-width:0;border:none;background:none;border-radius:9px;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.13s var(--ease)}
.calpop-cell:hover:not(.empty){background:var(--surface-2)}
.calpop-cell.today{color:var(--brand-text);font-weight:800}
.calpop-cell.sel{background:var(--brand);color:var(--brand-ink);font-weight:800}
.ag-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* selector de profesional (ver todas / filtrar por una) */
.ag-emp{position:relative}
.ag-empbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);font:inherit;font-size:12.5px;font-weight:600;color:var(--text);padding:7px 11px;border-radius:11px;cursor:pointer;transition:.15s var(--ease);max-width:190px}
.ag-empbtn:hover{background:var(--surface-2)}
.ag-empbtn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ag-empbtn .ic-svg{width:15px;height:15px;color:var(--muted);flex:none}
.ag-empbtn .ic-svg:last-child{width:13px;height:13px}
.ag-empmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:220px;max-height:330px;overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-lg);padding:6px;animation:fadeUp .14s var(--ease-out)}
.ag-empmenu[hidden]{display:none}
.ag-empitem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--text);padding:9px 10px;border-radius:9px;cursor:pointer;text-align:left;letter-spacing:-.01em}
.ag-empitem:hover{background:var(--surface-2)}
.ag-empitem.on{color:var(--brand-text)}
.ag-empitem.on::after{content:'✓';margin-left:auto;font-weight:800;font-size:13px}
.ag-empdot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ag-empdot.all{background:conic-gradient(from 210deg,#e0608f,#d99a2e,#7fae3a,#2fa1a8,#4a8fd6,#9a6cd0,#e0608f)}
body.dark .ag-empbtn{background:#161618}
body.dark .ag-empmenu{background:#161618}
/* carrusel de cambio de día (dos días contiguos deslizando a la vez) */
.ag-paging{overflow:hidden}
.ag-track{display:flex;width:200%;will-change:transform}
.ag-pane{flex:0 0 50%;max-width:50%;overflow:hidden}
/* botón flotante "+" (FAB) */
.fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;border:none;background:var(--brand);color:var(--brand-ink);box-shadow:0 10px 26px var(--brand-soft),0 4px 12px rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:30;transition:transform .16s var(--ease-spring),filter .15s var(--ease)}
.fab:hover{filter:brightness(1.06);transform:translateY(-2px)}
.fab:active{transform:scale(.92)}
.fab .ic-svg{width:26px;height:26px}

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

/* =========================================================
   RENOVACIÓN AAA — sheets nativos (drawer/modal) con safe-area + Atrás
   ========================================================= */
/* barra superior del drawer: Atrás (izq) + cerrar (der) — siempre visible, sobre el notch */
.sheet-nav{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:4;flex:none}
.sheet-back{display:inline-flex;align-items:center;gap:3px;border:none;background:none;cursor:pointer;color:var(--text);font:inherit;font-size:14.5px;font-weight:600;padding:7px 11px 7px 7px;border-radius:11px;transition:background .15s var(--ease)}
.sheet-back svg{width:21px;height:21px}
.sheet-back:hover{background:var(--surface-2)} .sheet-back:active{transform:scale(.96)}
.sheet-x{margin-left:auto;width:34px;height:34px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:var(--surface-2);color:var(--muted);border-radius:50%;cursor:pointer;transition:.15s var(--ease)}
.sheet-x svg{width:16px;height:16px}
.sheet-x:hover{background:var(--border);color:var(--text)} .sheet-x:active{transform:scale(.92)}
/* ✕ del modal: esquina, discreta */
.modal>.sheet-x{position:absolute;top:14px;right:14px;background:transparent;z-index:5}
.modal>.sheet-x:hover{background:var(--surface-2)}
/* asa (grip) de los sheets en móvil */
.sheet-grip{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:5px;border-radius:5px;background:var(--border);z-index:5}
body.dark .sheet-grip{background:#3c3c44}

/* aviso "guardando cambios" (solo aparece si una escritura se está reintentando) */
.save-banner{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:70;
  display:flex;align-items:center;gap:9px;background:#3a2f14;color:#ffdb92;border:1px solid #6b551f;
  padding:9px 16px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.save-banner.show{opacity:1;transform:translate(-50%,0)}
.save-banner b{font-weight:700}
.save-banner svg{width:16px;height:16px;flex:none;animation:saveSpin 1.1s linear infinite}
@keyframes saveSpin{to{transform:rotate(360deg)}}
@media(max-width:900px){ .save-banner{bottom:calc(80px + env(safe-area-inset-bottom))} }  /* por encima de la barra inferior */
@media(prefers-reduced-motion:reduce){ .save-banner svg{animation:none} }

@media(max-width:640px){
  /* modal = hoja inferior nativa (sube desde abajo, esquinas redondeadas arriba) */
  .overlay{align-items:flex-end}
  .modal{width:100%;max-width:100%;border-radius:24px 24px 0 0;max-height:min(92vh,calc(var(--ovh,100vh) - 8px));padding:24px 18px calc(20px + env(safe-area-inset-bottom));animation:sheetUp .32s var(--ease-out)}
  .modal>.sheet-grip{display:block}
  .modal h3{padding-right:30px;padding-top:8px}
  /* drawer = pantalla completa que sube desde abajo, barra Atrás sobre el notch */
  .drawer{width:100vw;max-width:100vw;animation:sheetUp .32s var(--ease-out)}
  .sheet-nav{padding-top:max(9px,calc(env(safe-area-inset-top) + 7px));padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .drawer-body{padding:14px max(18px,env(safe-area-inset-left)) calc(26px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-right))}
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}

/* =========================================================
   RENOVACIÓN AAA — sistema visual elevado (estilo Booksy/Fresha)
   ========================================================= */
body{font-feature-settings:"cv11","ss01";letter-spacing:-.005em}

/* tarjetas: más aire, sombra en capas, borde suave */
.card,.kpi,.emp-card{box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--border) 80%,transparent)}
.card{padding:22px}
.card h3{font-size:14.5px;letter-spacing:-.015em}
.kpi{padding:22px;border-radius:18px}
.kpi .v{font-size:28px}
.kpi .ico{border-radius:13px}
.kpi:hover,.emp-card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px)}

/* botones: tacto premium, sombra suave, marca con glow del color */
.btn{padding:10px 16px;border-radius:12px;font-weight:600}
.btn:hover{box-shadow:var(--sh-md);transform:translateY(-1px)}
.btn-brand{box-shadow:0 6px 16px -6px var(--brand)}
.btn-brand:hover{box-shadow:0 12px 26px -8px var(--brand);filter:brightness(1.04)}
.btn-ghost:hover{box-shadow:none}
.icon-btn{border-radius:12px}

/* =========================================================
   DETALLE DE CITA — pantalla premium (héroe + botones 3D)
   ========================================================= */
.cita-card{margin:-2px 0 -4px}
/* héroe: tarjeta centrada con el degradado del color del servicio (fondo inline) */
.cita-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 20px 24px;border-radius:18px;margin-bottom:16px}
.cita-glow{position:absolute;top:-45%;left:50%;transform:translateX(-50%);width:260px;height:260px;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.3),transparent 66%)}
.cita-hd{min-width:0;width:100%;position:relative}
.cita-name{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.3);overflow-wrap:anywhere}
.cita-when{color:rgba(255,255,255,.88);font-size:13px;font-weight:500;margin-top:4px}
.cita-tags{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;justify-content:center}
.cita-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);padding:4px 10px 4px 8px;border-radius:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cita-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.cita-badge.b-conf::before{background:#34d399;box-shadow:0 0 7px #34d399}
.cita-badge.b-pend::before{background:#fbbf24;box-shadow:0 0 7px #fbbf24}
.cita-badge.b-comp::before{background:#93c5fd}
.cita-badge.b-no::before{background:#f87171;box-shadow:0 0 7px #f87171}
.cita-badge.tag-plain::before{display:none}
.cita-badge.tag-plain .ic-svg{width:13px;height:13px}
/* X de cerrar visible sobre el héroe */
.modal:has(.cita-card)>.sheet-x{background:rgba(20,10,12,.28);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal:has(.cita-card)>.sheet-x:hover{background:rgba(20,10,12,.46);color:#fff}
/* insignia de cliente (VIP/nuevo) + última visita */
.cita-cbadge{margin:0 2px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.cita-cbadge:empty{display:none}
.cita-card .alert-banner{margin:0 0 12px}
/* ficha de datos */
.cita-facts{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:2px 14px;margin-bottom:2px}
.cita-fact{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.cita-fact:last-child{border-bottom:none}
.cita-fact .ci{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--surface);color:var(--brand-text);box-shadow:var(--sh)}
.cita-fact .ci .ic-svg{width:15px;height:15px}
.cita-fact .ck{color:var(--muted);font-size:12px;font-weight:600;width:82px;flex:none}
.cita-fact .cv{flex:1;min-width:0;color:var(--text);font-weight:600;line-height:1.35}
.cita-fact.money .cv{font-size:16px;font-weight:800;color:var(--brand-text);letter-spacing:-.01em}
.cita-fact.money .cv em{font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
/* acciones principales: botones 3D */
.cita-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pill{flex:1 1 calc(50% - 5px);min-width:0;position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:7px;
  border:none;border-radius:16px;padding:13px 10px;font:inherit;font-weight:800;font-size:13px;letter-spacing:.01em;color:#fff;cursor:pointer;
  background:linear-gradient(180deg,var(--p-hi),var(--p-lo));
  box-shadow:0 5px 0 0 var(--p-edge),0 12px 20px -8px var(--p-glow),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 3px rgba(0,0,0,.14);
  transform:translateY(0);transition:transform .14s var(--ease-spring),box-shadow .14s var(--ease),filter .16s var(--ease)}
.pill>span,.pill>.ic-svg{position:relative;z-index:1}
.pill>.ic-svg{width:20px;height:20px;stroke-width:2}
.pill:hover{filter:brightness(1.07) saturate(1.06);transform:translateY(-2px);
  box-shadow:0 7px 0 0 var(--p-edge),0 18px 30px -8px var(--p-glow),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 3px rgba(0,0,0,.14)}
.pill:active{transform:translateY(5px);
  box-shadow:0 0 0 0 var(--p-edge),0 5px 12px -6px var(--p-glow),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 3px rgba(0,0,0,.18)}
.pill:focus-visible{outline:none;box-shadow:0 5px 0 0 var(--p-edge),0 0 0 3px var(--surface),0 0 0 6px var(--p-lo)}
.pill--conf{--p-hi:#4b8ef7;--p-lo:#2563eb;--p-edge:#1a4bb8;--p-glow:rgba(37,99,235,.55)}   /* confirmar · azul */
.pill--pay{--p-hi:#16c884;--p-lo:#059669;--p-edge:#046b4a;--p-glow:rgba(5,150,105,.55)}    /* cobrar · verde */
.pill--edit{--p-hi:#a78bfa;--p-lo:#7c3aed;--p-edge:#5b21b6;--p-glow:rgba(124,58,237,.55)}  /* editar · amatista */
.pill--no{--p-hi:#f4736b;--p-lo:#dc2626;--p-edge:#8f1a1a;--p-glow:rgba(220,38,38,.55)}     /* inasistencia · rojo */
/* brillo que recorre la acción estrella (cobrar; y el CTA de los formularios) */
.pill--pay::after,.pill-cta::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.5) 46%,transparent 60%);
  transform:translateX(-120%);animation:pillSheen 4.8s ease-in-out .8s infinite}
@keyframes pillSheen{0%,70%{transform:translateX(-120%)}86%,100%{transform:translateX(120%)}}
/* acciones secundarias */
.cita-more{display:flex;gap:8px;margin-top:12px}
.mbtn{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:12px;padding:10px 6px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s var(--ease);box-shadow:var(--sh)}
.mbtn .ic-svg{width:15px;height:15px;color:var(--muted);transition:.15s var(--ease)}
.mbtn:hover{border-color:var(--brand-text);color:var(--brand-text);transform:translateY(-1px);box-shadow:var(--sh-md)}
.mbtn:hover .ic-svg{color:var(--brand-text)}
.mbtn:active{transform:translateY(0)}
/* pie: acciones destructivas discretas */
.cita-foot{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.lnk-danger{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--danger);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:5px 9px;border-radius:8px;transition:.15s var(--ease)}
.lnk-danger .ic-svg{width:15px;height:15px}
.lnk-danger:hover{background:var(--dangerb)}
.lnk-danger.soft{color:var(--muted)}
.lnk-danger.soft:hover{color:var(--danger);background:var(--dangerb)}
@media(prefers-reduced-motion:reduce){.pill--pay::after,.pill-cta::after{display:none}.pill{transition:filter .16s var(--ease)}}

/* campos: más altos, redondeados, foco nítido */
.field input,.field select,.field textarea{padding:11px 13px;border-radius:12px}
.field label{letter-spacing:.005em}

/* topbar: título más rotundo, separación elegante (respetando el notch) */
.topbar{padding-top:max(18px,calc(env(safe-area-inset-top) + 12px));padding-bottom:18px}
.topbar h2{font-size:20px;font-weight:800;letter-spacing:-.025em}

/* sidebar: estado activo tipo "pill" con icono en color de marca */
.nav-item{border-radius:12px;font-size:13.5px}
.nav-item.active{background:var(--sidebar-2);color:#fff}
.nav-item.active .ic{color:var(--brand-text);opacity:1}
.nav-item.active::before{top:9px;bottom:9px;width:3px}
.brand .logo{border-radius:13px;box-shadow:0 8px 20px -6px var(--brand)}

/* tablas: respiran más, cabecera fina */
.tbl{border-radius:16px}
.tbl th,.tbl td{padding:14px 16px}
.tbl th{font-size:11px;letter-spacing:.05em}

/* segmented / chips: redondeo coherente */
.seg{border-radius:12px;padding:4px} .seg button{border-radius:9px;padding:7px 14px}
.badge{padding:3px 10px}

/* modo oscuro: bordes y sombras coherentes con la nueva escala */
body.dark .card,body.dark .kpi,body.dark .emp-card{border-color:#33333a;box-shadow:0 2px 8px rgba(0,0,0,.35)}
body.dark .kpi:hover,body.dark .emp-card:hover{box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
body.dark .btn-brand{box-shadow:0 8px 20px -8px var(--brand)}

/* =========================================================
   RENOVACIÓN AAA — barra de navegación inferior (móvil, estilo Booksy/Fresha)
   ========================================================= */
.botnav{display:none}
@media(max-width:640px){
  .botnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;gap:2px;
    background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
    border-top:1px solid var(--border);box-shadow:0 -6px 22px -12px rgba(16,24,40,.22);
    padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right))}
  .bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:none;background:none;color:var(--muted);font:inherit;font-size:10.5px;font-weight:600;letter-spacing:-.01em;padding:6px 2px;border-radius:13px;cursor:pointer;transition:color .15s var(--ease),background .15s var(--ease);touch-action:manipulation}
  .bn-item .ic{display:flex;align-items:center;justify-content:center}
  .bn-item .ic .ic-svg{width:23px;height:23px}
  .bn-item.on{color:var(--brand-text)}
  .bn-item.on .ic{transform:translateY(-1px)}
  .bn-item:active{background:var(--surface-2)}
  /* el menú completo se abre desde "Más"; ocultamos el hamburguesa del topbar */
  .hamb{display:none!important}
  /* el FAB y los toasts suben por encima de la barra inferior */
  .fab{bottom:calc(76px + env(safe-area-inset-bottom))}
  .toasts{bottom:calc(80px + env(safe-area-inset-bottom))}
  .content{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}
body.dark .botnav{background:rgba(26,26,30,.9);border-top-color:#33333a}

/* App instalada (standalone iOS): el position:fixed usa 100dvh (894px), que es
   menor que la pantalla real 100vh (956px), así que la barra queda ~62px por
   encima del borde físico. La empujamos justo esa diferencia (100dvh - 100vh,
   negativo) para pegarla al fondo real. Safari (donde coinciden) no entra. */
@media (display-mode: standalone){
  .botnav{ bottom: calc(100dvh - 100vh) }
  .app{ min-height:100vh }
  body.scr-agenda .app{ height:100vh !important; max-height:100vh !important }
}

/* =========================================================
   RENOVACIÓN AAA — pulido por pantalla (cobro, recibo, agenda, métricas)
   ========================================================= */
/* cobro: total a cobrar destacado */
.cb-total{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:15px;margin-top:14px;padding:14px 16px;border-radius:14px;background:var(--brand-soft);color:var(--text)}
.cb-total #cb-total{font-size:21px;letter-spacing:-.025em;color:var(--brand-text);font-variant-numeric:tabular-nums}
/* lista de productos vendidos en el cobro */
#cb-prodlist:not(:empty){margin-top:8px;border:1px solid var(--border);border-radius:12px;padding:4px 12px;background:var(--surface-2)}

/* recibo: ticket sobre panel tintado, borde perforado */
.recibo{background:var(--surface-2);border:1px dashed var(--border);border-radius:16px;padding:20px}
body.dark .recibo{background:#1f1f24;border-color:#3a3a42}

/* agenda: tarjeta de cita un punto más nítida al pasar/seleccionar */
.ev{border-radius:12px}
.ev:hover{box-shadow:0 8px 20px rgba(16,24,40,.17)}
.now-pill{box-shadow:0 4px 10px -3px rgba(239,68,68,.5)}

/* métricas: barras del gráfico con degradado y top redondeado */
.chart .gb .fill{background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 75%,#fff),var(--brand));border-radius:8px 8px 2px 2px;box-shadow:0 6px 14px -8px var(--brand)}
.chart .gb.today .fill{outline-color:var(--brand-text)}
/* heatmap: celdas con leve elevación al pasar */
.hm-cell{transition:transform .12s var(--ease)}
.hm-cell:hover{transform:scale(1.08)}

/* =========================================================
   RENOVACIÓN AAA — pantallas secundarias
   (equipo, reseñas, portfolio, ajustes, catálogo, espera, usuarios)
   ========================================================= */
/* EQUIPO: avatar con aro, cabecera más rotunda, filas de horario claras */
.emp-head .av{width:46px;height:46px;font-size:16px;box-shadow:0 0 0 3px var(--surface),0 4px 12px -3px rgba(16,24,40,.25)}
.emp-head .nm{font-size:15.5px;letter-spacing:-.01em}
.hrow{padding:6px 0;font-size:12.5px}
.hrow .d{font-weight:600}
.hrow.libre .h{font-style:italic}

/* RESEÑAS: nota media con color de marca y separadores limpios */
.score-card .big{background:linear-gradient(135deg,var(--brand-text),color-mix(in srgb,var(--brand-text) 55%,#7c3aed));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.review{padding:14px 0}
.rate span{font-size:32px} .rate span:hover{transform:scale(1.18)}

/* PORTFOLIO: tarjetas con más profundidad */
.work{border-radius:16px;box-shadow:var(--sh-md)}
.work-ov{background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0) 60%)}

/* AJUSTES: enlace público como campo destacado */
.reslink code{border-radius:12px;background:var(--surface-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.goalfill{background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 60%,#7c3aed))}
.goalbar{box-shadow:inset 0 0 0 1px var(--border)}

/* CATÁLOGO: cabecera de categoría + contador como chip de marca */
.cat-head{font-size:15px;letter-spacing:-.01em}
.cat-n{background:var(--brand-soft);color:var(--brand-text);border-color:transparent;font-weight:700}

/* LISTA DE ESPERA / USUARIOS: filas con tacto */
.usu-row{padding:13px 2px;border-radius:12px;transition:background .14s var(--ease)}
.usu-row:hover{background:var(--surface-2)}

/* BONOS: tarjeta de paquete más definida */
.bono{border:1px solid var(--border);border-radius:12px;background:var(--surface)}

/* AVISOS (campana): tarjeta con icono elevado */
.aviso-row{border-radius:13px}
.aviso-row .aviso-ic{box-shadow:var(--sh)}

/* =========================================================
   RENOVACIÓN AAA — AGENDA (lo más importante de la app)
   Scroll interno con cabeceras de profesional y eje de horas FIJOS
   (al bajar, nombres y horas se quedan visibles, estilo Booksy/Fresha).
   ========================================================= */
.cal{overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:var(--sh-md);scrollbar-width:thin;scroll-padding-top:68px;
  max-height:min(700px, calc(100vh - 210px)); max-height:min(700px, calc(100dvh - 210px))}
@media(max-width:640px){ .cal{max-height:calc(100dvh - 268px)} }

/* eje de horas: columna izquierda fija al hacer scroll horizontal */
.axis{position:sticky;left:0;z-index:7;width:62px;background:var(--surface)}
/* cabeceras (esquina del eje + columnas de profesional): fijas arriba */
.axis .ah{height:68px;position:sticky;top:0;z-index:3;border-bottom:1px solid var(--border);box-shadow:0 8px 12px -10px rgba(16,24,40,.22)}
.col .ch2{position:sticky;top:0;z-index:6;border-bottom:1px solid var(--border);box-shadow:0 8px 12px -10px rgba(16,24,40,.22)}
body.dark .axis .ah,body.dark .col .ch2{box-shadow:0 8px 14px -10px rgba(0,0,0,.6)}

/* etiquetas de hora: alineadas a la derecha del eje, junto a la línea */
.axis .hr{left:auto;right:9px;padding:0;text-align:right;font-size:11px;font-weight:600;color:#9aa1ad;font-variant-numeric:tabular-nums;letter-spacing:.01em}
body.dark .axis .hr{color:#828892}
.axis .hr-first{top:6px}

/* avatar de profesional con aro y nombre más definido */
.col-av{width:34px;height:34px;font-size:13.5px}
.col-nm{font-size:12px;font-weight:600}

/* líneas de hora más suaves; franja cerrada más discreta */
.gl{border-top-color:#d3d8e0}
.off{background:rgba(100,116,139,.10);opacity:1}
body.dark .off{background:rgba(255,255,255,.055)}

/* línea de "ahora" más nítida + punto */
.nowline{height:2px;z-index:5}
.now-pill{z-index:6;font-weight:800;box-shadow:0 4px 10px -3px rgba(239,68,68,.5)}

/* tarjeta de cita: tipografía y profundidad afinadas */
/* padding y interlineado ajustados: cada píxel cuenta para que quepan nombre y servicio */
.ev{border-radius:11px;padding:5px 7px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08)}
.ev .t{font-size:11.5px;line-height:1.2} .ev .t b{font-weight:800;font-size:12px}
.ev .s{font-size:10.5px;line-height:1.2;margin-top:0}
.ev:hover{box-shadow:0 10px 22px -6px rgba(16,24,40,.22);z-index:5}

/* pista de "arrastra para crear" más elegante */
.cal-hint{font-size:12px;color:var(--muted)}

/* =========================================================
   FIX — menú lateral con scroll + campana del topbar sin quedar sola
   ========================================================= */
/* el menú lateral hace scroll: idioma y tema (al pie) siempre alcanzables */
.brand{flex:none}
.nav{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.nav::-webkit-scrollbar{width:0;height:0}
.nav-foot{flex:none}
@media(max-width:640px){
  .sidebar{height:100dvh}
  .nav-foot{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

/* =========================================================
   AGENDA estilo Booksy v2 — solo el calendario se desplaza,
   líneas cada 15 min y más grande/limpio
   ========================================================= */
/* solo el calendario hace scroll (cabecera de fecha + semana fijas).
   overscroll-behavior:none corta el rebote de iOS que arrastraba la pantalla,
   sin recurrir a position:fixed (que dejaba un marco inferior bajo la barra). */
body.scr-agenda{overflow:hidden;overscroll-behavior:none}
body.scr-agenda .app{height:100dvh;max-height:100dvh}
body.scr-agenda .main{min-height:0;overflow:hidden}
/* en la agenda no hay barra superior: se aprovecha ese espacio (la campana va junto a "Hoy") */
body.scr-agenda .topbar{display:none}
body.scr-agenda .content{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-top:calc(env(safe-area-inset-top) + 8px)}
.ag-bell{flex:none}
body.scr-agenda .ag-head,body.scr-agenda #chips,body.scr-agenda .cal-hint{flex:none}
body.scr-agenda #agView{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.scr-agenda #agView .cal{flex:1 1 auto;min-height:0;max-height:none;overscroll-behavior:contain}
/* vistas Semana y Mes: también hacen scroll dentro de la agenda */
body.scr-agenda #agView .weekgrid,body.scr-agenda #agView .month{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body.scr-agenda #agView .weekgrid{align-content:start}
@media(max-width:640px){
  body.scr-agenda .content{padding-bottom:calc(58px + env(safe-area-inset-bottom))} /* deja sitio a la barra inferior */
  body.scr-agenda .cal-hint{display:none}                                            /* más limpio en móvil */
}

/* líneas de 15 min: la hora en punto sólida; los cuartos, finos y discontinuos */
.gl{border-top-color:#cdd3dc}                               /* hora en punto: línea nítida (también sobre el sombreado) */
.gl-q{border-top-style:dashed;border-top-color:#dfe3ea}     /* cuartos: más suave, punteada */
body.dark .gl-q{border-top-color:rgba(255,255,255,.06)}
/* etiquetas de cuarto de hora: pequeñas y grises (se distinguen de la hora) */
.axis .hr-q{font-size:9.5px;font-weight:600;color:#c4c9d2;right:9px}
body.dark .axis .hr-q{color:#565b65}

/* más grande y limpio: columnas que caben a lo ancho si hay pocas profesionales */
.col{min-width:128px}
.cal-tres .col{min-width:148px}

/* === copiar diseño Booksy: sin títulos de pantalla + cabecera de columna === */
/* fuera los títulos del topbar (se gana espacio en todas las pantallas) */
.topbar h2,.topbar .sub{display:none}
.topbar{padding-top:max(8px,calc(env(safe-area-inset-top) + 6px));padding-bottom:8px}
/* eje un poco más estrecho */
.axis{width:52px}
.axis .ah{height:62px}
/* cabecera de columna: avatar gris + nombre + horario, alineado a la izquierda (estilo Booksy) */
.col .ch2{flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;padding:8px 11px;text-align:left;height:62px}
.col-av{background:var(--surface-2);color:var(--muted);box-shadow:none;width:34px;height:34px;font-size:12px;font-weight:700}
.col-meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.col-nm{font-size:13px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-hr{font-size:10.5px;color:var(--muted);font-weight:500;white-space:nowrap}

/* === vista de SEMANA como rejilla de horas: eje + 7 columnas que caben a lo ancho === */
body.scr-agenda #agView .cal.cal-week{overflow-x:hidden}
.cal-week .col{min-width:0;flex:1 1 0}
.cal-week .ch2{flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 1px;text-align:center}
.cal-week .wk-dn{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}
.cal-week .wk-dd{font-size:14.5px;font-weight:800;line-height:1;min-width:23px;height:23px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0 3px}
.cal-week .wk-dd.on{background:var(--brand);color:var(--brand-ink)}
.cal-week .wk-col.today .wk-dn{color:var(--brand-text)}
.cal-week .ev{left:1px;right:1px;padding:1px 3px;border-radius:5px;border-left-width:3px;box-shadow:none}
.cal-week .wk-ev-t{font-size:9px;font-weight:800;display:block;line-height:1.25;overflow-wrap:anywhere}
.cal-week .wk-ev-s{font-size:8.5px;font-weight:500;opacity:.85;display:block;line-height:1.2;overflow-wrap:anywhere}
.cal-week .cbody{cursor:pointer}

/* día con 3+ profesionales repartidas: cabecera compacta y centrada para columnas estrechas */
:is(.cal-fit-3,.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .ch2{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;text-align:center}
:is(.cal-fit-3,.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .col-meta{align-items:center;text-align:center;width:100%}
:is(.cal-fit-3,.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .col-av{width:30px;height:30px;font-size:12px}
:is(.cal-fit-3,.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .col-nm{font-size:11.5px}
:is(.cal-fit-3,.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .col-hr{font-size:10px}
/* con 4+ el ancho ya no da para el horario ni holguras en las citas */
:is(.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .col-hr{display:none}
:is(.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .ev{padding-left:5px}
:is(.cal-fit-4,.cal-fit-5,.cal-fit-6,.cal-fit-7,.cal-fit-8) .ev .s{font-size:9.5px}

/* tira de la semana estilo Booksy: LUN..DOM con la fecha debajo, hoy/elegido en círculo */
#chips{margin-bottom:8px;padding:0 2px}
.weekstrip{display:flex;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.weekstrip::-webkit-scrollbar{display:none;width:0;height:0}
.week{flex:0 0 100%;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;scroll-snap-align:start}
.wkd{display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;cursor:pointer;font:inherit;padding:3px 0;border-radius:12px}
.wkd-n{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:var(--muted)}
.wkd-d{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:15px;font-weight:700;color:var(--text);transition:.15s var(--ease)}
.wkd.sel .wkd-d{background:var(--brand);color:var(--brand-ink)}
.wkd.today:not(.sel) .wkd-d{background:var(--brand-soft);color:var(--brand-text)}
.wkd.today .wkd-n{color:var(--brand-text)}
.wkd:active .wkd-d{transform:scale(.92)}

/* selector de cliente en "Nueva cita" */
.cli-pick{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:9px 12px;cursor:pointer;font:inherit;text-align:left;transition:.15s var(--ease)}
.cli-pick:hover{border-color:var(--brand-text);box-shadow:var(--sh)}
.cli-pick .av{width:30px;height:30px;font-size:12px;flex:none}
.cli-pick-nm{font-size:14px;font-weight:600;line-height:1.45;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cli-pick-ph{flex:1;color:var(--muted);font-size:14px}
.cli-pick-ico{flex:none;color:var(--muted);display:flex}.cli-pick-ico .ic-svg{width:18px;height:18px}
.cp-list{display:flex;flex-direction:column;gap:1px;max-height:46vh;overflow:auto;margin:0 -4px}
.cp-item{display:flex;align-items:center;gap:11px;width:100%;border:none;background:none;cursor:pointer;font:inherit;text-align:left;padding:9px 8px;border-radius:11px;transition:background .14s var(--ease)}
.cp-item:hover{background:var(--surface-2)}
.cp-meta{display:flex;flex-direction:column;min-width:0}
.cp-nm{font-size:14px;font-weight:600;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tel{font-size:12px}
/* botón "Atrás" en cabecera de modal (selector de cliente) */
.modal .back{display:inline-flex;align-items:center;gap:3px;margin:-4px 0 6px}
.modal .back svg{width:19px;height:19px}
/* ---- hub "Añadir clientes": opciones como tarjetas ---- */
.add-opts{display:flex;flex-direction:column;gap:9px;margin:4px 0 6px}
.add-opt{display:flex;align-items:center;gap:13px;width:100%;border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:13px 14px;cursor:pointer;font:inherit;text-align:left;transition:.16s var(--ease-out)}
.add-opt:hover{border-color:var(--brand-text);box-shadow:var(--sh-md);transform:translateY(-1px)}
.add-opt:active{transform:translateY(0)}
.add-ic{width:42px;height:42px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-text)}
.add-ic .ic-svg{width:21px;height:21px}
.add-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.add-t{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.add-d{font-size:12.5px;color:var(--muted);line-height:1.35}
.add-chev{flex:none;color:#c3c8d2;display:flex;transform:rotate(-90deg)}
.add-chev .ic-svg{width:18px;height:18px}
/* aviso/ayuda dentro de un paso de importación */
.add-tip{display:flex;gap:10px;align-items:flex-start;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 13px;font-size:12.5px;color:var(--muted);line-height:1.45;margin:6px 0 2px}
.add-tip .ic-svg{width:18px;height:18px;flex:none;color:var(--brand-text);margin-top:1px}
/* "guardar y añadir otra" */
.add-again{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text);margin:2px 0 6px;cursor:pointer}
.add-again input{width:17px;height:17px;accent-color:var(--brand-text)}
/* lista de revisión antes de importar */
.imp-list{display:flex;flex-direction:column;gap:1px;max-height:46vh;overflow:auto;margin:2px -4px 4px}
.imp-row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:11px;cursor:pointer;transition:background .14s var(--ease)}
.imp-row:hover{background:var(--surface-2)}
.imp-row input{width:18px;height:18px;flex:none;accent-color:var(--brand-text)}
.imp-rmeta{display:flex;flex-direction:column;min-width:0}
.imp-rn{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-rt{font-size:12px;color:var(--muted)}
body.dark .add-opt,body.dark .add-tip{background:#161618}
.t-actions{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end}
/* en móvil: las acciones secundarias del topbar (con texto en .btn-lbl) se
   muestran como icono; la acción principal (btn-brand) conserva su etiqueta.
   Así todo cabe en una fila junto a la campana, sin moverse. */
@media(max-width:640px){
  .topbar .t-actions .btn:not(.btn-brand) .btn-lbl{display:none}
  .topbar .t-actions .btn:not(.btn-brand){padding:9px 11px;gap:0}
}

/* ===== Facturación: caja del día, métodos de pago y facturas ===== */
.fac-datebar{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px}
.fac-date{font-size:14px;font-weight:700;min-width:0;text-align:center}
.fac-met{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.fac-met-c{flex:1 1 130px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:11px 13px;box-shadow:var(--sh)}
.fac-met-c .ic-svg{width:20px;height:20px;color:var(--brand-text);flex:none}
.fac-met-v{font-size:17px;font-weight:800;line-height:1.1}
.fac-met-l{font-size:11.5px;color:var(--muted);margin-top:1px}
.fac-list{display:flex;flex-direction:column;gap:7px}
.fac-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:11px 13px;cursor:pointer;transition:.14s var(--ease-out);box-shadow:var(--sh)}
.fac-row:hover{transform:translateY(-1px);box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--brand) 30%,var(--border))}
.fac-h{font-size:12.5px;font-weight:700;color:var(--muted);width:42px;flex:none}
.fac-main{flex:1;min-width:0;display:flex;flex-direction:column}
.fac-cli{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fac-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fac-tag{font-size:11px;font-weight:700;color:var(--brand-text);background:var(--brand-soft);border-radius:8px;padding:3px 8px;flex:none;white-space:nowrap}
.fac-tot{font-size:14px;font-weight:800;flex:none}
.fac-chev{color:var(--muted);font-size:18px;flex:none;line-height:1}
@media(max-width:480px){ .fac-tag{display:none} }

.fac-closed{display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--ok) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 35%,var(--border));color:var(--ok);border-radius:12px;padding:10px 13px;font-size:13px;font-weight:600;margin-bottom:14px}
.fac-closed .ic-svg{width:18px;height:18px;flex:none}

/* cierre de caja: arqueo y estado */
.cc-met{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.cc-met-r{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;padding:7px 2px;border-bottom:1px dashed var(--border)}
.cc-met-r:last-child{border-bottom:none}
.cc-met-r>span:first-child{display:flex;align-items:center;gap:8px;font-weight:600}
.cc-met-r .ic-svg{width:17px;height:17px;color:var(--brand-text)}
.cc-arqueo{background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:13px 14px}
.cc-ar-r{display:flex;align-items:center;justify-content:space-between;font-size:13.5px;padding:3px 0}
.cc-ar-dif{font-weight:800;border-top:1px dashed var(--border);margin-top:5px;padding-top:8px}
.cc-closed{display:flex;align-items:center;gap:11px;background:color-mix(in srgb,var(--ok) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--ok) 35%,var(--border));border-radius:13px;padding:12px 14px;margin-bottom:10px}
.cc-closed .ic-svg{width:22px;height:22px;color:var(--ok);flex:none}
.cc-closed b{font-size:14.5px}
.cc-nota{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);margin-top:10px;background:var(--surface-2);border-radius:11px;padding:10px 12px}
.cc-nota .ic-svg{width:16px;height:16px;flex:none;margin-top:1px}

/* selector segmentado (método de pago en el cobro) */
.seg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:4px}
.seg-b{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:none;background:transparent;color:var(--muted);font-weight:600;font-size:13px;padding:9px 6px;border-radius:9px;cursor:pointer;transition:.14s var(--ease)}
.seg-b .ic-svg{width:16px;height:16px}
.seg-b.on{background:var(--surface);color:var(--brand-text);box-shadow:var(--sh);font-weight:700}

/* ===== Mensajes y asistente ===== */
.msg-banner{display:flex;align-items:flex-start;gap:11px;background:linear-gradient(120deg,var(--brand-soft),transparent);border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));border-radius:14px;padding:13px 15px;margin-bottom:14px}
.msg-banner .ic-svg{width:20px;height:20px;color:var(--brand-text);flex:none;margin-top:1px}
.msg-banner b{font-size:14px}
.msg-master{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 15px;box-shadow:var(--sh);margin-bottom:14px}
.msg-tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:4px;margin-bottom:14px}
.msg-tab{flex:1;border:none;background:transparent;color:var(--muted);font:inherit;font-size:13.5px;font-weight:600;padding:10px 6px;border-radius:9px;cursor:pointer;transition:.16s var(--ease);white-space:nowrap}
.msg-tab.on{background:var(--surface);color:var(--brand-text);box-shadow:var(--sh);font-weight:700}
#msg-tabc{animation:fadeUp .26s var(--ease-out)}
.msg-bot{animation:fadeUp .26s var(--ease-out)}
.msg-list{display:flex;flex-direction:column;gap:10px;transition:opacity .25s var(--ease)}
.msg-list.dim{opacity:.5;pointer-events:none;filter:saturate(.5)}
/* OJO: sin 'both' a propósito. Estas tarjetas se inyectan al cambiar de pestaña y
   Safari/WebView a veces no dispara la animación en nodos inyectados; con 'both' se
   quedaban congeladas en opacity:0 (invisibles). Sin 'both', si la animación no corre,
   la tarjeta queda en su estado normal (visible). */
.msg-card{border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--sh);overflow:hidden;transition:box-shadow .18s var(--ease-out),border-color .18s var(--ease),transform .18s var(--ease-out);animation:msgIn .35s var(--ease-out)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg-card:hover{box-shadow:var(--sh-md);border-color:color-mix(in srgb,var(--brand) 24%,var(--border))}
.msg-card.msg-off{background:var(--surface-2)}
.msg-card.msg-off .msg-ic{opacity:.45;filter:grayscale(.4)}
.msg-card.msg-off .msg-t{color:var(--muted)}
.msg-head{display:flex;align-items:center;gap:12px;padding:14px 15px;cursor:pointer;user-select:none}
.msg-ic{width:38px;height:38px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--brand-soft);color:var(--brand-text);transition:.18s var(--ease)}
.msg-ic .ic-svg{width:19px;height:19px}
.msg-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.msg-t{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-d{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-chev{color:var(--muted);flex:none;display:flex;transition:transform .26s var(--ease-spring)}
.msg-chev .ic-svg{width:18px;height:18px}
.msg-card.open .msg-chev{transform:rotate(180deg)}
.msg-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .32s var(--ease-out),opacity .26s var(--ease),padding .32s var(--ease-out);padding:0 15px}
.msg-card.open .msg-body{max-height:680px;opacity:1;padding:0 15px 15px}
.msg-timing{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.msg-timing label{font-size:12.5px;color:var(--muted);font-weight:600}
.msg-timing input{width:74px;height:38px;text-align:center;font-weight:700;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text)}
.msg-timing .suf{font-size:12.5px;color:var(--muted)}
.msg-vars{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.msg-var{font-size:11.5px;font-weight:600;font-family:inherit;color:var(--brand-text);background:var(--brand-soft);border:1px dashed color-mix(in srgb,var(--brand) 35%,transparent);border-radius:8px;padding:3px 8px;cursor:pointer;transition:.13s var(--ease)}
.msg-var:hover{background:var(--brand);color:var(--brand-ink);border-style:solid;transform:translateY(-1px)}
.msg-ta{width:100%;min-height:74px;border:1px solid var(--border);border-radius:12px;padding:11px 13px;font:inherit;font-size:14px;line-height:1.45;resize:vertical;background:var(--surface);color:var(--text)}
.msg-ta:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.msg-prevlbl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:12px 0 7px}
.msg-prev{background:linear-gradient(160deg,#dfeee4,#cfe6d6);border-radius:14px;padding:14px;display:flex}
body.dark .msg-prev{background:linear-gradient(160deg,#10241b,#0f1f18)}
.msg-bubble{position:relative;background:#dcf8c6;color:#0b1f12;border-radius:12px 12px 12px 4px;padding:8px 11px 18px;font-size:13.5px;line-height:1.4;max-width:90%;box-shadow:0 1px 1px rgba(0,0,0,.12);animation:bubIn .3s var(--ease-spring) both}
body.dark .msg-bubble{background:#075e54;color:#eafff5}
@keyframes bubIn{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}
.msg-time{position:absolute;right:9px;bottom:5px;font-size:10px;color:#5b8a6a}
body.dark .msg-time{color:#9fd3bf}
.msg-bot{border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:var(--sh);padding:15px}
.msg-switchrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-top:1px solid var(--border)}
.msg-switchrow>div{min-width:0}
.msg-saved{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translate(-50%,16px);display:flex;align-items:center;gap:7px;background:var(--ok);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;box-shadow:0 10px 26px rgba(16,24,40,.22);opacity:0;pointer-events:none;z-index:70}
.msg-saved .ic-svg{width:15px;height:15px}
.msg-saved.show{animation:savedPop 1.7s var(--ease-out)}
@keyframes savedPop{0%{opacity:0;transform:translate(-50%,16px)}14%{opacity:1;transform:translate(-50%,0)}80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,8px)}}
@media(prefers-reduced-motion:reduce){.msg-card,.msg-bubble{animation:none}.msg-body{transition:none}}

/* ============ AGENDA — cabecera premium + barra inferior 3D + dinero (v92) ============ */
/* profundidad sutil en flechas, "Hoy", selector de profesional y Día/Semana/Mes */
.ag-arrow{background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:0 1px 2px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .16s var(--ease-spring),border-color .15s var(--ease),box-shadow .15s var(--ease),color .15s var(--ease)}
.ag-arrow:hover{transform:translateY(-1px);border-color:var(--brand-text);color:var(--brand-text);box-shadow:0 6px 13px -6px rgba(16,24,40,.3),inset 0 1px 0 rgba(255,255,255,.6)}
.ag-arrow:active{transform:scale(.9)}
.ag-today{background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:0 1px 2px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .16s var(--ease-spring),box-shadow .15s var(--ease),border-color .15s var(--ease)}
.ag-today:hover{transform:translateY(-1px);box-shadow:0 6px 13px -6px rgba(16,24,40,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.ag-empbtn{background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:0 1px 2px rgba(16,24,40,.05),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .16s var(--ease-spring),box-shadow .15s var(--ease),background .15s var(--ease)}
.ag-empbtn:hover{transform:translateY(-1px);box-shadow:0 7px 15px -6px rgba(16,24,40,.28),inset 0 1px 0 rgba(255,255,255,.5)}
.seg{background:var(--surface-2);border-color:transparent;box-shadow:inset 0 1px 3px rgba(16,24,40,.09)}
.seg button.on{background:linear-gradient(180deg,#fff,var(--surface));box-shadow:0 1px 2px rgba(16,24,40,.13),0 3px 8px -3px rgba(16,24,40,.16),inset 0 1px 0 rgba(255,255,255,.9)}
/* previsto del periodo resaltado (junto a la fecha) */
#agSummary .ag-money{color:var(--brand-text);font-variant-numeric:tabular-nums;display:inline-block;font-weight:800}
.ag-money-pop{animation:moneyPop .72s var(--ease-out)}
@keyframes moneyPop{0%{transform:scale(1)}20%{transform:scale(1.3);color:var(--ok)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
/* moneda que vuela desde el botón "+" hasta el previsto al crear una cita */
.coin-fly{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;min-width:30px;height:30px;padding:0 9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:#5a4200;border-radius:50px;background:radial-gradient(125% 125% at 32% 24%,#ffe89a,#f5c451 52%,#df9f28);box-shadow:0 5px 14px -3px rgba(224,169,46,.6),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 3px rgba(150,100,0,.35);will-change:transform,opacity}
body.dark .ag-arrow,body.dark .ag-today,body.dark .ag-empbtn{box-shadow:0 1px 2px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)}
body.dark .seg button.on{background:#161618;box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
/* ---- móvil: solo el importe junto a la fecha (el contador roba espacio) + barra inferior 3D ---- */
@media(max-width:640px){
  .ag-sum .ag-cnt{display:none}
  .ag-sum{margin-left:2px;padding-left:9px;border-left:1px solid var(--border);font-size:13.5px}
  .ag-sum:empty{border:0;padding:0}
  .bn-item .ic{width:46px;height:30px;border-radius:15px;transition:transform .24s var(--ease-spring),background .2s var(--ease),box-shadow .2s var(--ease)}
  .bn-item .ic .ic-svg{filter:drop-shadow(0 1px 1.5px rgba(16,24,40,.22));transition:filter .2s var(--ease),transform .2s var(--ease)}
  .bn-item.on .ic{transform:translateY(-3px);background:linear-gradient(180deg,var(--brand-soft),transparent);box-shadow:0 6px 12px -5px var(--brand-soft),inset 0 1px 0 rgba(255,255,255,.55)}
  .bn-item.on .ic .ic-svg{filter:drop-shadow(0 3px 4px var(--brand-soft)) drop-shadow(0 1px 1px rgba(16,24,40,.15))}
  .bn-item:active .ic{transform:translateY(-1px) scale(.88)}
  body.dark .bn-item .ic .ic-svg{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.5))}
  body.dark .bn-item.on .ic{box-shadow:0 6px 12px -5px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
}
@media(prefers-reduced-motion:reduce){.coin-fly{display:none}.ag-money-pop{animation:none}}