/* ============================================================
   CEAON · Super Admin — UI
   Marca CEAON tal cual: monocromático (negro/blanco/grises),
   rojo --domicilio SOLO donde ya se usa. Fuente Roboto (la de la app).
   Autocontenido: única hoja de estilos del admin.
   ============================================================ */

:root {
  --black:#0d0d0d;
  --ink:#1a1a1a;
  --white:#ffffff;
  --gray-50:#fafafa;
  --gray-100:#f5f5f5;
  --gray-200:#ececec;
  --gray-300:#d9d9d9;
  --gray-500:#8a8a8a;
  --gray-700:#4a4a4a;
  --domicilio:#e63946;       /* rojo Manos Expertas (marca) */
  --line:#e8e8e8;
  --sidebar-w:230px;
  --sidebar-w-collapsed:76px;
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:10px;
  --radius-lg:14px;
}

* { box-sizing:border-box; margin:0; padding:0; }
/* Sin rebote del scroll: va en la PÁGINA, no en `*`. Puesto en todos los elementos, cada
   panel/tabla/tarjeta con su propio scroll o recorte se quedaba con la rueda y no dejaba
   bajar la página encima de él. Las listas internas de menús y popups usan `contain`. */
html, body { overscroll-behavior:none; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font);
  background:var(--gray-50);
  color:var(--ink);
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
.tnum { font-variant-numeric:tabular-nums; }

/* ============================================================
   SHELL + SIDEBAR (negro CEAON)
   ============================================================ */
/* overflow-x:clip evita scroll horizontal si algún contenido (p.ej. un nombre muy
   largo) se pasa de ancho, SIN romper el sticky del topbar ni el drawer fijo. */
.shell { min-height:100vh; overflow-x:clip; }

.sidebar {
  position:fixed; top:0; left:0;
  width:var(--sidebar-w); height:100vh;
  background:var(--black); color:var(--white);
  display:flex; flex-direction:column;
  padding:20px 12px calc(26px + env(safe-area-inset-bottom, 0px));
  transition:width .18s ease;
  z-index:40;
}

.sidebar__brand { display:flex; align-items:center; gap:10px; padding:6px; margin:-4px; border:0; background:transparent; color:inherit; width:calc(100% + 8px); text-align:left; font-family:inherit; cursor:pointer; border-radius:10px; transition:background .15s; }
.sidebar__brand:hover { background:rgba(255,255,255,.06); }
.sidebar__brand img { width:40px; height:40px; object-fit:contain; flex:0 0 auto; }
/* Sello (Manos Expertas) sobre el sidebar oscuro: moneda blanca para que resalte */
.sidebar__brand img.brand-badge { background:#fff; border-radius:50%; padding:2px; }
/* Ícono de app de tu manicure: cuadro redondeado propio (no se recorta en círculo). */
.sidebar__brand img.brand-badge--tm { background:transparent; border-radius:0; padding:0; }
.sidebar__brand-text { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
/* display:block es imprescindible: el text-overflow:ellipsis NO recorta en inline. */
.sidebar__brand-name { display:block; font-weight:700; font-size:15px; letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__brand-sub { font-size:10.5px; color:rgba(255,255,255,.45); letter-spacing:.14em; text-transform:uppercase; }

.nav { margin-top:18px; flex:1; display:flex; flex-direction:column; gap:1px; overflow-y:auto; overscroll-behavior:contain; }
.nav__section { font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:rgba(255,255,255,.32); padding:13px 10px 5px; }
.nav__item {
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; border-radius:9px;
  font-size:13.5px; color:rgba(255,255,255,.6);
  transition:background .15s,color .15s; white-space:nowrap;
}
.nav__item:hover { background:rgba(255,255,255,.07); color:var(--white); }
.nav__item.is-active { background:rgba(255,255,255,.13); color:var(--white); font-weight:500; }
.nav__item svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav__badge { margin-left:auto; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:1px 7px; }
/* Badge de notificación (citas por reseñar) */
.nav__notif { margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--domicilio); color:#fff; font-size:10.5px; font-weight:700; line-height:1; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px rgba(230,57,70,.22); }
/* Colapsado: se vuelve un punto rojo en la esquina del icono */
.shell.is-collapsed .nav__notif { position:absolute; top:5px; right:8px; margin:0; min-width:9px; width:9px; height:9px; padding:0; font-size:0; border:1.5px solid var(--sidebar-bg,#1a1a1a); box-shadow:none; }
.nav__item--new { margin-top:6px; color:#fff; background:rgba(255,255,255,.07); border:1px dashed rgba(255,255,255,.22); }
.nav__item--new:hover { background:rgba(255,255,255,.13); border-style:solid; color:#fff; }

.sidebar__foot { margin-top:10px; border-top:1px solid rgba(255,255,255,.1); padding-top:12px; }
.sidebar__user { padding:0 8px 8px; }
.sidebar__user-name { display:block; font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__user-mail { font-size:11.5px; color:rgba(255,255,255,.4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar__action { display:flex; align-items:center; gap:12px; width:100%; padding:9px 11px; border-radius:9px; border:0; background:transparent; color:rgba(255,255,255,.55); font-size:13.5px; transition:background .15s,color .15s; }
.sidebar__action:hover { background:rgba(255,255,255,.07); color:var(--white); }
.sidebar__action svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* Colapsado (desktop) */
.shell.is-collapsed .sidebar { width:var(--sidebar-w-collapsed); padding-left:14px; padding-right:14px; }
.shell.is-collapsed .side-label,
.shell.is-collapsed .sidebar__brand-text,
.shell.is-collapsed .sidebar__user,
.shell.is-collapsed .nav__section,
.shell.is-collapsed .nav__badge { display:none; }
.shell.is-collapsed .nav__item,
.shell.is-collapsed .sidebar__action { justify-content:center; gap:0; position:relative; }
.shell.is-collapsed .sidebar__brand { justify-content:center; }

/* Tooltips al colapsar: la etiqueta oculta flota como chip a la derecha del ícono en hover.
   (overflow:visible en .nav para que el chip no lo recorte el scroll del menú) */
.shell.is-collapsed .nav { overflow:visible; }
.shell.is-collapsed .nav__item:hover .side-label,
.shell.is-collapsed .sidebar__action:hover .side-label {
  display:block; position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:#242424; color:#fff; font-size:12.5px; font-weight:500; letter-spacing:normal; text-transform:none;
  white-space:nowrap; padding:6px 11px; border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12);
  z-index:60; pointer-events:none;
}
/* Flechita del tooltip */
.shell.is-collapsed .nav__item:hover .side-label::before,
.shell.is-collapsed .sidebar__action:hover .side-label::before {
  content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-right-color:#242424;
}
.toggle-chevron { transition:transform .18s ease; }
.shell.is-collapsed .toggle-chevron { transform:rotate(180deg); }

/* ============================================================
   MAIN
   ============================================================ */
.main { margin-left:var(--sidebar-w); min-width:0; transition:margin-left .18s ease; }
.shell.is-collapsed .main { margin-left:var(--sidebar-w-collapsed); }
.main__inner { max-width:1120px; margin:0 auto; padding:36px 40px 80px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
/* En celular la acción del encabezado (ej. "Editar mi perfil") baja debajo del título */
@media (max-width:600px) { .page-head { flex-direction:column; align-items:flex-start; gap:12px; } }
.page-title { font-size:30px; font-weight:700; letter-spacing:-.02em; color:var(--black); }
.page-sub { color:var(--gray-500); font-size:14px; margin-top:3px; }
.topbar { display:none; }

/* Campanita del panel del cliente: fija arriba a la derecha, siempre visible.
   El encabezado de la página le reserva su columna para no taparle los botones. */
.bell-fab { position:fixed; top:24px; right:28px; z-index:32; width:42px; height:42px; border-radius:50%; background:var(--white); border:1px solid var(--line); color:var(--black); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.06); transition:border-color .15s; }
.bell-fab:hover { border-color:var(--black); }
.bell-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.has-bell .page-head { padding-right:56px; }
.has-bell .notif-panel { top:76px; right:28px; }
.notif-panel__close, .notif-item__del { border:0; cursor:pointer; }

/* ============================================================
   STATS
   ============================================================ */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:28px; }
.stat { background:var(--white); padding:20px 22px; }
.stat__k { font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--gray-500); display:flex; align-items:center; gap:7px; }
.stat__k svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; }
.stat__v { font-size:30px; font-weight:700; letter-spacing:-.025em; margin-top:8px; color:var(--black); }
.stat__n { font-size:12px; color:var(--gray-500); margin-top:2px; }
/* En celular: strip horizontal deslizable (una sola fila, ocupa poco alto).
   Nota: el .stat-grid a flex va DESPUÉS del bloque responsive de abajo para ganar la cascada. */
@media (max-width:600px) {
  .stat { flex:0 0 auto; width:148px; padding:15px 16px; border:1px solid var(--line); border-radius:var(--radius-lg); scroll-snap-align:start; }
  .stat__v { font-size:25px; margin-top:6px; }
  .stat__n { display:none; }
}

/* ============================================================
   PANEL / CARD / TABLA
   ============================================================ */
.panel { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.panel__head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); }
.panel__title { font-size:15px; font-weight:600; }
.card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; }

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table thead th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--gray-500); font-weight:600; padding:11px 22px; border-bottom:1px solid var(--line); }
.table tbody td { padding:13px 22px; border-bottom:1px solid var(--gray-100); vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--gray-50); }
.col-right { text-align:right; }

.prov { display:flex; align-items:center; gap:12px; }
.prov__avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--gray-100); flex-shrink:0; }
.prov__ph { width:38px; height:38px; border-radius:50%; background:var(--black); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; flex-shrink:0; }
.prov__name { font-weight:500; color:var(--black); }
.prov__meta { font-size:12px; color:var(--gray-500); }

/* Chips (monocromático; rojo solo domicilio) */
.chip { display:inline-flex; align-items:center; gap:5px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:500; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--gray-700); white-space:nowrap; }
.chip__dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip--active { color:var(--black); background:var(--gray-100); border-color:transparent; }
.chip--pending { color:var(--gray-700); background:var(--white); border-color:var(--gray-300); }
.chip--inactive { color:var(--gray-500); background:var(--white); border-color:var(--line); }
.chip--presencial { color:var(--black); background:var(--gray-100); border-color:transparent; }
.chip--domicilio { color:var(--domicilio); background:rgba(230,57,70,.08); border-color:transparent; }
button.chip { font-family:inherit; }
.js-status { cursor:pointer; }
.js-status:hover { filter:brightness(.97); }
.chip__caret { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; margin-left:2px; opacity:.55; }

/* Búsqueda en tablas */
.tsearch { display:flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:7px 14px; min-width:230px; }
.tsearch:focus-within { border-color:var(--gray-300); }
.tsearch svg { width:16px; height:16px; fill:none; stroke:var(--gray-500); stroke-width:1.8; flex-shrink:0; }
.tsearch input { border:0; outline:0; background:transparent; font-family:inherit; font-size:13.5px; width:100%; color:var(--ink); }

/* Menú inline de estado */
.status-menu { position:absolute; z-index:300; background:var(--white); border:1px solid var(--line); border-radius:11px; box-shadow:0 12px 32px rgba(13,13,13,.16); padding:6px; display:flex; flex-direction:column; gap:2px; animation:modalIn .14s ease; }
.status-menu__item { display:flex; align-items:center; padding:6px 10px 6px 8px; border:0; background:transparent; border-radius:8px; cursor:pointer; }
.status-menu__item:hover, .status-menu__item.is-current { background:var(--gray-100); }

