/* ============================================================================
   Turnero — design system "Apple". Neutros grises Apple, tipografía del sistema
   (SF Pro en Apple; Inter self-hosted de fallback), materiales frosted, sombras
   difusas, esquinas suaves. Acento intercambiable (azul/verde/clarito) y modo
   claro/oscuro (prefers-color-scheme + [data-theme]). Default: azul + claro.
   ========================================================================== */

@font-face { font-family:'Inter'; src:url('fonts/Inter-Regular.woff2')  format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Medium.woff2')   format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.woff2')     format('woff2'); font-weight:700; font-display:swap; }

:root {
  --accent: #0071E3;               /* azul Apple (base) */
  --accent-dk: #0060C7;
  --acc: var(--accent);
  --acc-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --on-acc: #fff;

  --ink:   #1D1D1F;                /* tinta Apple */
  --ink-2: #6E6E73;
  --ink-3: #8E8E93;
  --paper: #F5F5F7;               /* canvas gris Apple */
  --card:  #FFFFFF;
  --line:  #E5E5EA;               /* separador iOS */
  --suave: #ECECEF;

  --ok: #34C759;   --ok-ink: #248A3D;
  --warn: #FF9F0A; --warn-ink: #B25E00;
  --bad: #FF3B30;  --bad-ink: #C4271C;

  /* Íconos de stat tiles (bg suave + tinta) */
  --ic-bg: var(--acc-soft); --ic-fg: var(--accent);

  /* Materiales frosted para sidebar/topbar */
  --material: rgba(255,255,255,.72);
  --material-line: rgba(0,0,0,.08);

  --radius: 18px;
  --radius-sm: 12px;
  --sombra: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.055);
  --sombra-lg: 0 12px 40px rgba(0,0,0,.10);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", 'Inter', "Segoe UI", Roboto, system-ui, sans-serif;

  /* Aliases de tiles viejos (compatibilidad) */
  --p-rosa:#EEF2F6; --p-rosa-ink:#51606F; --p-crema:#FEF0DA; --p-crema-ink:#B7791F;
  --p-verde:#DBF3E8; --p-verde-ink:#12805C; --p-lila:#D7EEF0; --p-lila-ink:#157F63;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    --acc-soft: color-mix(in srgb, var(--accent) 24%, transparent);
    --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#8E8E93;
    --paper:#000000; --card:#1C1C1E; --line:#38383A; --suave:#2C2C2E;
    --ok:#30D158; --ok-ink:#30D158;
    --warn:#FF9F0A; --warn-ink:#FFB340;
    --bad:#FF453A; --bad-ink:#FF6961;
    --material: rgba(28,28,30,.72); --material-line: rgba(255,255,255,.10);
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
    --sombra-lg: 0 16px 50px rgba(0,0,0,.6);
  }
}
:root[data-theme="oscuro"] {
  --acc-soft: color-mix(in srgb, var(--accent) 24%, transparent);
  --ink:#F5F5F7; --ink-2:#A1A1A6; --ink-3:#8E8E93;
  --paper:#000000; --card:#1C1C1E; --line:#38383A; --suave:#2C2C2E;
  --ok:#30D158; --ok-ink:#30D158;
  --warn:#FF9F0A; --warn-ink:#FFB340;
  --bad:#FF453A; --bad-ink:#FF6961;
  --material: rgba(28,28,30,.72); --material-line: rgba(255,255,255,.10);
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px rgba(0,0,0,.5);
  --sombra-lg: 0 16px 50px rgba(0,0,0,.6);
}

