/* =========================================================
   NOBLE BARBER STUDIO, panel del negocio
   Software premium sobre canvas claro. Hereda los tokens
   de styles.css. Geist Mono solo para datos.
   ========================================================= */

:root {
  --canvas: var(--paper);
  --card: #FFFFFF;
  --card-line: rgba(27, 23, 18, 0.09);
  --side-line: rgba(242, 237, 229, 0.12);
  --r-panel: 12px;
}

body.crm-body {
  background: var(--canvas);
  color: var(--ink);
  overflow: hidden;
}

/* =========================================================
   ACCESO
   ========================================================= */

.login { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 0.95fr; }

.login-visual {
  position: relative;
  overflow: hidden;
  background: var(--noble-black);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--s7);
}

.login-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.4;
}

.login-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(27, 23, 18, 0.72), rgba(27, 23, 18, 0.94));
}

.login-visual > * { position: relative; z-index: 1; }

.login-visual h1 {
  font-family: var(--serif);
  font-size: clamp(32px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1.12;
  color: var(--noble-bone);
  margin: 0;
  max-width: 18ch;
}

.login-visual h1 em { font-style: italic; color: var(--noble-champagne); }

.login-visual p {
  margin: var(--s5) 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--noble-gray);
  max-width: 42ch;
}

.login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s7) var(--gutter);
  background: var(--noble-bone);
}

.login-form { width: min(390px, 100%); }

.login-form .wordmark { margin-bottom: var(--s7); }
.login-form .wordmark-type b { color: var(--ink); }
.login-form .wordmark-type span { color: var(--gold-ink); }

.login-form h2 {
  margin: 0 0 var(--s2);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
}

.login-form > p { margin: 0 0 var(--s6); font-size: 14px; color: var(--ink-muted); }
.login-form .field { margin-bottom: var(--s4); }
.login-form .btn { width: 100%; margin-top: var(--s2); }

.login-alert {
  display: none;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-card);
  background: rgba(78, 18, 22, 0.08);
  border: 1px solid rgba(78, 18, 22, 0.24);
  font-size: 13px;
  color: var(--wine);
}

.login-alert.show { display: flex; }
.login-alert i { font-size: 18px; flex-shrink: 0; }

.login-hint {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid rgba(23, 22, 20, 0.1);
}

.login-hint h4 {
  margin: 0 0 var(--s3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.login-hint ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.login-hint li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
}

.login-hint li b { color: var(--ink); font-weight: 500; }
.login-back { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s5); font-size: 13px; color: var(--ink-muted); }
.login-back:hover { color: var(--gold-ink); }

/* =========================================================
   PANEL
   ========================================================= */

.panel-shell { display: none; height: 100dvh; grid-template-columns: 244px 1fr; }
.panel-shell.show { display: grid; }

.side {
  background: var(--noble-obsidian);
  display: flex;
  flex-direction: column;
  gap: var(--s6);
  padding: var(--s6) var(--s4);
}

.side .wordmark { padding: 0 var(--s2); }

.side-user {
  padding: var(--s4);
  border-radius: var(--r-card);
  background: rgba(242, 237, 229, 0.06);
  border: 1px solid var(--side-line);
  display: grid;
  gap: 2px;
}

.side-user strong { font-size: 14px; font-weight: 600; color: var(--noble-bone); }
.side-user span { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wine-glow); }

.side-nav { display: grid; gap: 2px; }

.side-nav button {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s4);
  border-radius: var(--r-btn);
  text-align: left;
  font-size: 14px;
  color: var(--noble-gray);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.side-nav button i:first-child { font-size: 19px; }
.side-nav button:hover:not(.locked) { background: rgba(242, 237, 229, 0.08); color: var(--noble-bone); }

.side-nav button.active {
  background: rgba(214, 91, 77, 0.16);
  color: var(--noble-bone);
  box-shadow: inset 2px 0 0 var(--noble-gold);
}

.side-nav button.locked { color: rgba(242, 237, 229, 0.32); cursor: not-allowed; }
.side-nav button.locked .lock { margin-left: auto; font-size: 15px; }

.side-foot { margin-top: auto; display: grid; gap: var(--s2); }
.side-foot .btn { width: 100%; justify-content: flex-start; }

.panel-main { overflow-y: auto; background: var(--canvas); }

.panel-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
  padding: var(--s6) var(--s7);
  background: var(--canvas);
  border-bottom: 1px solid var(--card-line);
}

.panel-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
}

.panel-head-sub { margin: var(--s1) 0 0; font-size: 13px; color: var(--ink-muted); }
.panel-head-actions { display: flex; align-items: center; gap: var(--s3); }

.panel-date {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  padding: 0 var(--s3);
}

.panel-body { display: none; padding: var(--s6) var(--s7) var(--s8); }
.panel-body.active { display: block; }