/* Reseñas: tarjetas cuadradas (2 columnas) */
.folder-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:24px; }
.folder-card { display:flex; flex-direction:column; gap:7px; padding:22px; min-height:150px; border:1.5px solid var(--line); border-radius:var(--radius-lg); background:var(--white); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s, background .15s, box-shadow .15s; }
.folder-card:hover { border-color:var(--gray-300); }
.folder-card.is-active { border-color:var(--black); background:var(--gray-50); box-shadow:0 6px 22px rgba(13,13,13,.06); }
.folder-card__ic { width:48px; height:48px; border-radius:12px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; color:var(--black); }
.folder-card__ic svg { width:24px; height:24px; }
.folder-card.is-active .folder-card__ic { background:var(--black); color:var(--white); }
.folder-card__name { font-weight:700; font-size:18px; color:var(--black); margin-top:auto; letter-spacing:-.01em; }
.folder-card__meta { font-size:13px; color:var(--gray-500); }
.cat-panel { display:none; animation:modalIn .18s ease; }
.cat-panel.is-active { display:block; }
@media (max-width:640px) { .folder-grid { grid-template-columns:1fr; } }

/* Reseñas: folders por punto */
.folder { border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--white); overflow:hidden; overflow:clip; margin-bottom:12px; }   /* clip: recorta las esquinas sin volverse contenedor de scroll (con overscroll-behavior:none, hidden atrapaba la rueda y no dejaba bajar la página) */
.folder__head { display:flex; align-items:center; gap:14px; width:100%; padding:14px 18px; border:0; background:transparent; cursor:pointer; text-align:left; font-family:inherit; transition:background .12s; }
.folder__head:hover { background:var(--gray-50); }
.folder__info { flex:1; min-width:0; display:flex; flex-direction:column; }
.folder__name { font-weight:600; color:var(--black); }
.folder__meta { font-size:12.5px; color:var(--gray-500); }
.folder__ic { width:36px; height:36px; border-radius:9px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--black); }
.folder__ic svg { width:19px; height:19px; }
.folder__chev { width:18px; height:18px; stroke-width:2; color:var(--gray-500); transition:transform .2s; }
/* Folder de categoría (nivel 1) */
.folder--type { border-color:var(--gray-300); }
.folder__body--type { padding:14px 16px; background:var(--gray-50); border-top-color:var(--gray-300); }
.folder__body--type .folder { margin-bottom:10px; }
.folder__body--type .folder:last-child { margin-bottom:0; }
.folder.is-open .folder__chev { transform:rotate(180deg); }
.folder__body { display:none; border-top:1px solid var(--line); padding:4px 18px 8px; }
.folder.is-open .folder__body { display:block; }
.review-item { padding:14px 2px; border-bottom:1px solid var(--gray-100); }
.review-item:last-child { border-bottom:0; }
.review-item__top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.review-item__user { font-weight:500; color:var(--black); }
.review-item__date { margin-left:auto; font-size:12px; color:var(--gray-500); }
.review-item__text { color:var(--gray-700); font-size:14px; line-height:1.5; }
.review-item__reply { margin-top:8px; padding:10px 12px; background:var(--gray-50); border-radius:8px; font-size:13px; color:var(--gray-700); }
.review-item__reply b { color:var(--black); }

/* Tarjetas de reservas (tipo personas) */
.res-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:16px; }
.res-card { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:18px 18px 16px; transition:box-shadow .2s, border-color .2s; }
.res-card:hover { box-shadow:0 14px 34px rgba(13,13,13,.07); border-color:var(--gray-300); }
.res-card--past { opacity:.85; }