/* Acento intercambiable (solo cambia el acento; gana sobre el default). */
:root[data-accent="azul"]    { --accent:#0071E3; --accent-dk:#0060C7; }
:root[data-accent="verde"]   { --accent:#30A46C; --accent-dk:#278C5B; }
:root[data-accent="clarito"] { --accent:#6E8299; --accent-dk:#5D7188; }

* { box-sizing: border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3 { letter-spacing:-.021em; }
a { color:var(--acc); text-decoration:none; }
.ic { display:block; flex:0 0 auto; }

/* ── Marca / emblema ─────────────────────────────────────────────────────── */
.brandmark { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-.02em; }
.brandmark svg, .brandmark img.logo { width:30px; height:30px; border-radius:8px; flex:0 0 auto; object-fit:cover; }
.brand-dot { width:12px; height:12px; border-radius:4px; background:var(--accent); display:inline-block; }
.qtx-sig { display:inline-flex; align-items:center; gap:8px; color:var(--ink-3); font-size:12px; }
.qtx-sig svg { width:20px; height:20px; border-radius:6px; }
.qtx-sig b { color:var(--ink-2); font-weight:600; }

/* ── Shell admin ─────────────────────────────────────────────────────────── */
body.app { display:flex; min-height:100vh; }
.sidebar { width:256px; flex:0 0 256px; display:flex; flex-direction:column; padding:18px 14px 14px; position:sticky; top:0; height:100vh; overflow-y:auto;
  background:var(--material); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-right:1px solid var(--material-line); }
.sidebar .brand { display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px; letter-spacing:-.02em; padding:4px 8px 16px; }
.nav { display:flex; flex-direction:column; gap:1px; }
.nav-group { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); padding:16px 12px 6px; font-weight:600; }
.nav a { display:flex; align-items:center; gap:11px; color:var(--ink-2); padding:8px 12px; border-radius:10px; font-weight:500; font-size:14px; }
.nav a .ic { width:18px; height:18px; color:var(--ink-3); }
.nav a:hover { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
.nav a:hover .ic { color:var(--ink-2); }
.nav a.on { background:var(--acc-soft); color:var(--acc); font-weight:600; }
.nav a.on .ic { color:var(--acc); }

.side-foot { margin-top:auto; padding-top:12px; }
.sig-wrap { padding:12px 12px 8px; border-top:1px solid var(--line); }

.main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 30px;
  background:var(--material); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--material-line); }
.topbar h1 { font-size:21px; margin:0; font-weight:600; letter-spacing:-.02em; }
.topbar-user { display:flex; align-items:center; gap:14px; color:var(--ink-2); font-size:13.5px; }

/* Selector de tema (al pie del sidebar): color de acento + modo claro/oscuro */
.theme-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px 2px; }
.theme-switch { display:flex; align-items:center; gap:9px; }
.theme-switch .swatch { width:17px; height:17px; border-radius:50%; padding:0; border:0; cursor:pointer; background:var(--sw); box-shadow:0 0 0 1px var(--line); transition:transform .12s ease, box-shadow .12s ease; }
.theme-switch .swatch:hover { transform:scale(1.14); }
.theme-switch .swatch[aria-pressed="true"] { box-shadow:0 0 0 2px var(--card), 0 0 0 3.5px var(--sw); }

.mode-switch { display:flex; align-items:center; gap:2px; background:color-mix(in srgb, var(--ink) 8%, transparent); border-radius:999px; padding:2px; }
.mode-switch .mode { display:grid; place-items:center; width:28px; height:24px; padding:0; border:0; cursor:pointer; background:transparent; color:var(--ink-3); border-radius:999px; transition:background .14s ease, color .14s ease; }
.mode-switch .mode:hover { color:var(--ink-2); }
.mode-switch .mode[aria-pressed="true"] { background:var(--card); color:var(--acc); box-shadow:var(--sombra); }
.mode-switch .mode .ic { width:16px; height:16px; }

.content { padding:26px 30px 40px; max-width:1240px; width:100%; }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--sombra); padding:20px 22px; }
.card + .card, .card + .grid, .grid + .card, .grid + .grid { margin-top:18px; }
.card h2 { font-size:15px; margin:0 0 14px; font-weight:600; letter-spacing:-.01em; }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.card-head h2 { margin:0; }
.grid { display:grid; gap:16px; }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }

/* ── Stat tiles (con ícono; números tabulares grandes) ───────────────────── */
.stat { display:flex; flex-direction:column; }
.stat .ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--ic-bg); color:var(--ic-fg); margin-bottom:15px; }
.stat .ico .ic { width:22px; height:22px; }
.stat .n { font-size:32px; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; }
.stat .l { color:var(--ink-2); font-size:13.5px; margin-top:8px; }
.stat .d { font-size:12.5px; font-weight:600; margin-top:6px; display:inline-flex; align-items:center; gap:4px; }
.stat .d.up { color:var(--ok-ink); } .stat .d.down { color:var(--bad-ink); } .stat .d.flat { color:var(--ink-3); }
.stat.teal, .stat.blue { --ic-bg:var(--acc-soft); --ic-fg:var(--accent); }
.stat.green  { --ic-bg:color-mix(in srgb, var(--ok) 16%, transparent);   --ic-fg:var(--ok-ink); }
.stat.amber  { --ic-bg:color-mix(in srgb, var(--warn) 18%, transparent);  --ic-fg:var(--warn-ink); }
.stat.red    { --ic-bg:color-mix(in srgb, var(--bad) 16%, transparent);   --ic-fg:var(--bad-ink); }
.stat.violet { --ic-bg:color-mix(in srgb, #7A5AF8 16%, transparent);      --ic-fg:#7A5AF8; }
:root[data-theme="oscuro"] .stat.violet { --ic-fg:#A78BFA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="claro"]) .stat.violet { --ic-fg:#A78BFA; } }
/* aliases viejos */
.stat.lila .ico { background:#D7EEF0; color:#157F63; } .stat.crema .ico { background:#FEF0DA; color:#B7791F; }
.stat.verde .ico { background:#DBF3E8; color:#12805C; } .stat.rosa .ico { background:#E7E7FB; color:#5B5BD6; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
table.t { width:100%; border-collapse:collapse; }
table.t th, table.t td { text-align:left; padding:12px 12px; border-bottom:1px solid var(--line); font-size:14px; }
table.t th { color:var(--ink-3); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
table.t tr:last-child td { border-bottom:0; }
table.t tbody tr:hover td { background:var(--suave); }
.empty { color:var(--ink-3); text-align:center; padding:28px 18px; font-size:14px; }

/* ── Pills / chips ───────────────────────────────────────────────────────── */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.01em; }
.pill-ok   { background:color-mix(in srgb, var(--ok) 16%, transparent);   color:var(--ok-ink); }
.pill-warn { background:color-mix(in srgb, var(--warn) 18%, transparent); color:var(--warn-ink); }
.pill-bad  { background:color-mix(in srgb, var(--bad) 15%, transparent);  color:var(--bad-ink); }
.pill-acc  { background:var(--acc-soft); color:var(--acc); }
.pill-mute { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink-3); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border:1px solid var(--line); border-radius:999px; font-size:13px; color:var(--ink-2); }

/* ── Botones (píldora Apple) ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:980px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-weight:600; font-size:14px; cursor:pointer; transition:background .14s, border-color .14s, opacity .14s, transform .06s; }
.btn .ic { width:17px; height:17px; }
.btn:hover { background:var(--suave); }
.btn:active { transform:scale(.97); }
.btn-primary { background:var(--acc); border-color:transparent; color:var(--on-acc); }
.btn-primary:hover { background:var(--acc); opacity:.92; }
.btn-ghost { background:transparent; border-color:transparent; }
.btn-ghost:hover { background:var(--suave); }
.btn-danger { color:var(--bad-ink); border-color:color-mix(in srgb, var(--bad) 28%, var(--line)); background:var(--card); }
.btn-danger:hover { background:color-mix(in srgb, var(--bad) 8%, var(--card)); }
.btn-sm { padding:6px 13px; font-size:13px; }
.btn-lg { padding:13px 26px; font-size:16px; }
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:8px; }
.actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--ink-2); }
input, select, textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); font:inherit; }
input[type=color] { padding:4px; height:42px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-soft); }
input::placeholder, textarea::placeholder { color:var(--ink-3); }
.row { display:flex; gap:14px; flex-wrap:wrap; }
.row > .field { flex:1 1 180px; }

/* ── Flash ───────────────────────────────────────────────────────────────── */
.flash { padding:12px 16px; border-radius:var(--radius-sm); margin-bottom:18px; font-weight:500; font-size:14px; border:1px solid transparent; }
.flash-ok    { background:color-mix(in srgb, var(--ok) 12%, var(--card));  color:var(--ok-ink);  border-color:color-mix(in srgb, var(--ok) 25%, transparent); }
.flash-error { background:color-mix(in srgb, var(--bad) 10%, var(--card));  color:var(--bad-ink); border-color:color-mix(in srgb, var(--bad) 25%, transparent); }
.flash-info  { background:var(--acc-soft); color:var(--acc); border-color:color-mix(in srgb, var(--accent) 25%, transparent); }

/* ── Timeline de agenda ──────────────────────────────────────────────────── */
.timeline { position:relative; }
.tl-row { display:grid; grid-template-columns:60px 1fr; gap:12px; align-items:stretch; }
.tl-hour { color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums; padding-top:6px; text-align:right; }
.tl-track { border-top:1px solid var(--line); min-height:42px; padding:6px 0; display:flex; flex-direction:column; gap:6px; }
.tl-block { border-radius:12px; padding:10px 13px; color:#fff; font-size:13px; line-height:1.35; box-shadow:var(--sombra); }
.tl-block .h { font-weight:700; }
.tl-block.is-cancelada { opacity:.5; text-decoration:line-through; }

/* Turno estilo Apple: tarjeta clara con stripe de color por servicio */
.tl-items { display:flex; flex-direction:column; gap:8px; padding:6px 0; }
.appt { display:flex; align-items:flex-start; gap:12px; padding:11px 13px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--ink) 3%, var(--card)); border:1px solid var(--line); }
.appt .stripe { width:4px; align-self:stretch; border-radius:999px; background:var(--c,var(--acc)); flex:0 0 auto; }
.appt .info { min-width:0; flex:1; }
.appt .top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.appt .time { font-weight:600; font-size:13.5px; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.appt .name { font-weight:600; font-size:13.5px; }
.appt .sub { color:var(--ink-2); font-size:12.5px; margin-top:2px; }
.appt.off { opacity:.6; }
.appt.off .name { text-decoration:line-through; }
.appt-actions { margin-top:8px; }
.appt-actions summary { cursor:pointer; font-size:12.5px; font-weight:600; color:var(--acc); list-style:none; display:inline-flex; align-items:center; gap:4px; width:max-content; }
.appt-actions summary::-webkit-details-marker { display:none; }
.appt-actions summary::after { content:'▾'; font-size:9px; }
.appt-actions[open] summary::after { content:'▴'; }

/* ── Reserva pública: cards de servicio y slots ──────────────────────────── */
.svc-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.svc-card { display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); cursor:pointer; text-align:left; border-left:4px solid var(--acc); transition:box-shadow .14s, transform .1s; }
.svc-card:hover { transform:translateY(-2px); box-shadow:var(--sombra-lg); }
.svc-card .nm { font-weight:600; }
.svc-card .meta { color:var(--ink-3); font-size:13px; }
.slots { display:flex; flex-wrap:wrap; gap:8px; }
.slot { padding:9px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); cursor:pointer; font-weight:600; font-size:14px; font-variant-numeric:tabular-nums; }
.slot:hover, .slot.sel { border-color:var(--acc); background:var(--acc-soft); color:var(--acc); }
.slot-group { color:var(--ink-3); font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin:12px 0 8px; }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { display:flex; align-items:center; gap:8px; margin-bottom:22px; }
.steps .s { display:flex; align-items:center; gap:8px; color:var(--ink-3); font-size:13px; font-weight:600; }
.steps .s .dot { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--suave); color:var(--ink-3); font-size:12px; }
.steps .s.on { color:var(--ink); } .steps .s.on .dot { background:var(--acc); color:var(--on-acc); }
.steps .s.done .dot { background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok-ink); }
.steps .bar { flex:1; height:2px; background:var(--line); }