/* ---------- Métricas ---------- */

.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s5); }

.metric {
  padding: var(--s5);
  border-radius: var(--r-panel);
  background: var(--card);
  border: 1px solid var(--card-line);
  display: grid;
  gap: var(--s2);
}

.metric-label { font-size: 12px; font-weight: 500; color: var(--ink-muted); }

.metric-value {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.metric-trend { font-size: 12px; color: var(--status-ink); }
.metric-trend.flat { color: var(--ink-muted); }

/* ---------- Bloques ---------- */

.grid-2 { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: var(--s4); align-items: start; }

.block { border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--card-line); overflow: hidden; }

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
}

.block-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}

.block-head .tag { font-family: var(--mono); font-size: 12px; color: var(--gold-ink); }
.block-body { padding: 0 var(--s5) var(--s5); }

/* Citas */
.appointments { display: grid; }

.appointment {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--card-line);
}

.appointment:first-child { border-top: 0; }
.appointment-time { font-family: var(--mono); font-size: 14px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.appointment-who strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.appointment-who small { font-size: 13px; color: var(--ink-muted); }

/* Base que faltaba: los modificadores de abajo solo ponían color y
   borde, sin forma de pastilla (padding, radio, fondo recortado). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.pill-ok { color: var(--status-ink); border-color: rgba(79, 99, 82, 0.3); background: rgba(79, 99, 82, 0.06); }
.pill-wait { color: var(--gold-ink); border-color: rgba(78, 18, 22, 0.3); background: rgba(78, 18, 22, 0.07); }
.pill-plain { color: var(--ink-muted); border-color: var(--card-line); }

/* ---------- Navegación de fecha (Agenda) ---------- */

.agenda-nav { display: flex; align-items: center; gap: var(--s2); }
.agenda-nav .icon-btn { width: 38px; height: 38px; border: 1px solid var(--card-line); }
.agenda-nav .icon-btn:hover { background: var(--paper-raised); color: var(--ink); }
.agenda-nav-date { font-family: var(--mono); text-transform: none; letter-spacing: 0; }

/* Ocupación */
.gauge { display: flex; align-items: center; gap: var(--s5); }

.gauge-ring {
  --value: 0;
  position: relative;
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--noble-gold) calc(var(--value) * 1%), rgba(23, 22, 20, 0.08) 0);
  display: grid;
  place-items: center;
}

.gauge-ring::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--card);
}

.gauge-ring b {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
}

.gauge-copy { display: grid; gap: var(--s1); }
.gauge-copy strong { font-size: 14px; font-weight: 600; }
.gauge-copy span { font-size: 13px; color: var(--ink-muted); }

/* Barras */
.bars { display: flex; align-items: stretch; gap: var(--s3); height: 132px; }

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--s2);
}

.bar-col i {
  display: block;
  width: 100%;
  min-height: 3px;
  border-radius: 4px 4px 0 0;
  background: rgba(78, 18, 22, 0.22);
}

.bar-col.peak i { background: var(--wine); }
.bar-col small { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); text-align: center; }

.bars-foot {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--card-line);
  font-size: 12px;
  color: var(--ink-muted);
}

.bars-foot b { font-family: var(--mono); color: var(--ink); font-weight: 500; }

/* Automatizaciones */
.automations { display: grid; }

.automation {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--card-line);
}

.automation:first-child { border-top: 0; }
.automation strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.automation small { font-size: 13px; color: var(--ink-muted); }

/* ---------- Agenda ---------- */

.agenda {
  border-radius: var(--r-panel);
  background: var(--card);
  border: 1px solid var(--card-line);
  overflow: auto;
}

.agenda-row { display: grid; min-width: 620px; border-top: 1px solid var(--card-line); }
.agenda-row:first-child { border-top: 0; }

.agenda-row.head { position: sticky; top: 0; background: var(--paper-raised); z-index: 1; }

.agenda-row.head span {
  padding: var(--s4);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
}

.agenda-hour {
  padding: var(--s4);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--card-line);
}

.agenda-cell {
  display: grid;
  gap: var(--s1);
  align-content: stretch;
  padding: var(--s2);
  min-height: 66px;
  border-right: 1px solid var(--card-line);
}
.agenda-cell:last-child { border-right: 0; }

.agenda-block {
  padding: var(--s3);
  border-radius: var(--r-card);
  background: rgba(78, 18, 22, 0.08);
  box-shadow: inset 2px 0 0 var(--wine);
  display: grid;
  align-content: center;
  gap: 2px;
}

.agenda-block strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.agenda-block small { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }

/* ---------- Clientes ---------- */

.table-tools { display: flex; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; }