.res-card__head { display:flex; gap:12px; align-items:center; }
.res-card__av { width:50px; height:50px; border-radius:14px; object-fit:cover; background:var(--gray-100); flex-shrink:0; }
.res-card__ph { width:50px; height:50px; border-radius:14px; background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:18px; flex-shrink:0; }
.res-card__id { min-width:0; flex:1; }
.res-card__name { font-weight:600; color:var(--black); font-size:15.5px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.res-card__svc { font-size:12.5px; color:var(--gray-500); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Franja "cuándo": tiempo relativo + fecha/hora */
.res-when { display:flex; align-items:center; gap:10px; margin-top:14px; padding:9px 12px; background:var(--gray-50); border:1px solid var(--gray-100); border-radius:12px; }
.res-when__badge { flex:0 0 auto; background:var(--black); color:#fff; font-size:11.5px; font-weight:600; padding:4px 11px; border-radius:999px; }
.res-when__badge--past { background:var(--gray-500); }
.res-when__dt { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--ink); }
.res-when__dt svg { width:15px; height:15px; fill:none; stroke:var(--gray-500); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.res-card__meta { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.res-card__row { display:flex; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--gray-700); line-height:1.4; }
.res-card__row svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; fill:none; stroke:var(--gray-500); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.res-card__row--price { color:var(--black); }
.res-card__row--price strong { font-weight:600; font-size:14.5px; }
.res-card__tag { display:inline-block; background:var(--domicilio); color:#fff; font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:1px 6px; border-radius:5px; margin-right:5px; vertical-align:1px; }

/* Fotos adjuntas */
.res-card__photos { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.res-thumb { position:relative; display:block; width:78px; height:78px; border-radius:11px; overflow:hidden; border:1px solid var(--line); background:var(--gray-50); }
.res-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.res-thumb__cap { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:9px; font-weight:600; text-align:center; padding:2px 0; }

/* Acciones */
.res-card__actions { display:flex; align-items:center; gap:8px; margin-top:16px; flex-wrap:wrap; }
.res-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:background .15s, border-color .15s; white-space:nowrap; text-decoration:none; }
.res-btn:hover { background:var(--gray-50); border-color:var(--gray-300); }
.res-btn svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.res-card__cancel { margin-left:auto; }
.res-btn--danger { color:var(--domicilio); border-color:transparent; background:transparent; padding-left:10px; padding-right:10px; }
.res-btn--danger:hover { background:rgba(230,57,70,.08); border-color:transparent; }
.res-card__foot { }
.res-card__note { display:flex; align-items:center; gap:8px; margin-top:16px; padding:10px 12px; background:var(--gray-50); border:1px solid var(--gray-100); border-radius:10px; font-size:12.5px; color:var(--gray-500); }
.res-card__note svg { width:15px; height:15px; flex-shrink:0; fill:none; stroke:var(--gray-500); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
/* Nota de "cita vencida sin cerrar" (ámbar suave) */
.res-card__note--warn { background:#fdf6e3; border-color:#eddca5; color:#8a6d0a; }
.res-card__note--warn svg { stroke:#b8860b; }
/* WhatsApp (lado negocio) */
.res-btn--wa { background:#25D366; border-color:#25D366; color:#fff; }
.res-btn--wa:hover { background:#1eb757; border-color:#1eb757; }
.res-btn--wa svg { fill:#fff; }
/* Bloque de gestión (Confirmar / Completar / Cancelar / Reagendar) separado por una línea */
.res-card__actions--manage { margin-top:14px; padding-top:13px; border-top:1px solid var(--gray-100); }
.res-card__actions--manage form { margin:0; }

/* Contenedor de resultados: leve atenuado mientras carga la búsqueda en vivo */
#reservasResults.is-loading, #clientesResults.is-loading, #resenasResults.is-loading { opacity:.5; transition:opacity .15s; pointer-events:none; }

/* ---- Feed de moderación de reseñas (admin) ---- */
.mrev-list { display:flex; flex-direction:column; gap:14px; padding:18px 22px; }
.mrev { border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--white); }
.mrev--dim { background:var(--gray-50); }
.mrev__head { display:flex; align-items:center; gap:11px; }
.mrev__av { width:40px; height:40px; border-radius:11px; object-fit:cover; background:var(--gray-100); flex-shrink:0; }
.mrev__ph { width:40px; height:40px; border-radius:11px; background:var(--black); color:#fff; display:grid; place-items:center; font-weight:600; font-size:16px; flex-shrink:0; }
.mrev__biz { min-width:0; flex:1; }
.mrev__bizname { font-weight:600; color:var(--black); font-size:14.5px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.mrev__bizname:hover { text-decoration:underline; }
.mrev__bizmeta { font-size:12px; color:var(--gray-500); }
.mrev__stars { flex-shrink:0; }
.mrev__date { font-size:12px; color:var(--gray-500); flex-shrink:0; }
.mrev__by { font-size:12.5px; color:var(--gray-500); margin-top:11px; }
.mrev__by strong { color:var(--black); font-weight:600; }
.mrev__text { margin:4px 0 0; font-size:14px; line-height:1.5; color:var(--ink); font-style:italic; }
.mrev__reply { margin-top:8px; padding:8px 11px; background:var(--gray-50); border:1px solid var(--gray-100); border-radius:10px; font-size:13px; color:var(--gray-700, #444); }
.mrev__reply b { color:var(--black); }
.mrev__actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.mrev__actions form { margin:0; }
@media (max-width:560px) { .mrev-list { padding:14px; } .mrev__head { flex-wrap:wrap; } .mrev__date { margin-left:auto; } }

/* ---- Ficha del cliente (admin) ---- */
.cli-head { margin-bottom:18px; }
.cli-head__back { font-size:13px; color:var(--gray-500); text-decoration:none; }
.cli-head__back:hover { color:var(--black); }
.cli-head__row { display:flex; align-items:center; gap:16px; margin-top:10px; flex-wrap:wrap; }
.cli-head__av { width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--gray-100); flex-shrink:0; }
.cli-head__ph { width:64px; height:64px; border-radius:50%; background:var(--black); color:#fff; display:grid; place-items:center; font-size:26px; font-weight:600; flex-shrink:0; }
.cli-head__id { min-width:0; flex:1; }
.cli-head__name { font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--black); display:flex; align-items:center; gap:8px; flex-wrap:wrap; line-height:1.15; margin:0; }
.cli-head__sub { font-size:13px; color:var(--gray-500); margin-top:4px; }
.cli-head__actions { display:flex; gap:8px; flex-shrink:0; }
.cli-info { display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; }
.cli-info__k { font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gray-500); margin-bottom:3px; }
.cli-info__v { font-size:14.5px; color:var(--black); font-weight:500; word-break:break-word; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cli-info__v--alert { color:var(--domicilio); }
@media (max-width:600px) { .cli-info { grid-template-columns:1fr; } .cli-head__actions { width:100%; } .cli-head__actions .btn { flex:1; justify-content:center; } }

/* ===== Calendario propio de marca (modal Reagendar) ===== */
.cal { margin-top:4px; user-select:none; }
.cal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal__title { font-size:15px; font-weight:600; color:var(--black); text-transform:capitalize; }
.cal__arrow { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s; }
.cal__arrow:hover:not(:disabled) { border-color:var(--gray-400); }
.cal__arrow:disabled { opacity:.3; cursor:default; }
.cal__arrow svg { width:15px; height:15px; fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal__dow { text-align:center; font-size:10.5px; color:var(--gray-500); text-transform:uppercase; letter-spacing:.03em; padding:2px 0 6px; font-weight:500; }
.cal__day { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:11px; font-family:inherit; font-size:14px; font-weight:500; color:var(--black); cursor:pointer; position:relative; transition:background .12s, color .12s; }
.cal__day:hover:not(:disabled) { background:var(--gray-100); }
.cal__day:disabled { color:var(--gray-300); cursor:default; }
.cal__day.is-blank { pointer-events:none; }
.cal__day.is-today { font-weight:700; }
.cal__day.is-today::after { content:""; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--black); }
.cal__day.is-sel { background:var(--black); color:#fff; }
.cal__day.is-sel.is-today::after { background:#fff; }
/* Horas disponibles del modal Reagendar */
.rsched-time { margin-top:18px; }
.rsched-time label { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--gray-600); margin-bottom:8px; }
.rsched-time label svg { width:15px; height:15px; fill:none; stroke:var(--gray-500); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rsched-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(66px,1fr)); gap:7px; max-height:168px; overflow-y:auto; overscroll-behavior:contain; }
.rsched-slot { padding:9px 6px; border:1.5px solid var(--line); border-radius:10px; background:var(--white); font-family:inherit; font-size:13.5px; font-weight:600; color:var(--black); cursor:pointer; transition:border-color .12s, background .12s; }
.rsched-slot:hover { border-color:var(--gray-400); }
.rsched-slot.is-sel { border-color:var(--black); background:var(--black); color:#fff; }
.rsched-msg { grid-column:1/-1; color:var(--gray-500); font-size:13px; padding:8px 2px; }

/* Recomendados (cuando no hay reservas) */
.reco { margin-top:26px; }
.reco__head { margin-bottom:14px; }
.reco__eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); }
.reco__title { display:block; font-size:18px; font-weight:600; color:var(--black); margin-top:2px; }
.reco__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:12px; }
.reco-card { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--white); border:1px solid var(--line); border-radius:14px; text-decoration:none; transition:box-shadow .18s, border-color .18s, transform .18s; }
.reco-card:hover { box-shadow:0 10px 26px rgba(13,13,13,.07); border-color:var(--gray-300); transform:translateY(-1px); }
.reco-card__av, .reco-card__ph { width:46px; height:46px; border-radius:12px; flex-shrink:0; object-fit:cover; }
.reco-card__av { background:var(--gray-100); }
.reco-card__ph { background:var(--black); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:17px; }
.reco-card__info { min-width:0; flex:1; }
.reco-card__name { font-weight:600; font-size:14.5px; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reco-card__top { display:inline-block; background:linear-gradient(135deg,#f0cf5a,#d4af37); color:#4a3a08; font-size:9.5px; font-weight:700; letter-spacing:.02em; padding:1px 6px; border-radius:999px; vertical-align:1px; }

/* Historial: filtros (chips + búsqueda) + paginador */
.hist-tools { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.hist-chips { display:flex; gap:8px; flex-wrap:wrap; }
.hist-chip { padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--white); color:var(--gray-700); font-size:13px; font-weight:500; text-decoration:none; transition:border-color .15s, background .15s, color .15s; }
.hist-chip:hover { border-color:var(--gray-300); }
.hist-chip.is-active { background:var(--black); color:#fff; border-color:var(--black); }
.hist-search { display:flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:8px 14px; flex:1; min-width:240px; max-width:340px; }
.hist-search svg { width:16px; height:16px; fill:none; stroke:var(--gray-500); stroke-width:1.8; stroke-linecap:round; flex-shrink:0; }
.hist-search__input { border:0; background:none; outline:none; font-family:inherit; font-size:14px; color:var(--ink); flex:1; min-width:0; }
.hist-search__clear { color:var(--gray-500); text-decoration:none; font-size:18px; line-height:1; flex-shrink:0; }
.pager { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:26px; }
.pager__btn { padding:8px 16px; border-radius:10px; border:1px solid var(--line); background:var(--white); color:var(--ink); font-size:13.5px; font-weight:500; text-decoration:none; transition:background .15s, border-color .15s; }
.pager__btn:hover { background:var(--gray-50); border-color:var(--gray-300); }
.pager__btn.is-off { opacity:.4; pointer-events:none; }
.pager__info { font-size:13px; color:var(--gray-500); font-variant-numeric:tabular-nums; }
#histResults, #reviewsResults { transition:opacity .15s; }
#histResults.is-loading, #reviewsResults.is-loading { opacity:.5; }

/* Card de reseña ("Mis reseñas") — reusa el shell .res-card */
.revw__stars { display:flex; gap:2px; margin-top:4px; }
.revw__star { width:14px; height:14px; fill:var(--gray-300); flex-shrink:0; }
.revw__star.is-on { fill:var(--black); }
.revw__date { font-size:12px; color:var(--gray-500); white-space:nowrap; flex-shrink:0; align-self:flex-start; }

/* Hilo de conversación: tu reseña ↔ respuesta del negocio, unidos por una línea */
.revw-thread { margin-top:14px; }
.revw-thread__msg { position:relative; display:flex; gap:11px; align-items:flex-start; }
.revw-thread__msg:not(:last-child) { padding-bottom:14px; }
.revw-thread__msg:not(:last-child)::before { content:''; position:absolute; left:9px; top:20px; bottom:2px; width:2px; background:var(--line); transform-origin:top; animation:threadLine .45s ease both; }
.revw-thread__dot { position:relative; z-index:1; flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; }
.revw-thread__dot::after { content:''; width:7px; height:7px; border-radius:50%; }
.revw-thread__msg--mine .revw-thread__dot { background:var(--black); }
.revw-thread__msg--mine .revw-thread__dot::after { background:#fff; }
.revw-thread__msg--reply .revw-thread__dot { background:var(--white); border:1.5px solid var(--gray-300); }
.revw-thread__msg--reply .revw-thread__dot::after { background:var(--gray-500); }
.revw-thread__bubble { flex:1; min-width:0; padding-top:1px; }
.revw-thread__who { display:block; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--gray-500); margin-bottom:3px; }
.revw-thread__text { margin:0; font-size:13.5px; line-height:1.5; color:var(--gray-700); }
.revw-thread__msg--mine .revw-thread__text { font-style:italic; color:var(--ink); }
.revw-thread__msg--reply .revw-thread__bubble { background:var(--gray-50); border:1px solid var(--gray-100); border-radius:12px; padding:9px 12px; }
.revw-thread__msg--reply { animation:threadIn .5s .12s ease both; }
@keyframes threadIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes threadLine { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) { .revw-thread__msg--reply, .revw-thread__msg:not(:last-child)::before { animation:none; } }
.revw-thread__text--muted { color:var(--gray-500); font-style:normal; }

/* Formulario de respuesta ÚNICA (lado negocio) — se acomoda en el hilo, columna --reply */
.revw-reply { flex:1; min-width:0; }
.revw-reply__input { width:100%; box-sizing:border-box; margin-top:4px; padding:9px 12px; border:1px solid var(--gray-300); border-radius:12px; background:var(--white); font-family:inherit; font-size:13.5px; line-height:1.5; color:var(--ink); resize:vertical; min-height:44px; transition:border-color .15s, box-shadow .15s; }
.revw-reply__input::placeholder { color:var(--gray-400); }
.revw-reply__input:focus { outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(13,13,13,.06); }
.revw-reply__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; }
.revw-reply__hint { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--gray-500); line-height:1.3; }
.revw-reply__hint svg { width:14px; height:14px; flex-shrink:0; fill:none; stroke:var(--gray-400); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Pill "Por reseñar" (acordeón que no empuja las reseñas hacia abajo) */
.pending-pill { display:inline-flex; align-items:center; gap:9px; padding:10px 16px; margin-bottom:22px; border-radius:999px; border:1px solid #e6cf8a; background:linear-gradient(135deg,#fdf6e3,#f6ebc7); color:#5a4406; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:box-shadow .15s; }
.pending-pill:hover { box-shadow:0 4px 14px rgba(180,140,30,.2); }
.pending-pill__ic { width:15px; height:15px; fill:#d4af37; flex-shrink:0; }
.pending-pill__chev { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.pending-pill.is-open .pending-pill__chev { transform:rotate(180deg); }
/* Acordeón suave (grid 0fr→1fr) + las cards entran con fade/slide */
.pending-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s cubic-bezier(.22,.61,.36,1); }
.pending-body.is-open { grid-template-rows:1fr; }
.pending-body__inner { overflow:hidden; min-height:0; }
.pending-body .res-grid { padding-top:2px; padding-bottom:30px; opacity:0; transform:translateY(-8px); transition:opacity .3s ease, transform .34s cubic-bezier(.22,.61,.36,1); }
.pending-body.is-open .res-grid { opacity:1; transform:none; transition-delay:.06s; }
@media (prefers-reduced-motion:reduce) { .pending-body, .pending-body .res-grid { transition:none; } }

/* ===== Mi perfil (2 columnas: perfil + cuenta) ===== */
/* minmax(0,…) + min-width:0 en las tarjetas: sin esto un nombre largo (con
   white-space:nowrap) fija el min-content de la columna y estira todo el
   contenedor (scroll horizontal). Así el "…" del nombre sí recorta. */
.prof-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start; max-width:940px; }
.prof-layout > * { min-width:0; }
.prof-head { display:flex; align-items:center; gap:16px; padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line); }
.prof-avatar { width:76px; height:76px; border-radius:50%; object-fit:cover; background:var(--gray-100); border:1px solid var(--gray-200); flex-shrink:0; }
.prof-head__id { flex:1; min-width:0; }
.prof-head__name { font-size:18px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prof-head__mail { font-size:13px; color:var(--gray-500); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prof-form { display:grid; grid-template-columns:1fr 1fr; gap:15px 16px; }
.prof-form .field { margin:0; min-width:0; }
/* Evita que el input nativo de fecha (iOS) se desborde del grid: los items pueden encoger */
.prof-form .input, .prof-form .select, .prof-form textarea { min-width:0; max-width:100%; width:100%; }
.prof-form input[type="date"] { -webkit-appearance:none; appearance:none; }
.prof-form .field--full { grid-column:1 / -1; }
.prof-actions { grid-column:1 / -1; margin-top:4px; }
.field__opt { text-transform:none; letter-spacing:0; color:var(--gray-500); font-weight:400; }

/* Card de cuenta condensada (secciones con divisores) */
.acct-card { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.acct-sec { padding:18px 20px; }
.acct-sec + .acct-sec { border-top:1px solid var(--line); }
.acct-sec__title { font-size:13.5px; font-weight:700; margin:0 0 5px; }
.acct-sec__sub { font-size:12.5px; color:var(--gray-500); margin:0 0 12px; line-height:1.45; }
.acct-mail { font-size:14px; margin:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.acct-btns { display:flex; gap:8px; flex-wrap:wrap; }
.acct-disc { margin-top:12px; }
.acct-disc > summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--ink); list-style:none; display:inline-flex; align-items:center; gap:6px; padding:2px 0; user-select:none; }
.acct-disc > summary::-webkit-details-marker { display:none; }
.acct-disc > summary::before { content:"+"; font-size:16px; line-height:1; color:var(--gray-500); width:12px; text-align:center; }
.acct-disc[open] > summary::before { content:"–"; }
.acct-disc__body { margin-top:12px; }
.acct-danger .acct-sec__title { color:var(--domicilio); }

@media (max-width:820px) { .prof-layout { grid-template-columns:minmax(0,1fr); max-width:520px; } }
@media (max-width:520px) { .prof-form { grid-template-columns:1fr; } }

/* Picker de cumpleaños (solo desktop) */
.bday-enhanced { position:relative; }
.bday-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; font-family:inherit; font-size:15px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:11px 13px; cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s; }
.bday-trigger:hover { border-color:var(--gray-400); }
.bday-enhanced.is-open .bday-trigger { border-color:var(--black); box-shadow:0 0 0 3px rgba(13,13,13,.06); }
.bday-trigger__ph { color:var(--gray-500); }
.bday-trigger__ic { width:17px; height:17px; flex-shrink:0; fill:none; stroke:var(--gray-500); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.bday-pop { position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:288px; max-width:calc(100vw - 40px); background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 12px 30px rgba(13,13,13,.12); padding:14px; }
.bday-head { display:flex; gap:8px; margin-bottom:12px; }
.bday-sel { flex:1; font-family:inherit; font-size:13.5px; padding:8px 9px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); color:var(--ink); cursor:pointer; }
.bday-sel--m { flex:1.4; }
.bday-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.bday-dow span { text-align:center; font-size:10.5px; font-weight:600; color:var(--gray-500); text-transform:uppercase; }
.bday-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.bday-cell { aspect-ratio:1; min-height:34px; display:flex; align-items:center; justify-content:center; font-family:inherit; font-size:13px; color:var(--ink); background:none; border:0; border-radius:8px; cursor:pointer; transition:background .12s; }
.bday-cell:hover { background:var(--gray-100); }
.bday-cell.is-sel { background:var(--black); color:var(--white); font-weight:600; }
.bday-cell.is-sel:hover { background:var(--black); }
.bday-cell--empty { cursor:default; }
/* Selector de año propio (reemplaza el <select> nativo gigante) */
.bday-head .bday-sel--m { flex:1; }
.bday-yearbtn { flex-shrink:0; display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:8px 12px; cursor:pointer; }
.bday-yearbtn:hover { border-color:var(--gray-400); }
.bday-yearbtn svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
.bday-yearbtn.is-open svg { transform:rotate(180deg); }
.bday-years { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; max-height:216px; overflow-y:auto; overscroll-behavior:contain; padding:2px; }
.bday-yr { font-family:inherit; font-size:13px; color:var(--ink); background:none; border:0; border-radius:8px; padding:9px 0; cursor:pointer; transition:background .12s; }
.bday-yr:hover { background:var(--gray-100); }
.bday-yr.is-sel { background:var(--black); color:var(--white); font-weight:600; }
@media (max-width:560px) { .hist-tools { flex-direction:column; align-items:stretch; } .hist-search { max-width:none; } .hist-search__input { font-size:16px; } }
.reco-card__sub { font-size:12px; color:var(--gray-500); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reco-card__rate { display:flex; align-items:center; gap:5px; margin-top:4px; font-size:12px; }
.reco-card__stars { color:var(--accent); letter-spacing:1px; }
.reco-card__stars-off { color:var(--gray-300); }
.reco-card__val { font-weight:600; color:var(--ink); }
.reco-card__n { color:var(--gray-500); }
.reco-card__go { width:18px; height:18px; flex-shrink:0; fill:none; stroke:var(--gray-300); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.reco-card:hover .reco-card__go { stroke:var(--gray-500); }

/* Popup "Nueva reserva" (elegir mundo) */
.nrm { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; }
.nrm.hidden { display:none; }
.nrm__backdrop { position:absolute; inset:0; background:rgba(13,13,13,.55); animation:nrmFade .2s ease; }
.nrm__card { position:relative; background:var(--white); border-radius:20px; padding:28px 26px 26px; width:100%; max-width:440px; box-shadow:0 30px 80px rgba(0,0,0,.32); animation:nrmPop .26s cubic-bezier(.2,.9,.3,1); }
.nrm__x { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:0; background:var(--gray-100); display:grid; place-items:center; cursor:pointer; color:var(--gray-700); transition:background .15s; }
.nrm__x:hover { background:var(--gray-300); }
.nrm__x svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
.nrm__head { text-align:center; margin-bottom:22px; }
.nrm__eyebrow { display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-500); }
.nrm__title { display:block; font-size:20px; font-weight:600; color:var(--black); margin-top:4px; }
.nrm__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.nrm__opt { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:22px 14px 18px; border:1px solid var(--line); border-radius:16px; text-decoration:none; background:var(--white); transition:border-color .18s, box-shadow .18s, transform .18s; }
.nrm__opt:hover { border-color:var(--black); box-shadow:0 12px 30px rgba(0,0,0,.08); transform:translateY(-2px); }
.nrm__logo { width:74px; height:74px; display:grid; place-items:center; margin-bottom:8px; }
.nrm__logo img { max-width:100%; max-height:100%; object-fit:contain; }
.nrm__opt-name { font-size:16px; font-weight:600; color:var(--black); }
.nrm__opt-sub { font-size:12px; color:var(--gray-500); line-height:1.3; }
@keyframes nrmFade { from { opacity:0; } to { opacity:1; } }
@keyframes nrmPop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
.nrm__handle { display:none; }
/* En mobile la card se desliza desde abajo (bottom sheet), como el selector de calendario */
@media (max-width:560px) {
  .nrm { align-items:flex-end; padding:0; }
  .nrm__card { width:100%; max-width:none; border-radius:22px 22px 0 0; padding:20px 22px calc(24px + env(safe-area-inset-bottom,0px)); animation:nrmRise .3s cubic-bezier(.22,.61,.36,1); }
  .nrm__handle { display:block; width:40px; height:4px; border-radius:99px; background:var(--gray-300); margin:0 auto 16px; }
  .nrm__x { top:14px; right:14px; }
}
@keyframes nrmRise { from { transform:translateY(100%); } to { transform:none; } }
/* Cierre: la card se desliza hacia abajo y el fondo se desvanece */
.nrm.is-closing .nrm__backdrop { animation:nrmBgOut .24s ease forwards; }
.nrm.is-closing .nrm__card { animation:nrmSink .26s cubic-bezier(.4,0,1,1) forwards; }
@keyframes nrmBgOut { to { opacity:0; } }
@keyframes nrmSink { to { transform:translateY(105%); opacity:.4; } }
@media (prefers-reduced-motion:reduce) { .nrm__card, .nrm.is-closing .nrm__card, .nrm.is-closing .nrm__backdrop { animation:none; } }
@media (max-width:420px) { .nrm__grid { grid-template-columns:1fr 1fr; } }

/* Modal de ÉXITO animado (check tipo confirmación de pago) */
.dp-success { position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:24px; background:rgba(13,13,13,.6); backdrop-filter:blur(2px); animation:dpFade .2s ease; }
.dp-success.is-closing { opacity:0; transition:opacity .25s ease; }
.dp-success-card { width:100%; max-width:320px; border-radius:22px; padding:38px 28px; text-align:center; background:var(--white); box-shadow:0 30px 80px rgba(0,0,0,.3); animation:dpPop .35s cubic-bezier(.16,1,.3,1); }
.dp-check { display:block; margin:0 auto 18px; width:80px; height:80px; }
.dp-check circle { fill:none; stroke:var(--black); stroke-width:3; stroke-dasharray:226; stroke-dashoffset:226; animation:dpDraw .5s ease forwards; }
.dp-check path { fill:none; stroke:var(--black); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:50; stroke-dashoffset:50; animation:dpDraw .32s .42s ease forwards; }
.dp-success-title { font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--black); }
.dp-success-sub { margin-top:6px; font-size:13.5px; color:var(--gray-500); }
@keyframes dpDraw { to { stroke-dashoffset:0; } }
@keyframes dpPop { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
@keyframes dpFade { from { opacity:0; } to { opacity:1; } }

.stars { display:inline-flex; align-items:center; gap:5px; }
.stars svg { width:14px; height:14px; fill:var(--black); }
.stars__v { font-weight:600; }
.stars__c { font-size:12px; color:var(--gray-500); }

/* ============================================================
   BOTONES
   ============================================================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--black); color:var(--white); border:1px solid var(--black); border-radius:var(--radius); padding:11px 18px; font-size:14px; font-weight:500; transition:opacity .15s,transform .1s; }
.btn:hover { opacity:.88; }
.btn:active { transform:scale(.98); }
.btn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.btn--ghost { background:transparent; color:var(--black); border-color:var(--line); }
.btn--ghost:hover { background:var(--gray-100); opacity:1; border-color:var(--gray-300); }
.btn--sm { padding:8px 14px; font-size:13px; }
.link { color:var(--black); font-weight:500; border-bottom:1px solid transparent; transition:border-color .15s; }
.link:hover { border-color:var(--black); }
.row-actions { display:flex; gap:10px; justify-content:flex-end; align-items:center; }

/* ============================================================
   FORM
   ============================================================ */
.form-grid { display:flex; flex-direction:column; gap:18px; max-width:760px; }
.row-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field__label { font-size:11.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--gray-500); font-weight:500; }
.input, .select, .textarea { width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:11px 13px; transition:border-color .15s,box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(13,13,13,.06); }
.input[readonly] { background:var(--gray-100); color:var(--gray-500); }
.textarea { resize:vertical; min-height:84px; }
.fieldset { border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; gap:16px; }
.fieldset > legend { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-500); font-weight:600; padding:0 8px; }
.pick-map { height:300px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); position:relative; z-index:0; }

/* --- Selector de tipo (segmented) --- */
.seg { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.seg__opt { display:flex; align-items:center; gap:12px; padding:16px; border:1.5px solid var(--line); border-radius:var(--radius-lg); background:var(--white); cursor:pointer; transition:border-color .15s, background .15s; }
.seg__opt:hover { border-color:var(--gray-300); }
.seg__opt.is-on { border-color:var(--black); background:var(--gray-50); }
.seg__opt input { position:absolute; opacity:0; pointer-events:none; }
.seg__ic { width:42px; height:42px; flex-shrink:0; border-radius:10px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; color:var(--black); }
.seg__opt.is-on .seg__ic { background:var(--black); color:var(--white); }
.seg__ic svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.seg__txt { display:flex; flex-direction:column; gap:2px; }
.seg__label { font-weight:600; font-size:14.5px; color:var(--black); }
.seg__sub { font-size:12px; color:var(--gray-500); }

/* Badge de modo automático */
.mode-badge { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--gray-700); background:var(--gray-100); border-radius:999px; padding:6px 13px; }
.mode-badge b { color:var(--black); font-weight:600; }
.mode-badge.is-domicilio b { color:var(--domicilio); }
.mode-badge svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }

/* --- Uploader de foto --- */
.uploader { display:flex; align-items:center; gap:18px; }
.uploader__preview { width:96px; height:96px; border-radius:50%; object-fit:cover; background:var(--gray-100); border:1px solid var(--line); flex-shrink:0; }
.uploader__ph { width:96px; height:96px; border-radius:50%; background:var(--gray-100); border:1px dashed var(--gray-300); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.uploader__ph svg { width:30px; height:30px; fill:none; stroke:var(--gray-500); stroke-width:1.5; }
.uploader__side { display:flex; flex-direction:column; gap:6px; }
.uploader__hint { font-size:12.5px; color:var(--gray-500); max-width:280px; }

/* --- Autocompletado de dirección --- */
/* ===== Panel · Mi perfil (secciones-tarjeta) ===== */
.pf-form { max-width:680px; display:flex; flex-direction:column; gap:16px; }
.pf-sec { background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; }
.pf-sec__head { display:flex; align-items:flex-start; gap:13px; margin-bottom:20px; }
.pf-sec__ic { width:38px; height:38px; border-radius:11px; background:var(--gray-100); color:var(--black); display:grid; place-items:center; flex-shrink:0; }
.pf-sec__ic svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pf-sec__ti { font-size:15px; font-weight:700; color:var(--black); line-height:1.2; }
.pf-sec__sub { font-size:12.5px; color:var(--gray-500); margin-top:3px; line-height:1.45; text-wrap:pretty; }
.pf-sec__body { display:flex; flex-direction:column; gap:15px; }
.pf-photo { display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.field__count { font-size:11px; color:var(--gray-500); text-align:right; margin-top:4px; }

/* ===== Panel · Mis servicios ===== */
.svc-add { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.svc-add .field--full { grid-column:1 / -1; }
.svc-add__btn { grid-column:1 / -1; justify-self:start; }
@media (max-width:560px) { .svc-add { grid-template-columns:1fr; } .svc-add__btn { width:100%; justify-content:center; } }
.svc-list { display:flex; flex-direction:column; gap:10px; }
.svc-card { border:1px solid var(--line); border-radius:var(--radius-lg); padding:16px 18px; background:var(--white); }
.svc-card__top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.svc-card__name { font-size:15px; font-weight:600; color:var(--black); }
.svc-card__price { font-size:15px; font-weight:700; color:var(--black); white-space:nowrap; }
.svc-card__price--none { color:var(--gray-500); font-weight:500; font-size:12.5px; }
.svc-card__meta { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:8px; }
.svc-chip { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--gray-700,#444); background:var(--gray-100); border-radius:999px; padding:4px 10px; }
.svc-chip svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svc-card__desc { font-size:13px; color:var(--gray-500); }
.svc-card__actions { display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.svc-wrap { max-width:720px; }
.svc-editform { display:none; grid-template-columns:1fr 1fr; gap:10px 12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--gray-100); }
.svc-card.is-editing .svc-editform { display:grid; }
.svc-card.is-editing .svc-card__actions { display:none; }
.svc-card.is-editing .svc-card__top, .svc-card.is-editing .svc-card__meta { cursor:pointer; }
.svc-editform .field--full { grid-column:1 / -1; }
.svc-editform__btn { grid-column:1 / -1; justify-self:start; }
@media (max-width:560px) { .svc-editform { grid-template-columns:1fr; } }
.svc-domi { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.pf-social { display:inline-flex; align-items:center; gap:7px; }
.pf-social__ic { width:14px; height:14px; flex-shrink:0; }
.pf-actions { max-width:680px; margin-top:4px; }
/* Desktop ancho: secciones en 2 columnas; Ubicación (mapa) y Guardar a ancho completo */
@media (min-width:1000px) {
  .pf-form { max-width:940px; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
  .pf-sec--wide, .pf-actions { grid-column:1 / -1; }
}
@media (max-width:600px) {
  .pf-sec { padding:18px 16px; }
  .pf-actions .btn { width:100%; justify-content:center; }
}

.ac { position:relative; z-index:20; }
.ac__list { position:absolute; z-index:60; top:calc(100% + 4px); left:0; right:0; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(13,13,13,.1); overflow:hidden; display:none; max-height:280px; overflow-y:auto;  overscroll-behavior:contain; }
.ac__list.is-open { display:block; }
.ac__item { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; cursor:pointer; border-bottom:1px solid var(--gray-100); }
.ac__item:last-child { border-bottom:0; }
.ac__item:hover, .ac__item.is-active { background:var(--gray-50); }
.ac__item svg { width:16px; height:16px; margin-top:2px; flex-shrink:0; fill:none; stroke:var(--gray-500); stroke-width:1.7; }
.ac__main { font-size:14px; color:var(--black); }
.ac__sub { font-size:12px; color:var(--gray-500); }
.ac__loading { font-size:12px; color:var(--gray-500); padding:10px 13px; }

/* --- Redes con íconos --- */
.social-field { position:relative; }
.social-field__icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--gray-700); pointer-events:none; }
.social-field__icon svg { width:18px; height:18px; }
.social-field .input { padding-left:40px; }

/* --- Recortador de foto (mover + zoom) --- */
.cropper { position:relative; width:160px; height:160px; border-radius:50%; overflow:hidden; background:var(--gray-100); border:1px solid var(--line); cursor:grab; touch-action:none; user-select:none; flex-shrink:0; }
.cropper.is-empty { cursor:default; }
.cropper:active { cursor:grabbing; }
.cropper img { position:absolute; top:0; left:0; transform-origin:0 0; pointer-events:none; -webkit-user-drag:none; max-width:none; }
.cropper__empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; color:var(--gray-500); }
.cropper__empty svg { width:30px; height:30px; fill:none; stroke:var(--gray-500); stroke-width:1.5; }
.cropper__empty span { font-size:11px; }
.cropper__hintmove { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:10px; background:rgba(13,13,13,.6); color:#fff; padding:2px 8px; border-radius:999px; pointer-events:none; opacity:0; transition:opacity .2s; }
.cropper:hover .cropper__hintmove { opacity:1; }
.crop-zoom { display:flex; align-items:center; gap:8px; width:160px; margin-top:10px; }
.crop-zoom svg { width:15px; height:15px; fill:none; stroke:var(--gray-500); stroke-width:1.8; flex-shrink:0; }
.crop-zoom input[type=range] { width:100%; accent-color:var(--black); }
.crop-zoom.is-hidden { display:none; }

/* --- Modal de confirmación (marca) --- */
.modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:24px; }
.modal.is-open { display:flex; }
.modal__bg { position:absolute; inset:0; background:rgba(13,13,13,.45); }
.modal__card { position:relative; overflow:hidden; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:28px 26px 22px; max-width:400px; width:100%; box-shadow:0 24px 70px rgba(13,13,13,.22); animation:modalIn .2s cubic-bezier(.16,1,.3,1); }
@keyframes modalIn { from { opacity:0; transform:translateY(12px) scale(.97) } to { opacity:1; transform:none } }
.modal__wm { position:absolute; top:-34px; right:-34px; width:210px; height:210px; opacity:.05; pointer-events:none; z-index:0; }
.modal__wm svg { width:100%; height:100%; fill:none; stroke:var(--black); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.modal__title { position:relative; z-index:1; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--black); }
.modal__msg { position:relative; z-index:1; color:var(--gray-700); font-size:14px; margin:8px 0 22px; line-height:1.55; }
.modal__actions { position:relative; z-index:1; display:flex; gap:10px; }
.modal__actions .btn { flex:1; }
.modal__discard { background:transparent; color:var(--domicilio); border-color:var(--line); }
.modal__discard:hover { background:rgba(230,57,70,.07); border-color:var(--domicilio); opacity:1; }

.alert { font-size:13.5px; border-left:3px solid var(--black); background:var(--gray-100); padding:11px 14px; border-radius:0 var(--radius) var(--radius) 0; }
.alert--error { border-color:var(--domicilio); background:rgba(230,57,70,.07); color:var(--domicilio); }

.empty { text-align:center; color:var(--gray-500); padding:54px 20px; }
.empty__icon { width:42px; height:42px; margin:0 auto 14px; opacity:.4; fill:none; stroke:var(--gray-500); stroke-width:1.4; }
.empty__title { font-size:16px; font-weight:600; color:var(--gray-700); }
.empty__sub { font-size:13.5px; margin-top:4px; }

.soon { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:80px 24px; }
.soon__badge { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-700); background:var(--gray-100); padding:4px 12px; border-radius:999px; font-weight:600; }
.soon__title { font-size:24px; font-weight:700; letter-spacing:-.02em; margin-top:16px; color:var(--black); }
.soon__sub { color:var(--gray-500); margin-top:8px; max-width:420px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login { min-height:100dvh; display:grid; place-items:center; padding: calc(24px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px)); background:var(--gray-50); }
.login__card { width:100%; max-width:380px; background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:38px 34px; }
.login__brand { display:flex; align-items:center; gap:10px; margin-bottom:26px; }
.login__brand img { height:32px; width:auto; object-fit:contain; }
.login__brand-name { font-weight:700; letter-spacing:.02em; }
.login__brand-sub { font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-500); }
.login__title { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--black); }
.login__sub { color:var(--gray-500); font-size:14px; margin:4px 0 24px; }
.login .field { margin-bottom:16px; }
.login .btn { width:100%; margin-top:6px; padding:12px; }

/* ============================================================
   LOGIN 2 COLUMNAS (video + form)
   ============================================================ */
.login2 { display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh; background:var(--gray-50); }
.login2__media { position:relative; overflow:hidden; background:#0d0d0d url('../img/logo-tumanicure-dark.png') center 38% / 132px auto no-repeat; }
.login2__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.login2__overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(13,13,13,.15) 0%, rgba(13,13,13,.35) 45%, rgba(13,13,13,.82) 100%); z-index:1; }
.login2__brandbox { position:absolute; left:0; right:0; bottom:0; padding:48px 46px; color:#fff; z-index:2; }
.login2__logo { width:auto; height:66px; margin-bottom:20px; display:block; object-fit:contain; }
.login2__quote { font-family:var(--font); font-weight:300; font-size:26px; line-height:1.4; letter-spacing:-.01em; max-width:440px; }
.login2__sign { margin-top:18px; font-size:11px; text-transform:uppercase; letter-spacing:.18em; opacity:.55; }

.login2__panel { display:flex; align-items:center; justify-content:center; padding:40px 28px; }
.login2__form { width:100%; max-width:380px; }
.login2__formlogo { width:auto; height:108px; margin:0 auto 26px; display:block; object-fit:contain; }
/* Logo horizontal "tu manicure" (lockup): escala por ancho (responsive mobile/desktop) */
.login2__formlogo--wide { width:min(310px, 86%); height:auto; margin:0 auto 28px; }
/* Atribución "by Organic Nails" en el pie */
.login2__by { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:5px; font-size:14px; }
.login2__orglogo { height:22px; width:auto; opacity:.75; }
.login2__head { margin-bottom:24px; }
.login2__chip { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-700); background:var(--gray-100); padding:5px 12px; border-radius:999px; font-weight:600; }
.login2__title { font-size:30px; font-weight:700; letter-spacing:-.02em; margin-top:16px; color:var(--black); }
.login2__sub { color:var(--gray-500); font-size:14.5px; margin-top:6px; }
.login2 .field { margin-bottom:16px; }
.login2__foot { text-align:center; color:var(--gray-500); font-size:12.5px; margin-top:26px; }

@media (max-width:820px) {
  .login2 { grid-template-columns:1fr; }
  /* Video de fondo con baja opacidad (se ven las manitos detrás del form) */
  .login2__media { display:block; position:fixed; inset:0; z-index:0; background:var(--gray-50); }
  .login2__video { opacity:.34; }
  .login2__overlay { background:linear-gradient(180deg, rgba(250,250,248,.38), rgba(250,250,248,.62) 55%, rgba(250,250,248,.8)); }
  .login2__brandbox { display:none; }
  .login2__panel { position:relative; z-index:1; min-height:100dvh; padding: calc(32px + env(safe-area-inset-top, 0px)) 22px calc(32px + env(safe-area-inset-bottom, 0px)); background:transparent; }
}

/* ============================================================
   RESPONSIVE (móvil): sidebar como drawer
   ============================================================ */
.backdrop { display:none; }
@media (max-width:860px) {
  .topbar { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 12px; }
  .topbar__brand { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.02em; }
  .topbar__brand img { width:42px; height:42px; object-fit:contain; flex:0 0 auto; }
  /* Logo horizontal "tu manicure" en el topbar móvil (cliente + admin) */
  .topbar__brand--logo img { width:auto; height:38px; }
  @media (max-width:360px) { .topbar__brand--logo img { height:30px; } }   /* no choca con la campanita en pantallas angostas */
  .topbar__burger { border:1px solid var(--line); background:var(--white); border-radius:9px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
  .topbar__burger svg { width:20px; height:20px; fill:none; stroke:var(--black); stroke-width:1.8; stroke-linecap:round; }
  /* Campanita en móvil: dentro de la franja del topbar, a la izquierda del menú (debajo del drawer). */
  .bell-fab { top:calc(12px + env(safe-area-inset-top, 0px)); right:68px; width:40px; height:40px; border-radius:9px; box-shadow:none; }
  .has-bell .page-head { padding-right:0; }
  .has-bell .notif-panel { top:calc(72px + env(safe-area-inset-top, 0px)); right:10px; }

  .sidebar { position:fixed; left:0; top:0; height:100dvh; width:var(--sidebar-w); transform:translateX(-102%); transition:transform .22s ease; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .shell.drawer-open .sidebar { transform:translateX(0); }
  .shell.is-collapsed .sidebar { width:var(--sidebar-w); }
  .shell.is-collapsed .side-label,
  .shell.is-collapsed .sidebar__brand-text,
  .shell.is-collapsed .sidebar__user,
  .shell.is-collapsed .nav__section { display:block; }
  /* En el drawer móvil se ve SIEMPRE expandido (ignora el colapso de desktop):
     restaura el espacio ícono↔texto y anula el tooltip flotante. */
  .shell.is-collapsed .nav__item,
  .shell.is-collapsed .sidebar__action { justify-content:flex-start; gap:11px; }
  .shell.is-collapsed .sidebar__brand { justify-content:flex-start; }
  .shell.is-collapsed .nav__item:hover .side-label,
  .shell.is-collapsed .sidebar__action:hover .side-label { position:static; transform:none; background:none; box-shadow:none; border:0; padding:0; color:inherit; }
  .shell.is-collapsed .nav__item:hover .side-label::before,
  .shell.is-collapsed .sidebar__action:hover .side-label::before { display:none; }

  .backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .22s; z-index:35; }
  .shell.drawer-open .backdrop { opacity:1; pointer-events:auto; }

  .main, .shell.is-collapsed .main { margin-left:0; }
  .main__inner { padding:22px 18px 90px; }
  .page-title { font-size:24px; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .row-2 { grid-template-columns:1fr; }
  .table { min-width:560px; }
}
/* Celular: el grid se vuelve un carrusel horizontal deslizable (ver .stat arriba) */
@media (max-width:600px) {
  .stat-grid {
    display:flex; overflow-x:auto; overflow-y:hidden; gap:10px;
    background:none; border:0; border-radius:0; padding:2px 0 8px; margin-bottom:20px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .stat-grid::-webkit-scrollbar { display:none; }
}

/* ---- Estadísticas: barras horizontales monocromáticas ---- */
.hbars { padding:18px 22px 22px; display:flex; flex-direction:column; gap:13px; }
.hbar { display:grid; grid-template-columns:130px 1fr auto; align-items:center; gap:14px; }
.hbar__label { font-size:13px; color:var(--gray-600, #555); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar__track { height:10px; background:var(--gray-100); border-radius:5px; overflow:hidden; }
.hbar__fill { display:block; height:100%; min-width:4px; background:var(--black); border-radius:0 5px 5px 0; transition:width .4s ease; }
.hbar__value { font-size:13px; font-weight:600; color:var(--black); text-align:right; white-space:nowrap; }
.hbar__value .funnel__pct { color:var(--gray-500); font-weight:500; }
.hbars__empty { font-size:13.5px; color:var(--gray-500); padding:6px 2px 2px; }
.hbar__fill--neg { background:var(--domicilio); }
.hbar__label--star { font-weight:600; color:var(--black); }
/* Variante "apilada": la etiqueta va completa arriba (nombres largos no se cortan) */
.hbars--stack { gap:17px; }
.hbar--stack { display:block; }
.hbar--stack .hbar__label { display:block; white-space:normal; overflow:visible; text-overflow:clip; font-size:13.5px; color:var(--black); font-weight:500; margin-bottom:8px; line-height:1.35; }
.hbar--stack .hbar__row { display:grid; grid-template-columns:1fr 44px; align-items:center; gap:14px; }
.panel__sub { font-size:12px; color:var(--gray-500); }
.panel__note { margin:0; padding:14px 22px 0; font-size:12.5px; line-height:1.5; color:var(--gray-500); }
@media (max-width:560px) { .hbar { grid-template-columns:88px 1fr auto; gap:10px; } }

/* ---- Estadísticas: embudo de conversión ---- */
.funnel { padding:18px 22px 22px; display:flex; flex-direction:column; gap:16px; }
.funnel__top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:6px; }
.funnel__label { font-size:13.5px; color:var(--gray-700, #444); font-weight:500; }
.funnel__n { font-size:16px; font-weight:700; color:var(--black); letter-spacing:-.01em; }
.funnel__track { display:block; height:12px; background:var(--gray-100); border-radius:6px; overflow:hidden; }
.funnel__fill { display:block; height:100%; background:var(--black); border-radius:6px; transition:width .5s ease; }
.funnel__conv { display:block; margin-top:5px; font-size:11.5px; color:var(--gray-500); }

/* ---- Estadísticas: barras verticales (actividad semanal) ---- */
.vbars { padding:20px 22px 18px; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:12px; align-items:end; }
.vbar { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.vbar__n { font-size:13px; font-weight:600; color:var(--black); }
.vbar__col { width:100%; max-width:46px; height:120px; background:var(--gray-100); border-radius:8px; display:flex; align-items:flex-end; overflow:hidden; }
.vbar__fill { width:100%; background:var(--black); border-radius:8px 8px 0 0; transition:height .5s ease; }
.vbar__label { font-size:11.5px; color:var(--gray-500); white-space:nowrap; }

/* ---- Horarios: chips de cupos para bloquear horas sueltas ---- */
.slot-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.slot-chip { font:inherit; font-size:13px; font-weight:500; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--black); cursor:pointer; transition:all .12s ease; }
.slot-chip:hover:not(:disabled) { border-color:var(--black); }
.slot-chip.is-blocked { background:var(--black); color:var(--white); border-color:var(--black); text-decoration:line-through; }
.slot-chip.is-busy { opacity:.4; cursor:not-allowed; text-decoration:line-through; }
.slot-chip.is-lunch { background:var(--gray-100); color:var(--gray-500); border-color:var(--gray-100); cursor:not-allowed; text-decoration:line-through; }

/* ---- Agenda de reservas (panel) ---- */
.agenda-sec { margin-bottom: 26px; }
.agenda-sec__head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.agenda-sec__title { font-size: 16px; font-weight: 700; color: var(--black); letter-spacing: -.01em; }
.agenda-sec__count { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--black); color: #fff; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.agenda-sec__count--warn { background: #d9a406; }
.agenda-empty { color: var(--gray-500); font-size: 14px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 14px; background: var(--gray-50); }
.rcard { border: 1px solid var(--line); border-radius: 16px; background: var(--white); padding: 15px 16px; margin-bottom: 12px; }
.rcard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rcard__when { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.rcard__time { font-size: 19px; font-weight: 700; color: var(--black); letter-spacing: -.02em; }
.rcard__date { font-size: 13px; color: var(--gray-500); text-transform: capitalize; }
.rcard__client { font-size: 15.5px; font-weight: 600; color: var(--black); margin-top: 8px; }
.rcard__svc { font-size: 13.5px; color: var(--gray-600, #555); margin-top: 2px; }
.rcard__addr { font-size: 13px; color: var(--gray-500); margin-top: 6px; }
.rcard__notes { font-size: 13.5px; color: var(--gray-700, #444); margin-top: 8px; background: var(--gray-50); border-radius: 10px; padding: 8px 11px; line-height: 1.4; }
/* Preferencias / alergias del cliente (visible para el negocio) */
.rcard__pref { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 11px; border-radius: 10px; background: var(--gray-50); font-size: 12.5px; color: var(--gray-700, #444); line-height: 1.4; }
.rcard__pref svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rcard__pref strong { font-weight: 600; }
.rcard__pref--alert { background: rgba(230,57,70,.08); color: var(--domicilio); }
.rcard__contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--black); text-decoration: none; cursor: pointer; }
.rbtn:hover { border-color: var(--gray-400); }
.rbtn svg { width: 15px; height: 15px; }
.rbtn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.rbtn--wa:hover { background: #1eb757; border-color: #1eb757; }
.rcard__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--gray-100); }
.rcard__actions form { margin: 0; }
.rcard__resched { font-size: 13px; }
.rcard__resched summary { cursor: pointer; color: var(--gray-600, #555); }
.agenda-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.agenda-pager__btn { font-size: 13px; font-weight: 500; color: var(--black); text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
.agenda-pager__btn.is-off { color: var(--gray-300); border-color: var(--gray-100); pointer-events: none; }
.agenda-pager__info { font-size: 12.5px; color: var(--gray-500); }

/* ---- Notificaciones del panel + puntito del sidebar ---- */
.nav__dot { position: absolute; top: 5px; left: 22px; width: 9px; height: 9px; border-radius: 50%; background: var(--domicilio, #e0245e); box-shadow: 0 0 0 2px var(--black); }
.nav__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--domicilio, #e0245e); animation: navDotPing 1.5s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes navDotPing { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nav__dot::after { animation: none; } }
/* Badge de conteo en un ítem del sidebar (ej. "Por activar") */
.nav__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--domicilio, #e0245e); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.shell.is-collapsed .nav__count { position: absolute; top: 6px; right: 8px; min-width: 9px; width: 9px; height: 9px; padding: 0; font-size: 0; box-shadow: 0 0 0 2px var(--black); }
.pnotif { display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-bottom: 1px solid var(--gray-100); }
.pnotif:last-child { border-bottom: 0; }
.pnotif.is-link { cursor: pointer; transition: background .12s; }
.pnotif.is-link:hover { background: var(--gray-50); }
.pnotif__ic { width: 38px; height: 38px; border-radius: 11px; background: var(--gray-100); color: var(--black); display: grid; place-items: center; flex-shrink: 0; align-self: flex-start; }
.pnotif__ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pnotif__ic--danger { background: rgba(230,57,70,.1); color: var(--domicilio); }
.pnotif__chev { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--gray-400, #b0b0b0); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pnotif__body { flex: 1; min-width: 0; }
.pnotif__title { font-size: 14.5px; font-weight: 600; color: var(--black); }
.pnotif__sub { font-size: 13.5px; color: var(--gray-600, #555); margin-top: 2px; }
.pnotif__time { font-size: 12px; color: var(--gray-500); margin-top: 4px; }
.pnotif__del { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--gray-400, #b0b0b0); font-size: 20px; line-height: 1; cursor: pointer; align-self: flex-start; }
.pnotif__del:hover { background: var(--gray-100); color: var(--black); }

/* ---- Búsqueda en la agenda de reservas ---- */
.agenda-search { display: flex; align-items: center; gap: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 15px; margin-bottom: 16px; max-width: 480px; }
.agenda-search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--gray-500); stroke-width: 2; stroke-linecap: round; }
.agenda-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--black); padding: 8px 0; outline: none; }
.agenda-search__clear { flex: 0 0 auto; font-size: 12.5px; color: var(--gray-500); text-decoration: none; padding: 6px 12px; border-radius: 999px; }
.agenda-search__clear:hover { background: var(--gray-100); color: var(--black); }
.agenda-staff { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 18px; }
.agenda-chip { appearance: none; -webkit-appearance: none; cursor: pointer; border: 1px solid var(--line); background: var(--white); color: var(--gray-500); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 999px; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.agenda-chip:hover { background: var(--gray-100); color: var(--black); }
.agenda-chip.is-on { background: var(--black); border-color: var(--black); color: var(--white); }

/* --- Date-picker propio (calendario de marca) --- */
.dpick { position: relative; }
.dpick__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; cursor: pointer; text-align: left; }
.dpick__label { font-size: 14px; color: var(--black); }
.dpick__label.is-empty { color: var(--gray-400); }
.dpick__btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--gray-500); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dpick__pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 286px; max-width: 92vw; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 44px rgba(13,13,13,.14); padding: 14px; }
.dpick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dpick__title { font-size: 14.5px; font-weight: 600; color: var(--black); text-transform: capitalize; }
.dpick__nav { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); cursor: pointer; font-size: 19px; line-height: 1; color: var(--black); display: flex; align-items: center; justify-content: center; padding: 0; }
.dpick__nav:hover:not(:disabled) { background: var(--gray-100); }
.dpick__nav:disabled { opacity: .3; cursor: default; }
.dpick__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dpick__dows span { text-align: center; font-size: 10.5px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .3px; padding: 2px 0 6px; }
.dpick__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 9px; font: inherit; font-size: 13.5px; color: var(--black); cursor: pointer; padding: 0; }
.dpick__day:hover:not(:disabled):not(.is-blank) { background: var(--gray-100); }
.dpick__day.is-off, .dpick__day:disabled { color: var(--gray-300); cursor: default; }
.dpick__day.is-blank { pointer-events: none; }
.dpick__day.is-today { font-weight: 700; }
.dpick__day.is-sel { background: var(--black); color: #fff; }
.dpick__day.is-sel:hover { background: var(--black); }

/* --- Atajo "aplicar a todos los días" en Horarios --- */
.hbulk { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; background: var(--gray-50); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; }
.hbulk__times { display: flex; align-items: center; gap: 8px; color: var(--gray-500); font-size: 13.5px; }
.hbulk__lbl { color: var(--gray-700); font-weight: 500; }
.hbulk__times input { width: 118px; }
.hbulk__quick { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--gray-300); font-size: 13px; }
.hbulk__quick button { border: 0; background: transparent; padding: 0; font: inherit; font-size: 13px; color: var(--gray-500); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.hbulk__quick button:hover { color: var(--black); }

/* ============================================================
   Panel · Inicio: preview del perfil público (sheet reusado del cliente)
   y card "Mi perfil público". Antes estaba inline en home.blade.
   ============================================================ */
:root { --safe-bottom: 0px; }
/* Reusamos el bottom-sheet del cliente (map.css). En escritorio lo mostramos
   como modal centrado; en móvil se queda como bottom-sheet, que es lo natural. */
#profileSheet, #sheetBackdrop { z-index: 1200; }
/* Base (móvil): DEBE ir antes del @media — las media queries no suman especificidad,
   así que si esto queda después, pisa al padding del desktop (era el bug del padding-top). */
#profileSheet .sheet__content { padding-top: 6px; }
@media (min-width: 700px) {
  #profileSheet {
    top: 50%; bottom: auto; left: 50%; right: auto;
    width: 540px; max-width: 92vw; max-height: 88vh;
    border-radius: 20px;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  }
  #profileSheet.hidden { transform: translate(-50%, -44%); opacity: 0; }
  #profileSheet .sheet__handle { display: none; }
  #profileSheet .sheet__content { padding: 50px 2rem 2rem; }
}
/* admin.css no resetea <button>; el navegador les mete gris+borde. Lo limpiamos
   para que los acordeones del sheet se vean como en el cliente. */
#sheetContent .acc__head { background: none; border: 0; appearance: none; -webkit-appearance: none; }

/* Card de perfil público: compacta, alineada a la izquierda, tipo tarjeta de presentación */
.ppub-card { max-width: 420px; margin: 18px 0 0; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 12px 34px rgba(13,13,13,.06); overflow: hidden; }
.ppub-card__top { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--gray-100); }
.ppub-card__label { font-weight: 600; font-size: 14px; color: var(--black); }
.ppub-card__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 22px 22px; }
.ppub-card__av { width: 82px !important; height: 82px !important; font-size: 27px !important; }
.ppub-card__name { font-weight: 700; font-size: 19px; color: var(--black); margin-top: 15px; }
.ppub-card__tag { color: var(--gray-500); font-size: 14px; margin-top: 3px; }
.ppub-card__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 15px; }
.ppub-card__btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: calc(100% - 44px); margin: 2px 22px 0; padding: 13px; border: 0; border-radius: 13px; background: var(--black); color: #fff; font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; transition: opacity .15s ease, transform .15s ease; }
.ppub-card__btn:hover { opacity: .9; transform: translateY(-1px); }
.ppub-card__btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.ppub-card__hint { color: var(--gray-500); font-size: 12.5px; line-height: 1.5; text-align: center; padding: 13px 26px 22px; margin: 0; }

/* ============================================================
   Panel · Horarios (antes inline en horarios.blade)
   ============================================================ */
.hcard { max-width:720px; }
/* Rediseño de días: una fila por día con switch + su horario */
.hquick { display:flex; gap:10px; align-items:center; margin:10px 0 6px; font-size:13px; color:var(--gray-300); }
.hquick button { border:0; background:transparent; padding:0; font:inherit; font-size:13px; color:var(--gray-500); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.hquick button:hover { color:var(--black); }
.htpl { background:var(--gray-50); border:1px solid var(--line); border-radius:12px; padding:14px; }
.htpl__lbl { display:block; font-weight:600; color:var(--ink); font-size:13.5px; margin-bottom:11px; }
.htpl__row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--gray-500); font-size:14px; }
.htpl__row input { width:140px; }
.hlist { display:flex; flex-direction:column; margin-top:8px; }
.hrow { display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--gray-100); flex-wrap:wrap; }
.hrow:last-child { border-bottom:0; }
.hrow__name { width:96px; font-weight:600; color:var(--black); }
.hrow__times { display:flex; align-items:center; gap:8px; color:var(--gray-500); font-size:14px; }
.hrow__times input { width:140px; }
.hrow__closed { font-size:13px; color:var(--gray-400); display:none; }
.hrow.is-closed .hrow__times { display:none; }
.hrow.is-closed .hrow__closed { display:inline; }
.hrow.is-closed .hrow__name { color:var(--gray-500); }
/* Switch de prendido/apagado */
.hsw { position:relative; width:42px; height:24px; flex-shrink:0; display:inline-block; }
.hsw input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.hsw__track { position:absolute; inset:0; background:var(--gray-300); border-radius:999px; transition:background .18s; pointer-events:none; }
.hsw__track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.hsw input:checked + .hsw__track { background:var(--black); }
.hsw input:checked + .hsw__track::after { transform:translateX(18px); }
@media (max-width:560px) { .htpl__row input, .hrow__times input { width:130px; } }
/* Panel "Ajustes de la agenda": filas etiqueta+control con divisores */
.hset { display:flex; flex-direction:column; }
.hset__row { display:flex; align-items:center; justify-content:space-between; gap:14px 26px; padding:17px 0; border-top:1px solid var(--gray-100); flex-wrap:wrap; }
.hset__row:first-child { border-top:0; padding-top:8px; }
.hset__info { flex:1; min-width:190px; }
.hset__lbl { font-weight:600; color:var(--black); font-size:14px; }
.hset__hint { font-size:12.5px; color:var(--gray-500); margin-top:3px; line-height:1.4; }
.hset__ctrl { flex-shrink:0; }
select.hset__ctrl { min-width:186px; }
.hset__ctrl--lunch { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hset__lunch { display:inline-flex; align-items:center; gap:7px; color:var(--gray-500); font-size:14px; }
.hset__lunch .input { width:104px; }
.hset__ctrl--block { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hset__ctrl--block .dpick { position:relative; }
.hset__ctrl--block .dpick__btn { min-width:152px; }
@media (max-width:640px) {
  .hset__row { flex-direction:column; align-items:stretch; gap:11px; }
  .hset__info { min-width:0; }
  select.hset__ctrl { min-width:0; width:100%; }
  .hset__ctrl--lunch, .hset__ctrl--block { width:100%; }
}
/* Barra "cambios sin guardar" (pegajosa) */
.hsavebar { position:sticky; bottom:12px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; max-width:720px; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:0 10px 34px rgba(0,0,0,.14); }
.hsavebar[hidden] { display:none; }
.hsavebar__txt { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--ink); }
.hsavebar__txt svg { width:17px; height:17px; flex-shrink:0; fill:none; stroke:var(--domicilio); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hday { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--gray-100); flex-wrap:wrap; }
.hday:last-child { border-bottom:0; }
.hday__name { width:120px; font-weight:600; color:var(--black); display:flex; align-items:center; gap:10px; }
.hday__name input { width:18px; height:18px; accent-color:var(--black); cursor:pointer; }
.hday__times { display:flex; align-items:center; gap:10px; color:var(--gray-500); font-size:14px; }
.hday__times input { width:120px; }
.hday.is-closed .hday__times { opacity:.4; pointer-events:none; }
.hday__closed { font-size:13px; color:var(--gray-500); display:none; }
.hday.is-closed .hday__closed { display:inline; }
.hday.is-closed .hday__open { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip-x { display:inline-flex; align-items:center; gap:8px; padding:7px 10px 7px 13px; border:1px solid var(--line); border-radius:999px; font-size:13.5px; font-weight:500; color:var(--black); background:var(--white); }
.chip-x button { border:0; background:var(--gray-100); width:20px; height:20px; border-radius:50%; cursor:pointer; font-size:14px; line-height:1; color:var(--gray-700); }
.chip-x button:hover { background:var(--domicilio); color:#fff; }

/* ============================================================
   Panel · Certificados (antes inline en certificados.blade)
   ============================================================ */
.cert-up { max-width:720px; }
.cert-drop { border:1.5px dashed var(--gray-300); border-radius:14px; padding:22px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; background:var(--gray-50); }
.cert-drop:hover { border-color:var(--black); }
.cert-drop svg { width:30px; height:30px; stroke:var(--gray-500); fill:none; stroke-width:1.6; }
.cert-drop__hint { color:var(--gray-500); font-size:13.5px; margin-top:8px; }
.cert-prev { display:none; margin-top:14px; }
.cert-prev.show { display:block; }
.cert-prev img { max-width:240px; max-height:200px; border-radius:10px; border:1px solid var(--line); display:block; }
.cert-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.cert-tile { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--white); display:flex; flex-direction:column; }
.cert-tile__img { width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--gray-100); cursor:pointer; }
.cert-tile__body { padding:12px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.cert-tile__title { font-weight:600; color:var(--black); font-size:14.5px; line-height:1.3; }
.cert-tile__by { font-size:12.5px; color:var(--gray-500); }
.cert-tile__foot { padding:0 14px 12px; }
/* En móvil: carrusel horizontal (evita el scroll vertical gigante si hay muchos) */
@media (max-width:560px) {
  .cert-list { display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding-bottom:10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .cert-list::-webkit-scrollbar { display:none; }
  .cert-tile { flex:0 0 80%; scroll-snap-align:start; }
}
.cert-lb { position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(10,10,10,.92); }
.cert-lb.open { display:flex; animation:certFade .2s ease; }
@keyframes certFade { from{opacity:0} to{opacity:1} }
.cert-lb__fig { margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.cert-lb__fig img { max-width:100%; max-height:82vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5); object-fit:contain; }
.cert-lb__fig figcaption { color:#fff; font-size:14.5px; text-align:center; }
.cert-lb__close { position:absolute; top:16px; right:18px; width:42px; height:42px; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.cert-lb__close:hover { background:rgba(255,255,255,.25); }

/* ============================================================
   Dashboard super admin — KPIs, tendencia, top negocios
   Monocromático (rojo --domicilio solo como alerta/acento).
   ============================================================ */

/* Variación vs periodo anterior */
.stat__delta { font-size:12px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px; color:var(--gray-500); }
.stat__delta--down { color:var(--domicilio); }

/* Franja de acción prioritaria (negocios por activar) */
.hl { display:flex; align-items:center; justify-content:space-between; gap:16px; text-decoration:none; color:var(--ink);
      background:var(--white); border:1px solid var(--line); border-left:3px solid var(--domicilio);
      border-radius:var(--radius-lg); padding:15px 20px; margin-bottom:22px; transition:box-shadow .15s, border-color .15s; }
.hl:hover { box-shadow:0 8px 24px rgba(13,13,13,.06); }
.hl__t { font-size:14px; color:var(--gray-700); }
.hl__t b { color:var(--black); font-weight:700; }
.hl__sub { display:block; font-size:12.5px; color:var(--gray-500); margin-top:2px; }
.hl .btn { flex-shrink:0; }

/* Gráfico de tendencia (barras verticales) */
.chart { display:flex; align-items:flex-end; gap:6px; padding:18px 20px 16px; height:172px; }
.chart__col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; min-width:0; }
.chart__val { font-size:11px; font-weight:600; color:var(--gray-700); line-height:1; height:12px; }
.chart__bar { width:100%; max-width:30px; background:var(--ink); border-radius:5px 5px 0 0; min-height:3px; transition:opacity .15s; }
.chart__col:hover .chart__bar { opacity:.72; }
.chart__bar--today { background:var(--domicilio); }
.chart__lbl { font-size:10.5px; color:var(--gray-500); line-height:1; }

/* Dos columnas: top negocios + panorama de la red */
.dash-2col { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; margin-bottom:20px; align-items:start; }

/* Top negocios */
.toplist { display:flex; flex-direction:column; }
.toprow { display:flex; align-items:center; gap:14px; padding:13px 22px; border-bottom:1px solid var(--gray-100); text-decoration:none; color:var(--ink); transition:background .12s; }
.toprow:last-child { border-bottom:0; }
.toprow:hover { background:var(--gray-50); }
.toprow__rank { font-size:13px; font-weight:700; color:var(--gray-400,#b5b5b5); width:16px; flex-shrink:0; }
.toprow__main { flex:1; min-width:0; }
.toprow__name { display:block; font-size:14px; font-weight:500; color:var(--black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toprow__meta { display:block; font-size:12px; color:var(--gray-500); margin-top:1px; }
.toprow__c { font-size:16px; font-weight:700; color:var(--black); flex-shrink:0; }

/* Lista de totales de la red */
.minilist { display:flex; flex-direction:column; }
.minirow { display:flex; align-items:center; justify-content:space-between; padding:13px 22px; border-bottom:1px solid var(--gray-100); }
.minirow:last-child { border-bottom:0; }
.minirow__k { font-size:13.5px; color:var(--gray-700); }
.minirow__v { font-size:16px; font-weight:700; color:var(--black); }
.minirow__u { font-weight:500; color:var(--gray-500); font-size:13px; }

/* Chip de reserva completada (distinto de confirmada) */
.chip--done { color:var(--gray-500); background:var(--gray-50); border-color:var(--line); }

/* Pestañas de filtro por estado */
.ftabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.ftab { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; padding:7px 14px;
        border:1px solid var(--line); border-radius:999px; background:var(--white); color:var(--gray-700);
        text-decoration:none; transition:border-color .12s, background .12s, color .12s; }
.ftab:hover { border-color:var(--gray-300); }
.ftab.is-on { background:var(--ink); border-color:var(--ink); color:#fff; }
.ftab__n { font-size:11px; opacity:.65; }

@media (max-width:820px) {
  .dash-2col { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .chart { gap:3px; padding:16px 12px 14px; height:150px; }
  .chart__val { display:none; }
  .chart__bar { border-radius:3px 3px 0 0; }
  .chart__lbl { font-size:9px; }
}

/* ---- Paginador server-side (listados admin) ---- */
.pager { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--line); }
.pager__info { font-size:12.5px; color:var(--gray-500); }
.pager__btns { display:flex; gap:8px; }
.pager__btn { font-size:13px; font-weight:500; color:var(--black); text-decoration:none; padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:var(--white); transition:border-color .12s; }
.pager__btn:hover { border-color:var(--gray-300); }
.pager__btn.is-off { color:var(--gray-300); pointer-events:none; }
/* Botón limpiar dentro del buscador server-side */
.tsearch__clear { margin-left:2px; color:var(--gray-500); text-decoration:none; font-size:18px; line-height:1; padding:0 4px; }
.tsearch__clear:hover { color:var(--domicilio); }

/* ---- Checkbox de consentimiento (Habeas Data, registro) ---- */
.consent { display:flex; gap:10px; align-items:flex-start; margin:2px 0; font-size:12.5px; line-height:1.5; color:var(--gray-700); cursor:pointer; }
.consent input { margin-top:2px; width:16px; height:16px; flex-shrink:0; accent-color:var(--black); cursor:pointer; }
.consent a { color:var(--black); text-decoration:underline; }

/* ---------- Combo con buscador (combo.js, reemplaza <select class="js-combo">) ---------- */
.combo__native { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.combo__btn { display:flex; align-items:center; gap:10px; width:100%; max-width:520px; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); font:inherit; font-size:14.5px; color:var(--black); text-align:left; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.combo__btn:hover { border-color:var(--gray-300); }
.combo__btn:focus-visible, .combo__btn[aria-expanded="true"] { outline:none; border-color:var(--black); box-shadow:0 0 0 3px rgba(13,13,13,.08); }
.combo__btn.is-empty .combo__val { color:var(--gray-500); }
.combo__btn.is-invalid { border-color:var(--domicilio); box-shadow:0 0 0 3px rgba(230,57,70,.12); }
.combo__val { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.combo__btn svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:var(--gray-500); stroke-width:2; transition:transform .15s; }
.combo__btn[aria-expanded="true"] svg { transform:rotate(180deg); }
.combo__btn--xs { height:34px; font-size:12.5px; padding:0 10px; max-width:240px; }
.combo__pop { position:fixed; z-index:1400; display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 50px rgba(13,13,13,.18); overflow:hidden; animation:comboIn .14s ease-out; }
@keyframes comboIn { from { opacity:0; transform:translateY(-4px); } }
.combo__search { display:flex; align-items:center; gap:8px; padding:0 12px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.combo__search svg { width:16px; height:16px; fill:none; stroke:var(--gray-500); stroke-width:2; flex:0 0 auto; }
.combo__q { flex:1; min-width:0; height:46px; border:0; outline:none; background:transparent; font:inherit; font-size:14.5px; color:var(--black); }
.combo__list { overflow-y:auto; padding:6px; overscroll-behavior:contain; }
.combo__grp { padding:10px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-500); }
.combo__opt { position:relative; padding-right:30px !important; display:flex; flex-direction:column; gap:1px; padding:9px 10px; border-radius:9px; cursor:pointer; font-size:14px; color:var(--black); }
.combo__opt small { font-size:12px; color:var(--gray-500); }
.combo__opt.is-act { background:var(--gray-100); }
.combo__opt.is-sel { font-weight:600; }
.combo__opt.is-sel::after { content:"✓"; position:absolute; right:14px; }
.combo__empty { padding:18px 12px; font-size:13.5px; color:var(--gray-500); text-align:center; }
.combo__bd { position:fixed; inset:0; z-index:1390; background:rgba(13,13,13,.4); animation:comboFade .2s ease; }
@keyframes comboFade { from { opacity:0; } }
.combo__pop--sheet { left:0 !important; right:0; bottom:0; top:auto; width:auto !important; max-height:82dvh; border-radius:20px 20px 0 0; padding-bottom:env(safe-area-inset-bottom,0px); animation:comboUp .26s cubic-bezier(.2,.8,.2,1); }
@keyframes comboUp { from { transform:translateY(100%); } }
.combo__pop--sheet .combo__q { font-size:16px; }   /* 16px: iOS no hace zoom al enfocar */
.combo__handle { width:40px; height:4px; border-radius:99px; background:var(--gray-300); margin:10px auto 2px; flex:0 0 auto; }

/* ---------- Pago de la cita en la tarjeta de reserva (establecimientos) ---------- */
.res-pay { display:flex; align-items:center; gap:9px; margin-top:12px; padding:10px 12px; border-radius:12px; background:#eef8f1; color:#1f5f35; font-size:13.5px; flex-wrap:wrap; }
.res-pay svg { width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.res-pay > span { flex:1; min-width:0; }
.res-pay b { font-weight:700; }
.res-pay__edit { border:0; background:none; padding:0; font:inherit; font-size:12.5px; font-weight:600; color:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.res-pay--warn { background:#fff7e0; color:#7a5b00; }
.field__hint { font-size:12.5px; color:var(--gray-500); line-height:1.45; }
.field__hint a { color:var(--black); font-weight:600; }
/* Combo: lista corta sin buscador (el input sigue enfocable para el teclado) */
.combo__search--off { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; border:0; padding:0; }
/* Combo suelto en barras de filtros: compacto y del ancho de su texto */
.combo__btn--inline { width:auto; min-width:160px; height:40px; font-size:14px; padding:0 12px; }
/* Horas (horarios): el combo reemplaza al <input type="time"> nativo; ancho fijo y compacto. */
.combo__btn.input--hora { flex:0 0 auto; width:112px; min-width:0; height:40px; padding:0 12px; font-size:14px; font-variant-numeric:tabular-nums; }
/* Combo en Horarios (antes select.hset__ctrl) */
.combo__btn.hset__ctrl { width:auto; min-width:186px; }
@media (max-width:640px) { .combo__btn.hset__ctrl { min-width:0; width:100%; } }
/* En el celular la hoja de opciones usa tipografía y toques más grandes */
.combo__pop--sheet .combo__opt { padding:13px 12px; font-size:15px; }
.combo__pop--sheet .combo__list { padding:6px 8px 10px; }
/* Calendario propio: cabecera con flechas (sin <select> nativo de mes) */
.bday-head { align-items:center; }
.bday-nav { flex:0 0 auto; width:34px; height:34px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); display:grid; place-items:center; cursor:pointer; color:var(--ink); }
.bday-nav:hover { border-color:var(--gray-400); }
.bday-nav svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bday-mes { flex:1; text-align:center; font-size:14px; font-weight:600; color:var(--ink); }

/* ---------- Ventanas del panel (pago de citas, inventario): .pgm__* ---------- */
.pgm__bd{position:fixed;inset:0;z-index:1300;background:rgba(13,13,13,.45);animation:pgmFade .2s ease}
  .pgm__card{position:fixed;z-index:1310;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--white);border-radius:20px;padding:22px 22px 18px;box-shadow:0 28px 70px rgba(13,13,13,.28);animation:pgmPop .22s cubic-bezier(.2,.8,.2,1)}
  .pgm__bd[hidden],.pgm__card[hidden]{display:none}
  .pgm__handle{display:none}
  .pgm__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--gray-100);display:grid;place-items:center;cursor:pointer;color:var(--gray-700)}
  .pgm__x svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .pgm__title{font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--black);margin:0 40px 4px 0}
  .pgm__sub{font-size:13.5px;color:var(--gray-500);margin:0 0 16px;line-height:1.45}
  .pgm__lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gray-500);margin:14px 0 8px}
  .pgm__money{display:flex;align-items:center;gap:6px;height:54px;border:1.5px solid var(--line);border-radius:14px;padding:0 14px;background:var(--white)}
  .pgm__money:focus-within{border-color:var(--black)}
  .pgm__money span{font-size:20px;font-weight:600;color:var(--gray-500)}
  .pgm__money input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:22px;font-weight:700;color:var(--black);background:transparent}
  .pgm__money--sm{height:46px}.pgm__money--sm input{font-size:17px}
  .pgm__chips{display:flex;flex-wrap:wrap;gap:8px}
  .pgm__chips label{cursor:pointer}
  .pgm__chips input{position:absolute;opacity:0;pointer-events:none}
  .pgm__chips span{display:block;padding:9px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px;font-weight:500;color:var(--gray-700);background:var(--white);transition:background .12s,color .12s,border-color .12s}
  .pgm__chips input:checked + span{background:var(--black);border-color:var(--black);color:var(--white)}
  .pgm__chips input:focus-visible + span{outline:2px solid var(--black);outline-offset:2px}
  .pgm__chips input:disabled + span{opacity:.35;cursor:not-allowed}
  .pgm__split{display:inline-block;margin-top:12px;border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--black);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .pgm__second{margin-top:6px;padding:4px 14px 14px;border:1px solid var(--line);border-radius:14px;background:var(--gray-50)}
  .pgm__hint{font-size:13px;color:var(--gray-700);margin:8px 0 0}
  .pgm__com{margin-top:16px;padding:12px 14px;border-radius:12px;background:#eef8f1;color:#1f5f35;font-size:13.5px;line-height:1.45}
  .pgm__com--warn{background:#fff7e0;color:#7a5b00}
  .pgm__com b{font-weight:700}
  .pgm__com a{color:inherit;font-weight:600}
  .pgm__err{margin:12px 0 0;color:var(--domicilio);font-size:13.5px}
  .pgm__actions{display:flex;gap:10px;margin-top:18px}
  .pgm__actions .btn{flex:1;height:48px}
  @keyframes pgmFade{from{opacity:0}}
  @keyframes pgmPop{from{opacity:0;transform:translate(-50%,-46%)}}
  @media (max-width:600px){
    .pgm__card{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:92dvh;border-radius:22px 22px 0 0;padding:6px 18px calc(16px + env(safe-area-inset-bottom,0px));animation:pgmUp .3s cubic-bezier(.2,.8,.2,1)}
    .pgm__handle{display:block;width:40px;height:4px;border-radius:99px;background:var(--gray-300);margin:6px auto 12px}
    .pgm__x{top:12px}
  }
  @keyframes pgmUp{from{transform:translateY(100%)}}
.inv[hidden]{display:none}
.pgm__chips[hidden]{display:none}
.pgm__skip { display:block; width:100%; margin-top:10px; border:0; background:none; font:inherit; font-size:13.5px; font-weight:500; color:var(--gray-500); text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:6px; }
.res-pay__add { margin-top:10px; border:0; background:none; padding:0; font:inherit; font-size:13px; font-weight:600; color:var(--gray-700); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* Bombillo rojo del menú (Inventario con stock bajo): late con un halo que se expande. */
.nav__notif--alerta { background:#e5383b !important; color:#fff !important; position:relative; box-shadow:0 0 8px 2px rgba(229,56,59,.65); animation:bombilloLuz 1.6s ease-in-out infinite; }
.nav__notif--alerta::after { content:""; position:absolute; inset:-2px; border-radius:inherit; border:2px solid rgba(229,56,59,.7); animation:bombilloHalo 1.6s ease-out infinite; pointer-events:none; }
@keyframes bombilloLuz { 0%,100% { box-shadow:0 0 6px 1px rgba(229,56,59,.55); filter:brightness(1); } 50% { box-shadow:0 0 14px 4px rgba(229,56,59,.85); filter:brightness(1.15); } }
@keyframes bombilloHalo { 0% { transform:scale(1); opacity:.9; } 100% { transform:scale(2.1); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .nav__notif--alerta, .nav__notif--alerta::after { animation:none; } }