/* ── Login / público ─────────────────────────────────────────────────────── */
body.centered { display:grid; place-items:center; min-height:100vh; padding:24px; }
.login-card { width:100%; max-width:390px; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--sombra-lg); padding:34px 30px; }
.login-card .brand { display:flex; align-items:center; justify-content:center; gap:10px; font-weight:600; font-size:19px; padding:0 0 8px; }
.login-card h1 { font-size:19px; text-align:center; margin:4px 0 20px; }
.login-card .btn { width:100%; justify-content:center; }
.public-foot { text-align:center; margin-top:20px; }

/* ── Calendario ──────────────────────────────────────────────────────────── */
.cal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.cal-title { font-size:17px; font-weight:600; }
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cal .dow { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); text-align:center; padding:4px 0; font-weight:600; }
.cal .day { min-height:108px; border:1px solid var(--line); border-radius:14px; padding:8px; background:var(--card); display:flex; flex-direction:column; gap:4px; overflow:hidden; }
.cal.week .day { min-height:440px; }
.cal .day.out { opacity:.4; }
.cal .day.today { border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc); }
.cal .day .dnum { font-size:13px; font-weight:600; color:var(--ink-2); text-decoration:none; }
.cal .day.today .dnum { color:var(--acc); }
.cal a.ev { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--ink); text-decoration:none; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal a.ev:hover { color:var(--acc); }
.cal a.ev .cdot { width:8px; height:8px; border-radius:3px; flex:0 0 auto; }
.cal a.ev .evh { font-variant-numeric:tabular-nums; color:var(--ink-2); }
.cal .more { font-size:11px; color:var(--ink-3); margin-top:2px; }

/* ── Motion ──────────────────────────────────────────────────────────────── */
.card, .btn, .slot, .svc-card, .tl-block, .nav a, .stat .ico { transition:background .14s, border-color .14s, box-shadow .16s, color .14s, transform .08s; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes qtx-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
  .content > .card, .content > .grid > .card, .content > form > .card { animation:qtx-rise .34s cubic-bezier(.22,.61,.36,1) both; }
  .content > .grid > .card:nth-child(2){animation-delay:.04s} .content > .grid > .card:nth-child(3){animation-delay:.08s} .content > .grid > .card:nth-child(4){animation-delay:.12s}
  .stat:hover .ico { transform:scale(1.06); }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px) { .grid.cols-4 { grid-template-columns:repeat(2,1fr); } .grid.cols-3 { grid-template-columns:1fr; } }
@media (max-width:760px) {
  body.app { flex-direction:column; }
  .sidebar { width:100%; flex:none; height:auto; position:static; border-right:0; border-bottom:1px solid var(--material-line); }
  .nav { flex-flow:row wrap; } .nav-group { width:100%; padding:8px 10px 2px; }
  .side-foot { margin-top:14px; }
  .topbar { padding-left:18px; padding-right:18px; }
  .grid.cols-4, .grid.cols-2 { grid-template-columns:1fr; } .content { padding:18px; }
}