/* =============================================================
   app.css — Panel de gestión interno (Navaja & Co.)
   ============================================================= */

/* === TOKENS PROPIOS DEL APP === */
:root {
  --ink:     #1a1410;
  --ink-2:   #2c241d;
  --cream-3: #ddd0bb;
  --copper:  #b8552c;
  --gold:    #c9a961;
  --leather: #6b4423;
  --sage:    #7a8266;
  --success: #5a7a4a;
  --warn:    #b8552c;
  --danger:  #9c2a1f;
}

/* === BODY DEL APP === */
html, body {
  color:      var(--ink);
  font-size:  14px;
  overflow-x: hidden;
}

body {
  background-image:
    radial-gradient(circle at 20% 10%, rgba(184,85,44,0.06) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(92,31,26,0.05) 0%, transparent 45%);
  min-height: 100vh;
}

/* La textura de papel hereda el SVG de base.css (0.08), solo ajustamos opacity */
body::before { opacity: 0.35; }

/* ============ APP LAYOUT ============ */
.app {
  display:               grid;
  grid-template-columns: 240px 1fr;
  min-height:            100vh;
  position:              relative;
  z-index:               2;
}

/* ============ SIDEBAR ============ */
.sidebar {
  background:     var(--ink);
  color:          var(--cream);
  padding:        28px 22px;
  display:        flex;
  flex-direction: column;
  gap:            28px;
  position:       sticky;
  top:            0;
  align-self:     start;     /* evita que el grid lo estire y rompa el sticky */
  height:         100vh;
  overflow-y:     auto;      /* si el menú es más alto que la pantalla, scrollea internamente */
  border-right:   1px solid #000;
}

.brand {
  display:         flex;
  flex-direction:  column;
  gap:             2px;
  padding-bottom:  24px;
  border-bottom:   1px solid rgba(244,237,226,0.12);
}

.brand-mark {
  font-family:    var(--font-serif);
  font-weight:    400;
  font-style:     italic;
  font-size:      28px;
  letter-spacing: -0.02em;
  color:          var(--cream);
  line-height:    1;
}

.brand-mark span { color: var(--copper); font-style: normal; font-weight: 600; }

.brand-sub {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color:          var(--cream-3);
  margin-top:     8px;
}

.nav-label {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color:          rgba(244,237,226,0.45);
  margin-bottom:  12px;
  padding-left:   4px;
}

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-item {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  padding:         11px 14px;
  border-radius:   6px;
  color:           rgba(244,237,226,0.7);
  cursor:          pointer;
  font-size:       13.5px;
  font-weight: 400;
  transition:  all 0.18s ease;
  border:      1px solid transparent;
}

.nav-item:hover  { background: rgba(244,237,226,0.06); color: var(--cream); }
.nav-item.active { background: linear-gradient(180deg, rgba(184,85,44,0.18), rgba(184,85,44,0.08)); border-color: rgba(184,85,44,0.3); color: var(--cream); }
.nav-item.active .nav-icon { color: var(--copper); }

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; }

.nav-badge {
  margin-left:   auto;
  background:    var(--copper);
  color:         var(--cream);
  font-size:     10px;
  font-weight:   600;
  padding:       2px 7px;
  border-radius: 10px;
  font-family:   var(--font-mono);
}

.sidebar-footer {
  margin-top:  auto;
  padding-top: 20px;
  border-top:  1px solid rgba(244,237,226,0.12);
  display:     flex;
  align-items: center;
  gap:         10px;
}

.avatar-sm {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--copper), var(--burgundy));
  display:       grid;
  place-items:   center;
  font-family:   var(--font-serif);
  font-weight:   600;
  color:         var(--cream);
  font-size:     14px;
}

.avatar-info { flex: 1; min-width: 0; }
.avatar-name { font-size: 12.5px; color: var(--cream); font-weight: 500; }
.avatar-role { font-size: 10px; color: rgba(244,237,226,0.5); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 2px; }

/* ============ MAIN ============ */
.main {
  padding:   32px 44px 60px;
  max-width: 100%;
  overflow:  hidden;
}

.topbar {
  display:     flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 36px;
  gap:         24px;
  flex-wrap:   wrap;
}

.page-title-block { flex: 1; min-width: 280px; }

.crumb {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color:          var(--ink-soft);
  margin-bottom:  8px;
}

.crumb span { color: var(--copper); }

.page-title {
  font-family:    var(--font-serif);
  font-size:      44px;
  font-weight:    300;
  letter-spacing: -0.025em;
  line-height:    1;
  color:          var(--ink);
}

.page-title em { font-style: italic; color: var(--copper); font-weight: 400; }

.topbar-actions { display: flex; gap: 10px; align-items: center; }

/* Search */
.search {
  background:       rgba(255,255,255,0.5);
  border:           1px solid var(--line);
  border-radius:    6px;
  padding:          9px 14px 9px 36px;
  font-family:      inherit;
  font-size:        13px;
  color:            var(--ink);
  width:            220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a3d31' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px center;
  transition: all 0.18s;
}

.search:focus { outline: none; border-color: var(--copper); background-color: white; }

/* Botones del app */
.btn {
  border:        1px solid var(--ink);
  background:    var(--ink);
  color:         var(--cream);
  padding:       10px 18px;
  border-radius: 6px;
  font-family:   inherit;
  font-size:     13px;
  font-weight:   500;
  cursor:        pointer;
  transition:    all 0.2s;
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  letter-spacing: 0.01em;
}

.btn:hover         { background: var(--copper-deep); border-color: var(--copper-deep); transform: translateY(-1px); }
.btn.ghost         { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover   { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateY(-1px); }
.btn.copper        { background: var(--copper); border-color: var(--copper); }
.btn.copper:hover  { background: var(--copper-deep); border-color: var(--copper-deep); }
.btn.sm            { padding: 7px 12px; font-size: 12px; }

/* ============ KPI ROW ============ */
.kpi-row {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   14px;
  margin-bottom:         32px;
}

/* ── Par de KPIs apilados ── */
.kpi-pair {
  background:     white;
  border:         1px solid var(--line-soft);
  border-radius:  10px;
  overflow:       hidden;
  display:        flex;
  flex-direction: column;
  position:       relative;
}
.kpi-pair::before {
  content:    "";
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-deep) 100%);
  z-index:    1;
}
.kpi-pair-item {
  padding:  22px 24px 18px;
  flex:     1;
}
.kpi-pair-divider {
  height:     1px;
  background: var(--line-soft);
  margin:     0 24px;
}
.kpi-pair .kpi-label   { margin-bottom: 10px; }
.kpi-pair .kpi-value   { font-size: 34px; }
.kpi-pair .kpi-trend   { margin-top: 8px; }