.search {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1;
  max-width: 400px;
  min-height: 46px;
  padding: 0 var(--s4);
  border-radius: var(--r-btn);
  background: var(--card);
  border: 1px solid var(--card-line);
}

.search i { color: var(--ink-muted); font-size: 18px; }
.search input { width: 100%; border: 0; background: none; outline: none; font-size: 14px; }
.search input::placeholder { color: rgba(23, 22, 20, 0.38); }

.table-wrap {
  border-radius: var(--r-panel);
  background: var(--card);
  border: 1px solid var(--card-line);
  overflow: auto;
}

table.clients { width: 100%; border-collapse: collapse; min-width: 760px; }

table.clients th {
  padding: var(--s4) var(--s5);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--paper-raised);
  border-bottom: 1px solid var(--card-line);
}

table.clients td { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--card-line); font-size: 14px; }
table.clients tr:last-child td { border-bottom: 0; }
table.clients tbody tr:hover td { background: var(--paper-raised); }
table.clients .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.client-cell { display: flex; align-items: center; gap: var(--s3); }

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  background: rgba(78, 18, 22, 0.1);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold-ink);
}

.client-cell strong { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.client-cell small { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); }

/* ---------- Servicios ---------- */

.services-admin { border-radius: var(--r-panel); background: var(--card); border: 1px solid var(--card-line); overflow: hidden; }

.service-admin-row {
  display: grid;
  grid-template-columns: 1fr 96px 88px 120px;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border-top: 1px solid var(--card-line);
}

.service-admin-row:first-child { border-top: 0; }

.service-admin-row h3 {
  margin: 0 0 2px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}

.service-admin-row p { margin: 0; font-size: 13px; color: var(--ink-muted); }
.service-admin-row .num { font-family: var(--mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Estados ---------- */

.state {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s8) var(--s6);
  text-align: center;
  border-radius: var(--r-panel);
  background: var(--card);
  border: 1px solid var(--card-line);
}

.state i { font-size: 34px; color: var(--ink-muted); }

.state h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
}

.state p { margin: 0; font-size: 14px; color: var(--ink-muted); max-width: 46ch; }
.state.denied i { color: var(--gold-ink); }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .panel-head, .panel-body { padding-left: var(--s5); padding-right: var(--s5); }
}

@media (max-width: 1024px) {
  .login { grid-template-columns: 1fr; }
  .login-visual { min-height: 260px; padding: var(--s6); }
  .login-visual h1 { font-size: 32px; }
  .login-visual p { display: none; }
  .panel-shell.show { grid-template-columns: 78px 1fr; }
  .side { align-items: center; padding: var(--s5) var(--s2); }
  .side .wordmark-type, .side-user, .side-nav button span:not(.lock), .side-foot .btn span { display: none; }
  .side-nav button { justify-content: center; padding: 0; }
  .side-nav button.locked .lock { display: none; }
  .side-foot .btn { justify-content: center; }
}

@media (max-width: 768px) {
  body.crm-body { overflow: auto; }
  .panel-shell.show { grid-template-columns: 1fr; height: auto; }

  .side {
    flex-direction: row;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    overflow-x: auto;
  }

  .side .wordmark { display: none; }
  .side-nav { display: flex; gap: var(--s2); }
  .side-nav button { min-width: 44px; }
  .side-foot { margin: 0 0 0 auto; display: flex; gap: var(--s2); }

  .panel-head { position: static; padding: var(--s5) var(--s4); }
  .panel-head h2 { font-size: 27px; }
  .panel-date { display: none; }
  .panel-head-actions { width: 100%; }
  .agenda-nav { width: 100%; flex-wrap: wrap; }
  .agenda-nav-date { order: 1; flex: 1 0 100%; text-align: center; }
  .panel-body { padding: var(--s5) var(--s4) var(--s7); }
  .metrics { grid-template-columns: 1fr; gap: var(--s3); }
  .gauge { flex-direction: column; align-items: flex-start; }
  .service-admin-row { grid-template-columns: 1fr auto; gap: var(--s3); }
  .crm-modal .form { grid-template-columns: 1fr; }
}

/* ---------- Modal del panel (nueva reserva / nuevo servicio) ---------- */

.crm-modal {
  width: min(480px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  border-radius: var(--r-panel);
  background: var(--card);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
  transform: translateY(12px) scale(0.99);
  transition: transform 0.4s var(--ease);
}
.overlay.open .crm-modal { transform: none; }

.crm-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--card-line);
}

.crm-modal-head h3 { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink); }
.crm-modal-body { padding: var(--s5); }
.crm-modal .field select {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--r-btn);
  border: 1px solid var(--line);
  background: #fff;
  font-size: 14px;
  transition: border-color 0.25s var(--ease);
}
.crm-modal .field select:focus { outline: none; border-color: var(--wine); }
.crm-modal-actions { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s2); }