.kpi {
  background:    white;
  border:        1px solid var(--line-soft);
  border-radius: 10px;
  padding:       22px 22px 20px;
  position:      relative;
  overflow:      hidden;
}

.kpi.feature {
  background:   linear-gradient(140deg, var(--ink) 0%, var(--ink-2) 100%);
  color:        var(--cream);
  border-color: var(--ink);
}

.kpi.feature::before {
  content:        "";
  position:       absolute;
  top: -40px; right: -40px;
  width:          180px;
  height:         180px;
  background:     radial-gradient(circle, rgba(184,85,44,0.35) 0%, transparent 65%);
  pointer-events: none;
}

.kpi-label {
  font-size:       10.5px;
  text-transform:  uppercase;
  letter-spacing:  0.22em;
  color:           var(--ink-soft);
  margin-bottom:   14px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.kpi.feature .kpi-label { color: rgba(244,237,226,0.55); }

.kpi-value {
  font-family:    var(--font-serif);
  font-size:      38px;
  font-weight:    300;
  letter-spacing: -0.02em;
  line-height:    1;
  color:          var(--ink);
}

.kpi.feature .kpi-value { color: var(--cream); font-size: 52px; }

.kpi-feature-divider {
  height:     1px;
  background: rgba(244,237,226,0.12);
  margin:     16px 0 14px;
}

.kpi-sub-stats {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

.kpi-sub-num {
  font-family:    var(--font-serif);
  font-size:      20px;
  font-weight:    400;
  color:          var(--cream);
  letter-spacing: -0.01em;
  line-height:    1;
}

.kpi-sub-label {
  font-size:      9.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          rgba(244,237,226,0.38);
  margin-top:     5px;
}

.kpi-value .unit {
  font-family:    var(--font-sans);
  font-size:      14px;
  color:          var(--ink-soft);
  font-weight:    400;
  margin-left:    4px;
  letter-spacing: 0;
}

.kpi.feature .kpi-value .unit { color: rgba(244,237,226,0.55); }

.kpi-trend {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  font-family: var(--font-mono);
  font-size:   11px;
  margin-top:  12px;
  color:       var(--success);
}

.kpi-trend.down { color: var(--danger); }
.kpi.feature .kpi-trend { color: #a8d49a; }

.kpi-spark {
  position:       absolute;
  bottom: 0; left: 0; right: 0;
  height:         36px;
  pointer-events: none;
}

/* ============ GRID 2 COLUMNAS ============ */
.grid-main {
  display:               grid;
  grid-template-columns: 1.55fr 1fr;
  gap:                   22px;
}

/* ============ CARDS ============ */
.card {
  background:    white;
  border:        1px solid var(--line-soft);
  border-radius: 10px;
  overflow:      hidden;
}

.card-head {
  padding:         20px 22px;
  border-bottom:   1px solid var(--line-soft);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  flex-wrap:       wrap;
}

.card-title {
  font-family:    var(--font-serif);
  font-size:      22px;
  font-weight:    400;
  letter-spacing: -0.01em;
  color:          var(--ink);
  line-height:    1;
}

.card-title em { font-style: italic; color: var(--copper); }
.card-sub      { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.card-body     { padding: 18px 22px 22px; }

/* ============ AGENDA / DISPONIBILIDAD ============ */
.day-tabs {
  display:        flex;
  gap:            6px;
  margin-bottom:  18px;
  border-bottom:  1px solid var(--line-soft);
  padding-bottom: 14px;
  overflow-x:     auto;            /* permite scroll cuando se amplía a 14 días */
  scrollbar-width: thin;
}
.day-tabs::-webkit-scrollbar       { height: 6px; }
.day-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.day-tab {
  flex:          1 0 auto;
  min-width:     54px;
  text-align:    center;
  padding:       10px 4px;
  border-radius: 8px;
  cursor:        pointer;
  border:        1px solid transparent;
  transition:    all 0.18s;
  background:    transparent;
  font-family:   inherit;
}

.day-tab:hover  { background: var(--cream); }
.day-tab.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Botón ampliar/contraer días */
.day-tab-more {
  border: 1px dashed var(--copper);
  color:  var(--copper);
}
.day-tab-more:hover { background: rgba(184,85,44,0.08); }
.day-tab-more .day-num { font-size: 18px; }

.day-name { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.7; margin-bottom: 4px; }
.day-num  { font-family: var(--font-serif); font-size: 22px; font-weight: 400; line-height: 1; }

.day-tab .day-meta { font-size: 9.5px; margin-top: 4px; opacity: 0.6; font-family: var(--font-mono); }
.day-tab.active .day-meta { opacity: 0.85; color: var(--gold); }

.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }

.slot {
  display:     grid;
  grid-template-columns: 64px 1fr;
  gap:         16px;
  padding:     14px 0;
  border-bottom: 1px dashed var(--line-soft);
  align-items: center;
}

.slot:last-child { border-bottom: none; }

.slot-time { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.slot-content { display: flex; align-items: center; gap: 12px; }

.slot-empty .slot-content { color: var(--ink-soft); font-style: italic; font-size: 13px; padding: 6px 0; }
.slot-empty .slot-time     { opacity: 0.5; }
.slot-empty:hover          { background: rgba(184,85,44,0.04); cursor: pointer; }

.booking {
  background:    linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border:        1px solid var(--line);
  border-left:   3px solid var(--copper);
  border-radius: 6px;
  padding:       10px 14px;
  flex:          1;
  display:       flex;
  align-items:   center;
  gap:           12px;
  transition:    all 0.2s;
  cursor:        pointer;
}

.booking:hover   { transform: translateX(2px); border-left-color: var(--burgundy); }
/* ── Panel de día cerrado ── */
.day-closed-view {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  padding:        52px 20px;
  text-align:     center;
}
.day-closed-icon {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  background:    var(--bg);
  border:        1.5px solid var(--line);
  display:       grid;
  place-items:   center;
  color:         var(--ink-soft);
  margin-bottom: 4px;
}
.day-closed-icon svg     { width: 22px; height: 22px; }
.day-closed-icon.locked  { background: rgba(156,42,31,0.06); border-color: rgba(156,42,31,0.2); color: var(--danger); }
.day-closed-label        { font-family: var(--font-serif); font-size: 17px; color: var(--ink); font-style: italic; }
.day-closed-sub          { font-size: 12px; color: var(--ink-soft); max-width: 280px; line-height: 1.55; margin-bottom: 4px; }
.day-closed-sub.warn     { color: var(--copper-deep); }

/* ── Banner: domingo habilitado ── */
.sunday-open-notice {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 14px;
  background:    rgba(107,143,107,0.09);
  border:        1px solid rgba(107,143,107,0.22);
  border-radius: 8px;
  margin-bottom: 12px;
  font-size:     11.5px;
  color:         #4a7a4a;
}
.sunday-open-notice button { margin-left: auto; flex-shrink: 0; }

/* ── Wrapper de acciones en cabecera de card ── */
.card-head-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.booking.paid    { border-left-color: var(--success); }
.booking.pending { border-left-color: var(--warn); background: linear-gradient(180deg, #faf0e0 0%, #f4e3c9 100%); }
.booking.cash    { border-left-color: #6b8f6b; background: linear-gradient(180deg, #f0f5f0 0%, #e4eee4 100%); }
.booking.novino  { border-left-color: var(--ink-soft) !important; background: linear-gradient(180deg, #f5f5f5 0%, #ebebeb 100%) !important; opacity: 0.72; }

.booking-avatar {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  background:    var(--ink);
  color:         var(--cream);
  display:       grid;
  place-items:   center;
  font-family:   var(--font-serif);
  font-size:     12px;
  font-weight:   500;
  flex-shrink:   0;
}

.booking-info    { flex: 1; min-width: 0; }
.booking-name    { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.booking-svc     { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.booking-svc strong { color: var(--copper); font-weight: 500; }
.booking-actions { display: flex; gap: 6px; }

.icon-btn {
  width:         30px;
  height:        30px;
  border-radius: 50%;
  border:        1px solid var(--line);
  background:    white;
  cursor:        pointer;
  display:       grid;
  place-items:   center;
  transition:    all 0.18s;
  color:         var(--ink-soft);
}

.icon-btn:hover          { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.icon-btn.wa:hover       { background: #25d366; color: white; border-color: #25d366; }
.icon-btn.mp:hover       { background: #00b1ea; color: white; border-color: #00b1ea; }
.icon-btn.cobro:hover    { background: #00b1ea; color: white; border-color: #00b1ea; }
.icon-btn.novino-btn:hover { background: var(--danger); color: white; border-color: var(--danger); }
.icon-btn.novino-undo    { background: rgba(90,122,74,0.1); color: var(--success); border-color: rgba(90,122,74,0.3); }
.icon-btn.novino-undo:hover { background: var(--success); color: white; border-color: var(--success); }
.icon-btn svg            { width: 14px; height: 14px; }

.pay-pill {
  font-size:      9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding:        3px 8px;
  border-radius:  10px;
  font-weight:    600;
  font-family:    var(--font-mono);
}

.pay-pill.paid      { background: rgba(90,122,74,0.15); color: var(--success); }
.pay-pill.fullpaid  { background: var(--success, #5a7a4a); color: #fff; }
.pay-pill.pending   { background: rgba(184,85,44,0.15); color: var(--copper-deep); }
.pay-pill.cash      { background: rgba(107,143,107,0.15); color: #4a7a4a; }
.pay-pill.unpaid    { background: rgba(156,42,31,0.12); color: var(--danger); }
.pay-pill.novino-pill { background: rgba(100,100,100,0.12); color: var(--ink-soft); letter-spacing: 0.1em; }

/* ============ COLUMNA DERECHA ============ */
.right-col { display: flex; flex-direction: column; gap: 22px; }

/* Mini calendario */
.mini-cal {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   4px;
  margin-top:            8px;
}

.mc-head {
  font-size:      9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align:     center;
  color:          var(--ink-soft);
  padding:        6px 0;
  font-weight:    500;
}

.mc-day {
  aspect-ratio:  1;
  display:       grid;
  place-items:   center;
  border-radius: 6px;
  font-family:   var(--font-mono);
  font-size:     12px;
  color:         var(--ink);
  cursor:        pointer;
  position:      relative;
  transition:    all 0.15s;
}

.mc-day:hover          { background: var(--cream-2); }
.mc-day.muted          { color: var(--ink-soft); opacity: 0.4; }
.mc-day.today          { background: var(--ink); color: var(--cream); font-weight: 600; }

.mc-day.has-bookings::after {
  content:       "";
  position:      absolute;
  bottom: 4px; left: 50%;
  transform:     translateX(-50%);
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--copper);
}

.mc-day.full::after    { background: var(--burgundy); width: 18px; height: 2px; border-radius: 1px; }

.mc-day.in-view {
  background: rgba(184,85,44,0.07);
}
.mc-day.selected {
  border:     1px solid var(--copper);
  background: rgba(184,85,44,0.15);
  font-weight: 600;
  color:       var(--copper);
}
.mc-day.today.selected {
  background: var(--ink);
  color:      var(--cream);
  border-color: var(--copper);
  box-shadow: 0 0 0 2px rgba(184,85,44,0.35);
}

.cal-head {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cal-month { font-family: var(--font-serif); font-size: 16px; font-weight: 500; }
.cal-month em { font-style: italic; color: var(--copper); }
.cal-nav { display: flex; gap: 4px; }

.legend {
  display:      flex;
  gap:          14px;
  margin-top:   14px;
  padding-top:  14px;
  border-top:   1px solid var(--line-soft);
  font-size:    11px;
  color:        var(--ink-soft);
  flex-wrap:    wrap;
}

.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot  { width: 6px; height: 6px; border-radius: 50%; }

/* ============ SERVICIOS ============ */
.svc-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-top:            4px;
}

.svc-card {
  background:    var(--cream);
  border:        1px solid var(--line-soft);
  border-radius: 8px;
  padding:       14px;
  cursor:        pointer;
  transition:    all 0.2s;
  position:      relative;
}

.svc-card:hover {
  border-color: var(--copper);
  transform:    translateY(-2px);
  box-shadow:   0 6px 20px -8px rgba(92,31,26,0.2);
}

.svc-icon {
  width:         32px;
  height:        32px;
  border-radius: 50%;
  background:    var(--ink);
  color:         var(--copper);
  display:       grid;
  place-items:   center;
  margin-bottom: 10px;
}

.svc-icon svg { width: 16px; height: 16px; }
.svc-name     { font-size: 13.5px; font-weight: 500; color: var(--ink); }

.svc-meta {
  display:     flex;
  gap:         10px;
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--ink-soft);
  margin-top:  6px;
}

.svc-price { color: var(--copper); font-weight: 600; }

/* Acciones (editar/eliminar) sobre cada servicio */
.svc-card-actions {
  position:   absolute;
  top:        8px;
  right:      8px;
  display:    flex;
  gap:        4px;
  opacity:    0;
  transition: opacity 0.18s;
}
.svc-card:hover .svc-card-actions { opacity: 1; }
.svc-card-actions .icon-btn { width: 26px; height: 26px; background: var(--paper, #fff); }
.svc-card-actions .icon-btn svg { width: 13px; height: 13px; }

/* ============ EDITOR FRANJA HORARIA ============ */
.hours-editor {
  background:    var(--cream);
  border:        1px solid var(--line-soft);
  border-radius: 8px;
  padding:       12px 14px;
  margin-bottom: 14px;
}
.hours-title {
  display:        flex;
  align-items:    center;
  gap:            7px;
  font-size:      11px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color:          var(--ink-soft);
  margin-bottom:  10px;
}
.hours-title svg { color: var(--copper); }
.hours-row {
  display:     flex;
  align-items: flex-end;
  gap:         8px;
  flex-wrap:   wrap;
}
.hours-field {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  font-size:      10.5px;
  color:          var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.hours-field input[type="time"] {
  font-family:   var(--font-mono);
  font-size:     13px;
  padding:       7px 8px;
  border:        1px solid var(--line);
  border-radius: 7px;
  background:    var(--paper, #fff);
  color:         var(--ink);
}
.hours-field input[type="time"]:focus { outline: none; border-color: var(--copper); }
.hours-sep { padding-bottom: 9px; color: var(--ink-soft); }

/* Rango horario del turno en la agenda */
.slot-end {
  display:     block;
  font-size:   10px;
  opacity:     .5;
  margin-top:  1px;
}

/* ============ MODAL ============ */
.modal-overlay {
  position:       fixed;
  inset:          0;
  background:     rgba(26,20,16,0.55);
  backdrop-filter: blur(4px);
  z-index:        100;
  display:        none;
  align-items:    center;
  justify-content: center;
  padding:        20px;
  animation:      fadeIn 0.2s ease;
}

.modal-overlay.show { display: flex; }

.modal {
  background:      var(--cream);
  border-radius:   12px;
  width:           100%;
  max-width:       460px;
  max-height:      calc(100vh - 40px);   /* nunca más alto que la pantalla */
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  border:          1px solid var(--line);
  box-shadow:      0 30px 80px -20px rgba(26,20,16,0.5);
  animation:       rise 0.3s cubic-bezier(.2,.9,.3,1.2);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes rise {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-head {
  padding:         22px 24px 14px;
  border-bottom:   1px solid var(--line-soft);
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             12px;
  flex-shrink:     0;
}

.modal-title { font-family: var(--font-serif); font-size: 24px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
.modal-title em { font-style: italic; color: var(--copper); }
.modal-sub  { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.modal-close {
  background: transparent;
  border:     0;
  font-size:  22px;
  cursor:     pointer;
  color:      var(--ink-soft);
  line-height: 1;
  padding:    4px;
}

.modal-close:hover { color: var(--ink); }

.modal-body {
  padding:    22px 24px;
  overflow-y: auto;             /* scroll vertical si el contenido no entra */
  flex:       1 1 auto;
  min-height: 0;                /* permite que el flex item se achique y scrollee */
}

.modal-foot {
  padding:         14px 24px;
  border-top:      1px solid var(--line-soft);
  display:         flex;
  gap:             10px;
  justify-content: flex-end;
  background:      rgba(255,255,255,0.4);
  flex-shrink:     0;
}

/* Formulario del modal */
.field { margin-bottom: 14px; }

.field-label {
  font-size:      10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color:          var(--ink-soft);
  margin-bottom:  6px;
  display:        block;
  font-weight:    500;
}

.input, .select {
  width:        100%;
  padding:      10px 12px;
  border:       1px solid var(--line);
  border-radius: 6px;
  background:   white;
  font-family:  inherit;
  font-size:    13.5px;
  color:        var(--ink);
  transition:   all 0.15s;
}

.input:focus, .select:focus {
  outline:    none;
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(184,85,44,0.12);
}

.pay-options {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   10px;
  margin-top:            6px;
}

.pay-opt {
  border:        1px solid var(--line);
  border-radius: 8px;
  padding:       14px;
  background:    white;
  cursor:        pointer;
  transition:    all 0.18s;
  display:       flex;
  align-items:   center;
  gap:           10px;
}

.pay-opt:hover    { border-color: var(--copper); }
.pay-opt.selected { border-color: var(--copper); background: rgba(184,85,44,0.06); box-shadow: 0 0 0 3px rgba(184,85,44,0.1); }

.pay-opt-logo {
  width:         36px;
  height:        36px;
  border-radius: 8px;
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
}

.pay-opt.mp   .pay-opt-logo { background: #00b1ea; color: white; }
.pay-opt.cash .pay-opt-logo { background: var(--ink); color: var(--gold); }

.pay-opt-text       { font-size: 13px; font-weight: 500; }
.pay-opt-text small { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; font-weight: 400; }

.summary-box {
  background:    var(--ink);
  color:         var(--cream);
  border-radius: 8px;
  padding:       14px 16px;
  margin-top:    14px;
}

.summary-row {
  display:         flex;
  justify-content: space-between;
  font-size:       12.5px;
  margin-bottom:   6px;
  color:           rgba(244,237,226,0.75);
}

.summary-row.total {
  border-top:    1px solid rgba(244,237,226,0.18);
  padding-top:   10px;
  margin-top:    10px;
  color:         var(--cream);
  font-size:     14px;
  font-weight:   600;
}

.summary-row .mono { color: var(--gold); }

/* Autocompletado de clientes */
.autocomplete { position: relative; }
.ac-list {
  position:      absolute;
  top:           calc(100% + 4px);
  left:          0;
  right:         0;
  z-index:       20;
  background:    #fff;
  border:        1px solid var(--line);
  border-radius: 9px;
  box-shadow:    0 14px 34px -12px rgba(26,20,16,.45);
  max-height:    210px;
  overflow-y:    auto;
  padding:       4px;
}
.ac-item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  padding:        8px 10px;
  border-radius:  7px;
  cursor:         pointer;
}
.ac-item:hover { background: rgba(184,85,44,0.08); }
.ac-name { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.ac-meta { font-size: 11px; color: var(--ink-soft); font-family: var(--font-mono, monospace); }

/* Prefijo fijo en inputs (ej. +54 9 del WhatsApp) */
.input-prefix {
  display:       flex;
  align-items:   center;
  border:        1px solid var(--line);
  border-radius: 6px;
  background:    white;
  transition:    border-color 0.15s, box-shadow 0.15s;
  overflow:      hidden;
}
.input-prefix:focus-within {
  border-color: var(--copper);
  box-shadow:   0 0 0 3px rgba(184,85,44,0.08);
}
.input-prefix .input {
  flex:          1;
  min-width:     0;
  border:        none;
  border-radius: 0;
  background:    transparent;
  padding-left:  10px;
  box-shadow:    none !important;
}
.input-prefix .input:focus {
  outline:      none;
  border-color: transparent;
}
.input-prefix-text {
  padding:        0 9px 0 12px;
  font-family:    var(--font-mono);
  color:          var(--ink-soft);
  font-size:      13px;
  border-right:   1px solid var(--line);
  white-space:    nowrap;
  flex-shrink:    0;
  pointer-events: none;
  line-height:    1;
}

/* ============ QR MERCADO PAGO ============ */
.mp-qr {
  display:       flex;
  align-items:   center;
  gap:           16px;
  margin-top:    14px;
  padding:       14px;
  border:        1px solid var(--line-soft);
  border-radius: 10px;
  background:    var(--cream, #f7f1e6);
}
.mp-qr-box {
  width:         150px;
  height:        150px;
  flex-shrink:   0;
  background:    #fff;
  border-radius: 8px;
  padding:       8px;
  display:       grid;
  place-items:   center;
}
.mp-qr-box img, .mp-qr-box canvas { display: block; }
.mp-qr-info     { min-width: 0; }
.mp-qr-title    { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); font-weight: 600; }
.mp-qr-amount   { font-family: var(--font-serif, serif); font-size: 26px; font-weight: 500; color: var(--ink); margin: 4px 0 6px; line-height: 1; }
.mp-qr-alias    { font-size: 13px; color: var(--ink); }
.mp-qr-alias strong { color: #00a6e0; }
.mp-qr-hint     { font-size: 11px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4; }

/* ============ TOAST ============ */
.toast {
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%) translateY(60px);
  background:    var(--ink);
  color:         var(--cream);
  padding:       14px 22px;
  border-radius: 8px;
  font-size:     13px;
  z-index:       200;
  opacity:       0;
  transition:    all 0.3s cubic-bezier(.2,.9,.3,1.2);
  box-shadow:    0 14px 40px -10px rgba(0,0,0,0.5);
  border:        1px solid var(--copper);
  display:       flex;
  align-items:   center;
  gap:           10px;
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.toast-icon {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  background:    var(--copper);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
}

/* ── Slots pasados (hora ya transcurrida) ── */
.slot-past {
  opacity: 0.42;
}
.slot-past .slot-content { font-style: italic; }
.slot-past.slot-empty     { pointer-events: none; cursor: default; }
.slot-past.slot-empty:hover { background: none; }

/* ============ HORARIO BLOQUEADO ============ */
.slot-blocked { cursor: default; }
.slot-blocked .slot-time { opacity: 0.5; }

.blocked-booking {
  flex:       1;
  display:    flex;
  align-items: center;
  gap:        12px;
  padding:    10px 14px;
  border:     1px solid rgba(156,42,31,0.22);
  border-left: 3px solid var(--danger);
  border-radius: 6px;
  background: repeating-linear-gradient(
    -48deg,
    rgba(156,42,31,0.025) 0px,
    rgba(156,42,31,0.025) 5px,
    transparent 5px,
    transparent 12px
  );
  cursor: default;
}

.blocked-icon {
  width:         32px;
  height:        32px;
  border-radius: 8px;
  background:    rgba(156,42,31,0.12);
  color:         var(--danger);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
}

.blocked-icon svg { width: 15px; height: 15px; }

.blocked-name { color: var(--danger) !important; }

.icon-btn-unblock:hover {
  background:   var(--danger) !important;
  color:        white !important;
  border-color: var(--danger) !important;
}

/* Modal — botón "Confirmar bloqueo" */
.btn-bloquear {
  background:   var(--danger);
  border-color: var(--danger);
}
.btn-bloquear:hover {
  background:   #7a1a12;
  border-color: #7a1a12;
}

/* Badge reserva online / local */
.badge-online,
.badge-local {
  display:        inline-block;
  font-size:      9px;
  font-family:    var(--font-mono, monospace);
  font-weight:    600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius:  4px;
  padding:        1px 5px;
  vertical-align: middle;
  margin-left:    4px;
}
.badge-online {
  color:      #1a6e3c;
  background: rgba(26,110,60,.12);
  border:     1px solid rgba(26,110,60,.25);
}
.badge-local {
  color:      var(--copper, #b8552c);
  background: rgba(184,85,44,.12);
  border:     1px solid rgba(184,85,44,.28);
}

/* Botón trigger en card-head */
.btn-blk-trigger:hover {
  border-color: var(--danger) !important;
  color:        var(--danger) !important;
  background:   rgba(156,42,31,0.06) !important;
}

/* Banner info dentro del modal */
.blk-info {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    rgba(156,42,31,0.06);
  border:        1px solid rgba(156,42,31,0.18);
  border-radius: 8px;
  padding:       12px 14px;
  font-size:     12.5px;
  color:         var(--ink-soft);
  line-height:   1.5;
  margin-top:    4px;
}

.blk-info svg { flex-shrink: 0; color: var(--danger); margin-top: 1px; }

/* Botón eliminar reserva (icono en la agenda) */
.icon-btn.del:hover {
  background:    var(--danger) !important;
  border-color:  var(--danger) !important;
  color:         white !important;
}

/* Modal — botón "Eliminar reserva" */
.btn-eliminar {
  background:   var(--danger);
  border-color: var(--danger);
}
.btn-eliminar:hover {
  background:   #7a1a12;
  border-color: #7a1a12;
}

/* Banner info dentro del modal de eliminación */
.del-info {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    rgba(156,42,31,0.06);
  border:        1px solid rgba(156,42,31,0.18);
  border-radius: 8px;
  padding:       12px 14px;
  font-size:     12.5px;
  color:         var(--ink-soft);
  line-height:   1.5;
  margin-top:    4px;
}
.del-info svg { flex-shrink: 0; color: var(--danger); margin-top: 1px; }

/* ============ LOGIN PANEL ============ */
.login-overlay {
  background:      linear-gradient(140deg, #0f0c09 0%, var(--ink) 100%);
  backdrop-filter: none;
  z-index:         300;
}

.login-card {
  background:    rgba(255,255,255,0.04);
  border:        1px solid rgba(244,237,226,0.12);
  border-radius: 16px;
  padding:       44px 40px;
  width:         100%;
  max-width:     380px;
  text-align:    center;
  animation:     rise 0.35s cubic-bezier(.2,.9,.3,1.1);
}

.login-brand-mark {
  font-family:    var(--font-serif);
  font-size:      42px;
  font-weight:    300;
  font-style:     italic;
  color:          var(--cream);
  letter-spacing: -0.02em;
  line-height:    1;
  margin-bottom:  6px;
}
.login-brand-mark span { color: var(--copper); font-style: normal; font-weight: 600; }

.login-brand-sub {
  font-size:      10px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color:          rgba(244,237,226,0.4);
  margin-bottom:  36px;
}

.login-form { text-align: left; }
.login-form .field-label { color: rgba(244,237,226,0.55); }
.login-form .input,
.login-form .select {
  background:   rgba(255,255,255,0.07);
  border-color: rgba(244,237,226,0.18);
  color:        var(--cream);
}
.login-form .input::placeholder { color: rgba(244,237,226,0.28); }
.login-form .input:focus,
.login-form .select:focus {
  border-color: var(--copper);
  background:   rgba(255,255,255,0.1);
  box-shadow:   0 0 0 3px rgba(184,85,44,0.18);
}
.login-form .select option { background: #1a1410; color: var(--cream); }

.login-error {
  background:    rgba(156,42,31,0.22);
  border:        1px solid rgba(156,42,31,0.4);
  border-radius: 6px;
  color:         #f09090;
  font-size:     12.5px;
  padding:       9px 12px;
  margin-bottom: 10px;
}

/* ============ PERMISOS POR ROL ============ */
body.role-barber .admin-only { display: none !important; }
body.role-barber .hours-field input[type="time"] {
  pointer-events: none;
  opacity:        0.5;
  cursor:         not-allowed;
}

/* ============ LOGOUT EN SIDEBAR ============ */
.sidebar-logout {
  margin-left:  auto;
  flex-shrink:  0;
  color:        rgba(244,237,226,0.4);
  background:   transparent;
  border-color: rgba(244,237,226,0.12);
}
.sidebar-logout:hover {
  background:   rgba(244,237,226,0.1) !important;
  color:        var(--cream) !important;
  border-color: rgba(244,237,226,0.28) !important;
  transform:    none !important;
}

/* ============ AJUSTES ============ */
.settings-row {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       16px 14px;
  border-radius: 10px;
  border:        1px solid var(--line-soft);
  margin-bottom: 10px;
  transition:    all 0.18s;
  cursor:        pointer;
}
.settings-row:hover        { background: var(--cream); border-color: var(--line); }
.settings-row:last-child   { margin-bottom: 0; }
.settings-row.danger:hover { background: rgba(156,42,31,0.05); border-color: rgba(156,42,31,0.28); }

.settings-icon {
  width:         36px;
  height:        36px;
  border-radius: 8px;
  background:    var(--ink);
  color:         var(--copper);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
}
.settings-icon svg    { width: 16px; height: 16px; }
.settings-icon.danger { background: rgba(156,42,31,0.1); color: var(--danger); }

.settings-info      { flex: 1; min-width: 0; }
.settings-title     { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.settings-sub       { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.settings-row > svg { color: var(--ink-soft); flex-shrink: 0; }

/* ============ GESTIÓN DE USUARIOS ============ */
.modal-section-title {
  font-size:      10.5px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color:          var(--ink-soft);
  font-weight:    600;
  margin:         20px 0 12px;
  padding-bottom: 8px;
  border-bottom:  1px solid var(--line-soft);
}

.user-card {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px 14px;
  border-radius: 8px;
  border:        1px solid var(--line-soft);
  margin-bottom: 8px;
  transition:    all 0.18s;
}
.user-card:last-of-type { margin-bottom: 0; }
.user-card.confirm-delete {
  border-color: rgba(156,42,31,0.35);
  background:   rgba(156,42,31,0.04);
}

.user-card-avatar {
  width:         36px;
  height:        36px;
  border-radius: 50%;
  background:    linear-gradient(135deg, var(--copper), var(--burgundy));
  color:         var(--cream);
  display:       grid;
  place-items:   center;
  font-family:   var(--font-serif);
  font-size:     15px;
  font-weight:   600;
  flex-shrink:   0;
}

.user-card-info    { flex: 1; min-width: 0; }
.user-card-name    { font-size: 13.5px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-card-role    { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
.user-card-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }

.badge-you {
  font-size:      9px;
  padding:        2px 7px;
  border-radius:  10px;
  background:     rgba(184,85,44,.12);
  color:          var(--copper);
  font-weight:    600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family:    var(--font-mono);
}

.btn.danger-outline {
  background:   rgba(156,42,31,0.08);
  border-color: rgba(156,42,31,0.28);
  color:        var(--danger);
}
.btn.danger-outline:hover {
  background:   var(--danger);
  border-color: var(--danger);
  color:        white;
}

/* Callout de contraseña generada */
.pw-callout {
  background:    var(--ink);
  border-radius: 10px;
  padding:       16px 18px;
  margin-bottom: 18px;
}
.pw-callout-label {
  font-size:      10.5px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color:          rgba(244,237,226,0.5);
  margin-bottom:  6px;
}
.pw-callout-pw {
  font-family:    var(--font-mono);
  font-size:      26px;
  color:          var(--gold);
  letter-spacing: .12em;
  font-weight:    500;
}
.pw-callout-hint {
  font-size:   11px;
  color:       rgba(244,237,226,0.4);
  margin-top:  8px;
  line-height: 1.5;
}

/* ============ NOTIFICACIONES KPI ============ */
.kpi.notif-kpi {
  display:        flex;
  flex-direction: column;
  padding:        20px 22px 16px;
  gap:            0;
  overflow:       hidden;
}

.notif-kpi-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   10px;
}

.notif-kpi-head .kpi-label { margin-bottom: 0; }
.notif-head-actions { display: flex; gap: 6px; align-items: center; }

.notif-badge {
  display:       inline-block;
  background:    var(--copper);
  color:         white;
  font-family:   var(--font-mono);
  font-size:     10px;
  font-weight:   600;
  padding:       1px 6px;
  border-radius: 10px;
  margin-left:   6px;
  vertical-align: middle;
  line-height:   16px;
}

.notif-list {
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.notif-item {
  display:      flex;
  align-items:  flex-start;
  gap:          9px;
  padding:      8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.notif-item:last-child { border-bottom: none; }

/* Notificación sin confirmar: resaltada con un fondo clarito */
.notif-item.unread,
.notif-history-item.unread {
  background:    rgba(184,85,44,0.07);
  border-radius: 8px;
  box-shadow:    inset 3px 0 0 var(--copper);
  padding-left:  9px;
}

.notif-icon {
  width:           26px;
  height:          26px;
  border-radius:   6px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.notif-icon.type-new    { background: rgba(90,122,74,.12);  color: var(--success); }
.notif-icon.type-cancel { background: rgba(156,42,31,.10);  color: var(--danger);  }
.notif-icon.type-vino   { background: rgba(90,122,74,.12);  color: var(--success); }
.notif-icon.type-novino { background: rgba(184,85,44,.10);  color: var(--copper);  }
.notif-icon.type-paid   { background: var(--success, #5a7a4a); color: #fff;          }

.notif-body    { flex: 1; min-width: 0; }

.notif-title {
  font-size:     12px;
  font-weight:   600;
  color:         var(--ink);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.notif-detail {
  font-size:     11px;
  color:         var(--ink-soft);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  margin-top:    1px;
}

.notif-ts {
  font-family:  var(--font-mono);
  font-size:    10px;
  color:        var(--ink-soft);
  flex-shrink:  0;
  padding-top:  2px;
  white-space:  nowrap;
}

.notif-empty {
  flex:        1;
  display:     flex;
  align-items: center;
  justify-content: center;
  color:       var(--ink-soft);
  font-size:   12px;
  text-align:  center;
  padding:     12px 0;
}

.notif-kpi-footer {
  margin-top:  10px;
  display:     flex;
  justify-content: flex-end;
}

/* Modal historial */
.notif-history-list {
  display:        flex;
  flex-direction: column;
  max-height:     480px;
  overflow-y:     auto;
}

/* Filtro de categorías del historial */
.notif-filter {
  display:        flex;
  flex-wrap:      wrap;
  gap:            6px;
  margin-bottom:  12px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--line-soft);
}
.notif-chip {
  font-family:    inherit;
  font-size:      12px;
  font-weight:    500;
  padding:        6px 12px;
  border-radius:  20px;
  border:         1px solid var(--line);
  background:     white;
  color:          var(--ink-soft);
  cursor:         pointer;
  transition:     all 0.15s;
}
.notif-chip:hover  { border-color: var(--copper); color: var(--ink); }
.notif-chip.active {
  background:    var(--ink);
  color:         var(--cream);
  border-color:  var(--ink);
}

.notif-history-item {
  display:      flex;
  align-items:  flex-start;
  gap:          12px;
  padding:      12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.notif-history-item:last-child { border-bottom: none; }

.notif-history-item .notif-icon {
  width:  32px;
  height: 32px;
}

.notif-history-ts {
  font-family:  var(--font-mono);
  font-size:    10px;
  color:        var(--ink-soft);
  flex-shrink:  0;
  text-align:   right;
  white-space:  nowrap;
  padding-top:  2px;
  line-height:  1.6;
}

.notif-history-empty {
  text-align:   center;
  padding:      48px 0;
  color:        var(--ink-soft);
  font-size:    13px;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .grid-main { grid-template-columns: 1fr; }
  .kpi-row   { grid-template-columns: 1fr 1fr 1fr; }
}

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

  .sidebar {
    position:  fixed;
    bottom: 0; left: 0; right: 0;
    top:       auto;
    height:    auto;
    flex-direction: row;
    padding:   10px;
    border-right: none;
    border-top:   1px solid #000;
    z-index:   50;
    gap:       0;
  }

  .brand, .nav-label, .sidebar-footer { display: none; }

  .nav {
    flex-direction: row;
    flex:           1;
    justify-content: space-around;
    gap:            0;
  }

  .nav-item { flex: 1; flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 10px; }
  .nav-item span { font-size: 9.5px; }
  .nav-badge { display: none; }

  .main                     { padding: 20px 18px 100px; }
  .page-title               { font-size: 32px; }
  .topbar-actions .search   { width: 100%; }
  .kpi-row                  { grid-template-columns: 1fr; gap: 10px; }
  .kpi-value                { font-size: 30px; }
}

/* ============================================================
   GRILLA PARALELA DE BARBEROS — agenda del día
   Cada barbero tiene su propia columna con disponibilidad
   independiente, alineada sobre un eje de tiempo compartido.
   ============================================================ */

.barber-cols-wrap {
  display:    flex;
  gap:        0;
  overflow-x: auto;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
}

/* ── Regla de horas (columna fija izquierda) ── */
.time-ruler {
  width:       50px;
  flex-shrink: 0;
  display:     flex;
  flex-direction: column;
}

/* Espaciador del ancho del header de lane */
.lane-head-spacer {
  height:        52px;
  border-bottom: 1px solid var(--line);
  flex-shrink:   0;
}

.time-ruler-inner {
  position: relative;
  /* la altura se fija inline (totalPx) — no usar flex para que no colapse */
}

.time-ruler-tick {
  position:    absolute;
  right:       7px;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--ink-soft);
  transform:   translateY(-50%);
  white-space: nowrap;
  user-select: none;
  opacity:     0.65;
}

/* ── Columna de un barbero ── */
.barber-lane {
  flex:       1;
  min-width:  190px;
  max-width:  420px;
  border-left: 1px solid var(--line);
  display:    flex;
  flex-direction: column;
}

.barber-lane-head {
  height:         52px;
  padding:        0 10px;
  display:        flex;
  align-items:    center;
  gap:            9px;
  background:     var(--cream);
  border-bottom:  1px solid var(--line);
  position:       sticky;
  top:            0;
  z-index:        6;
}

.lane-head-avatar {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  background:    var(--copper);
  color:         var(--cream);
  display:       grid;
  place-items:   center;
  font-weight:   700;
  font-size:     14px;
  flex-shrink:   0;
  letter-spacing: -0.02em;
}

.lane-head-info  { min-width: 0; }
.lane-head-name  { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-head-count { font-size: 10px; color: var(--ink-soft); font-family: var(--font-mono); margin-top: 2px; }

/* ── Cuerpo de la lane (posicionamiento absoluto de slots) ── */
.barber-lane-body {
  position: relative;
  /* la altura se fija inline (totalPx) — no usar flex para que no colapse */
}

/* Líneas horizontales por hora */
.lane-hour-line {
  position:       absolute;
  left:           0;
  right:          0;
  height:         1px;
  background:     var(--line-soft);
  pointer-events: none;
  z-index:        0;
}

/* Línea "ahora" */
.lane-now-line {
  position:       absolute;
  left:           0;
  right:          0;
  height:         2px;
  background:     var(--copper);
  z-index:        4;
  pointer-events: none;
  opacity:        0.75;
}

.lane-now-dot {
  position:      absolute;
  left:          -5px;
  top:           -4px;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--copper);
  display:       block;
}

/* ── Slot genérico (posicionado absolutamente en la lane) ── */
.lane-slot {
  position:   absolute;
  left:       3px;
  right:      3px;
  border-radius: 5px;
  overflow:   hidden;
  z-index:    2;
  box-sizing: border-box;
}

/* Slot libre */
.lane-free {
  border:      1.5px dashed rgba(184,85,44,0.38);
  background:  rgba(184,85,44,0.03);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     0 8px;
  cursor:      pointer;
  transition:  background 0.15s, border-color 0.15s;
}
.lane-free:hover {
  background:   rgba(184,85,44,0.1);
  border-color: var(--copper);
}
.lane-free-time {
  font-family: var(--font-mono);
  font-size:   11px;
  color:       var(--copper);
  font-weight: 500;
}
.lane-free-plus {
  font-size:   18px;
  font-weight: 300;
  color:       var(--copper);
  line-height: 1;
  opacity:     0.7;
}

/* Slot bloqueado */
.lane-blocked {
  background: repeating-linear-gradient(
    -48deg,
    rgba(156,42,31,0.04) 0px,
    rgba(156,42,31,0.04) 5px,
    transparent 5px,
    transparent 12px
  );
  border:      1px solid rgba(156,42,31,0.2);
  border-left: 3px solid var(--danger);
  display:     flex;
  align-items: center;
  padding:     0 6px;
  gap:         5px;
  color:       var(--danger);
  font-size:   10.5px;
}
.lane-blocked svg    { flex-shrink: 0; }
.lane-blocked-txt    { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane-unblock-btn    {
  background:    none;
  border:        none;
  cursor:        pointer;
  padding:       3px;
  border-radius: 3px;
  color:         var(--danger);
  display:       grid;
  place-items:   center;
  flex-shrink:   0;
  opacity:       0.55;
  transition:    opacity 0.15s, background 0.15s;
}
.lane-unblock-btn:hover { opacity: 1; background: rgba(156,42,31,0.1); }

/* Turno reservado */
.lane-booking {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
  border:     1px solid var(--line);
  display:    flex;
  transition: box-shadow 0.15s;
}
.lane-booking:hover  { box-shadow: 0 2px 12px -4px rgba(26,20,16,0.2); }
.lane-booking.lane-novino { opacity: 0.68; }

/* Barra de color lateral según estado de pago */
.lane-bk-accent         { width: 3px; flex-shrink: 0; background: var(--copper); }
.lane-bk-accent.paid    { background: #5a7a4a; }
.lane-bk-accent.pending { background: var(--gold, #c9a961); }
.lane-bk-accent.cash    { background: var(--ink-soft); }
.lane-bk-accent.novino  { background: var(--danger); }

/* Contenido del card */
.lane-bk-inner {
  flex:     1;
  min-width: 0;
  padding:  4px 6px 3px;
  display:  flex;
  flex-direction: column;
  overflow: hidden;
  gap:      1px;
}

.lane-bk-top {
  display:     flex;
  align-items: center;
  gap:         4px;
  min-width:   0;
}
.lane-bk-name {
  font-weight:    600;
  font-size:      12px;
  color:          var(--ink);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  flex:           1;
  min-width:      0;
}
.lane-bk-pill {
  font-size:   9px !important;
  padding:     2px 5px !important;
  line-height: 1.3 !important;
  flex-shrink: 0;
}
.lane-bk-svc {
  font-size:      11px;
  color:          var(--copper);
  font-weight:    500;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  margin-top:     1px;
}
.lane-bk-time {
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--ink-soft);
  opacity:     0.7;
  margin-top:  1px;
}
.lane-bk-actions {
  display:    flex;
  gap:        2px;
  margin-top: auto;
  padding-top: 2px;
  flex-wrap:  nowrap;
}

/* Botones de acción compactos dentro de la lane */
.lane-bk-actions .icon-btn {
  width:  22px;
  height: 22px;
}
.lane-bk-actions .icon-btn svg {
  width:  12px;
  height: 12px;
}

/* Slot pasado (opacidad reducida, no clickeable) */
.lane-past {
  opacity:        0.38;
  pointer-events: none;
}
.lane-free.lane-past { cursor: default; }
.lane-free.lane-past:hover {
  background:   rgba(184,85,44,0.03);
  border-color: rgba(184,85,44,0.38);
}

/* Responsive: en pantallas pequeñas las lanes tienen scroll horizontal */
@media (max-width: 600px) {
  .barber-lane { min-width: 160px; }
  .time-ruler  { width: 38px; }
  .time-ruler-tick { font-size: 9px; right: 4px; }
}