/* ==========================================================================
   Producción Briox — design tokens (Apple-style system)
   Cambia estos valores y cambia toda la web.
   ========================================================================== */
:root{
  --bg:#f5f5f7;
  --bg-elevated:#ffffff;
  --bg-soft:#fbfbfd;
  --text:#1d1d1f;
  --text-secondary:#6e6e73;
  --text-tertiary:#86868b;
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --blue-soft:rgba(0,113,227,.1);
  --green:#0a8a3c;
  --red:#d70015;
  --amber:#c77700;
  --border:rgba(0,0,0,.08);
  --border-soft:rgba(0,0,0,.05);
  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-md:0 12px 30px rgba(0,0,0,.08);
  --shadow-lg:0 24px 60px rgba(0,0,0,.14);
  --blur-bg:rgba(255,255,255,.78);

  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-xs:8px;
  --radius-pill:980px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:19px; --fs-xl:24px; --fs-2xl:32px; --fs-3xl:40px; --fs-display:56px;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.28,.11,.32,1);
  --ease-spring:cubic-bezier(.22,1,.36,1);

  /* Turnos — identidad de color fija por turno (T1 naranja / T2 azul / T3 verde) */
  --t1:#ff9500; --t1-soft:rgba(255,149,0,.14);
  --t2:#0071e3; --t2-soft:rgba(0,113,227,.12);
  --t3:#34c759; --t3-soft:rgba(52,199,89,.16);
}
:root[data-theme="dark"]{ --t1:#ff9f0a; --t2:#409cff; --t3:#32d74b; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --t1:#ff9f0a; --t2:#409cff; --t3:#32d74b; }
}

:root[data-theme="dark"]{
  --bg:#000000;
  --bg-elevated:#1c1c1e;
  --bg-soft:#131315;
  --text:#f5f5f7;
  --text-secondary:#a1a1a6;
  --text-tertiary:#8d8d92;
  --border:rgba(255,255,255,.1);
  --border-soft:rgba(255,255,255,.06);
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --blur-bg:rgba(20,20,22,.75);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --bg-elevated:#1c1c1e; --bg-soft:#131315;
    --text:#f5f5f7; --text-secondary:#a1a1a6; --text-tertiary:#8d8d92;
    --border:rgba(255,255,255,.1); --border-soft:rgba(255,255,255,.06);
    --shadow-sm:0 2px 8px rgba(0,0,0,.3); --shadow-md:0 12px 30px rgba(0,0,0,.45);
    --shadow-lg:0 24px 60px rgba(0,0,0,.55); --blur-bg:rgba(20,20,22,.75);
  }
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:var(--font); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:var(--fs-base); line-height:1.47; transition:background-color .3s var(--ease), color .3s var(--ease);
}
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; }
::selection{ background:var(--blue-soft); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:99px; }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); }

.hidden{ display:none !important; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-8); height:52px;
  background:var(--blur-bg); backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-soft);
}
.topbar-brand{ display:flex; align-items:center; gap:var(--sp-2); font-weight:600; font-size:var(--fs-md); letter-spacing:-.01em; cursor:pointer; }
.topbar-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); }
.topbar-crumb{ color:var(--text-secondary); font-weight:400; }
.topbar-right{ display:flex; align-items:center; gap:var(--sp-4); }
.topbar-clock{ font-size:var(--fs-sm); color:var(--text-secondary); font-variant-numeric:tabular-nums; }

.sim-banner{
  display:flex; align-items:center; justify-content:center; gap:var(--sp-5); flex-wrap:wrap;
  padding:10px var(--sp-8); background:rgba(199,119,0,.12); border-bottom:1px solid rgba(199,119,0,.25);
  color:var(--amber); font-size:var(--fs-sm); text-align:center;
}
.sim-banner-link{
  background:none; border:none; padding:0; color:var(--amber); font-weight:700; font-size:inherit;
  text-decoration:underline; cursor:pointer; white-space:nowrap;
}

.login-screen{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:var(--sp-4); }
.login-topbar-brand{
  position:absolute; top:var(--sp-8); left:var(--sp-8); display:flex; align-items:center; gap:var(--sp-2);
  font-weight:600; font-size:var(--fs-md); letter-spacing:-.01em; color:var(--text);
}
.login-topbar-brand .dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); }
/* Padding vertical/horizontal iguales (sp-8) para que el aire alrededor del formulario sea
   simétrico; el título centrado y el botón con el mismo respiro que el resto de campos. */
.login-card{ width:100%; max-width:360px; background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); padding:var(--sp-8); }
.login-card h1{ font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.02em; text-align:center; margin-bottom:var(--sp-7); }
.login-error{ color:var(--red); font-size:var(--fs-sm); margin:calc(-1 * var(--sp-2)) 0 var(--sp-5); }

.icon-btn{
  width:32px; height:32px; border-radius:50%; border:none; background:transparent;
  display:flex; align-items:center; justify-content:center; color:var(--text);
  cursor:pointer; transition:background .2s var(--ease);
}
.icon-btn:hover{ background:rgba(0,0,0,.06); }
:root[data-theme="dark"] .icon-btn:hover{ background:rgba(255,255,255,.1); }
.icon-btn svg{ width:17px; height:17px; }

/* ---------- Layout ---------- */
.view{ max-width:1180px; margin:0 auto; padding:var(--sp-10) var(--sp-8) var(--sp-16); }
.view-enter > *{ animation:bx-rise .55s var(--ease-spring) both; }
.view-enter > *:nth-child(2){ animation-delay:.05s; }
.view-enter > *:nth-child(3){ animation-delay:.1s; }
.view-enter > *:nth-child(4){ animation-delay:.15s; }
@keyframes bx-rise{ from{ transform:translateY(14px); opacity:.001; } to{ transform:translateY(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .view-enter > *{ animation:none !important; } }

/* ---------- Hero ---------- */
.hero{ text-align:center; padding:var(--sp-12) 0 var(--sp-8); }
.hero-eyebrow{ font-size:var(--fs-base); color:var(--blue); font-weight:600; margin-bottom:var(--sp-2); }
.hero h1{ font-size:var(--fs-display); font-weight:600; letter-spacing:-.02em; line-height:1.05; }
.hero p{ margin-top:var(--sp-4); font-size:var(--fs-xl); color:var(--text-secondary); font-weight:400; max-width:620px; margin-left:auto; margin-right:auto; }

/* ---------- Product cards grid (home) ---------- */
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); margin-top:var(--sp-10); }
@media (max-width:900px){ .cards-grid{ grid-template-columns:1fr; } }

.product-card{
  position:relative; background:var(--bg-elevated); border-radius:var(--radius-lg);
  padding:var(--sp-8) var(--sp-7) var(--sp-7); border:1px solid var(--border-soft);
  box-shadow:var(--shadow-sm); cursor:pointer; overflow:hidden;
  transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease-spring), border-color .3s;
  text-align:left;
  display:flex; flex-direction:column; height:100%;
}
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--border); }
/* Icono EN LÍNEA junto al nombre (mismo criterio que Personal/Turnos/Otro Personal) — mismo
   tamaño de siempre (52px), solo cambia que ya no va apilado encima del título. */
.product-card-title-group{ display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-3); }
.product-card .glyph{
  width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); flex-shrink:0;
}
.product-card .glyph svg{ width:26px; height:26px; }
/* Reserva siempre 2 líneas de título: si un nombre de categoría es más largo que otro y
   envuelve a 2 líneas, las cifras de abajo (metrics) siguen naciendo a la misma altura
   en las 3 tarjetas hermanas — nunca deben depender de cuántas líneas ocupe el título. */
.product-card h3{ font-size:var(--fs-xl); font-weight:600; color:var(--text); letter-spacing:-.01em; line-height:1.25; min-height:2.5em; display:flex; align-items:center; }
.product-card .sub{ color:var(--text-secondary); font-size:var(--fs-base); margin-top:var(--sp-1); }
.product-card .metrics{ display:flex; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-7); }
.metric-box{ flex:1; background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-sm); padding:var(--sp-3) var(--sp-4); text-align:center; }
.metric-box .label{ font-size:var(--fs-2xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; font-weight:600; line-height:1.3; min-height:2.6em; }
.metric-box .value{ font-size:var(--fs-xl); font-weight:700; color:var(--text); letter-spacing:-.01em; margin-top:var(--sp-1); font-variant-numeric:tabular-nums; }
.product-card .enter-arrow{
  position:absolute; top:var(--sp-7); right:var(--sp-7); width:30px; height:30px; border-radius:50%;
  background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--text-tertiary);
  transition:transform .3s var(--ease), background .3s, color .3s;
}
.product-card:hover .enter-arrow{ background:var(--blue); color:#fff; transform:translateX(3px); }
.product-card .enter-arrow svg{ width:14px; height:14px; }

/* ---------- Segmented control ---------- */
.segmented{
  display:inline-flex; position:relative; background:rgba(0,0,0,.06); border-radius:var(--radius-pill);
  padding:3px; gap:2px;
}
:root[data-theme="dark"] .segmented{ background:rgba(255,255,255,.08); }
.segmented button{
  position:relative; z-index:1; border:none; background:transparent; padding:8px 20px;
  font-size:var(--fs-base); font-weight:500; color:var(--text-secondary); border-radius:var(--radius-pill);
  cursor:pointer; transition:color .25s var(--ease); white-space:nowrap;
}
.segmented button.active{ color:var(--text); }
.segmented .seg-thumb{
  position:absolute; top:3px; bottom:3px; left:3px; background:var(--bg-elevated); border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease-spring), width .35s var(--ease-spring), background-color .3s var(--ease), box-shadow .3s var(--ease);
  z-index:0;
}
/* Variante compacta — para el filtro de período en la topbar (mismo inset de 3px que el thumb,
   así positionSegThumb() no necesita distinguir tamaños). */
.segmented.compact button{ padding:5px 12px; font-size:var(--fs-xs); }
.segmented-row{ display:flex; align-items:center; justify-content:center; margin:var(--sp-8) 0; }
.segmented-row.left{ justify-content:flex-start; margin:0 0 var(--sp-6); }

/* ---------- Category header ---------- */
.cat-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-6); margin-bottom:var(--sp-6); flex-wrap:wrap; }
.cat-header h1{ font-size:var(--fs-3xl); font-weight:600; letter-spacing:-.02em; }
.cat-header p{ color:var(--text-secondary); font-size:var(--fs-md); margin-top:var(--sp-1); }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--blue); font-size:var(--fs-base); font-weight:500; cursor:pointer; margin-bottom:var(--sp-4); }
.back-link svg{ width:12px; height:12px; }

/* ---------- Cards ---------- */
.card{
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:var(--sp-7); box-shadow:var(--shadow-sm);
}
.card + .card{ margin-top:var(--sp-6); }
/* Mismo efecto que las 3 tarjetas de categoría (elevación + sombra + botón que se resalta) — solo
   en las tarjetas de portada (Personal/Turnos/Otro Personal), no en las tarjetas del resto del
   panel (Rendimiento, listas...) donde no llevan a ningún sitio y el movimiento no tendría sentido. */
.home-hover-card{ transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease-spring), border-color .3s var(--ease); }
.home-hover-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--border); }
.home-hover-card:hover .btn-secondary{ background:var(--blue); color:#fff; }
.card-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); }
.card-title-row h3{ font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; }
.card-title-row .muted{ color:var(--text-tertiary); font-size:var(--fs-sm); }
/* Icono temático de tarjeta (Personal/Turnos/Otro Personal) — EN LÍNEA junto al nombre, no como
   bloque encima: estas son tarjetas de datos compactas, un glyph grande arriba (como en las 3
   tarjetas de categoría) las hacía desproporcionadas y metía aire de más arriba/abajo. */
.card-title-group{ display:flex; align-items:center; gap:var(--sp-3); }
.card-icon{
  width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); flex-shrink:0;
}
.card-icon svg{ width:16px; height:16px; }

/* Shift schedule row */
.schedule-row{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.schedule-time{ display:flex; align-items:baseline; gap:var(--sp-3); }
.schedule-time .t{ font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.schedule-time .arrow{ color:var(--text-tertiary); font-size:var(--fs-lg); }
.schedule-meta{ color:var(--text-secondary); font-size:var(--fs-sm); }

/* ---------- KPI tiles ---------- */
.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.kpi-row.cols-2{ grid-template-columns:repeat(2,1fr); }
.kpi-row.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } }

.admin-cards-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); margin-top:var(--sp-8); align-items:stretch; }
/* .card + .card mete margin-top pensado para tarjetas apiladas verticalmente; aquí "Turnos" es
   hermana adyacente de "Personal" en el MISMO grid, así que ese margen la empujaba hacia abajo
   y encogía su alto estirado — deben ser gemelas exactas. */
.admin-cards-row .card{ margin-top:0; }
@media (max-width:640px){ .admin-cards-row{ grid-template-columns:1fr; } }
.kpi-tile{ position:relative; background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:var(--sp-5); text-align:center; }
/* Reserva siempre 2 líneas: si en una tarjeta estrecha una etiqueta larga envuelve y su
   hermana no, el número de abajo debe seguir arrancando en la misma línea en ambas. */
.kpi-tile .label{ font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; font-weight:600; line-height:1.35; min-height:2.7em; }
.kpi-tile .value{ font-size:var(--fs-2xl); font-weight:600; letter-spacing:-.01em; margin-top:var(--sp-2); font-variant-numeric:tabular-nums; }
.kpi-tile .value.pos{ color:var(--green); }
.kpi-tile .value.neg{ color:var(--red); }
.margin-badge{
  position:absolute; top:var(--sp-3); right:var(--sp-3); font-size:var(--fs-2xs); font-weight:700;
  padding:2px 8px; border-radius:99px; font-variant-numeric:tabular-nums;
}
.margin-badge.pos{ background:rgba(10,138,60,.12); color:var(--green); }
.margin-badge.neg{ background:rgba(215,0,21,.12); color:var(--red); }
.kpi-tile .value small{ font-size:var(--fs-sm); color:var(--text-tertiary); font-weight:500; }
.kpi-tile .delta{ font-size:var(--fs-xs); margin-top:var(--sp-1); font-weight:600; }
.kpi-tile .delta.up{ color:var(--green); }
.kpi-tile .delta.down{ color:var(--red); }
.kpi-tile .delta.flat{ color:var(--text-tertiary); }

.working-days-note{ color:var(--red); font-size:var(--fs-xs); font-weight:500; text-align:center; margin-top:var(--sp-4); }

/* ---------- Buttons ---------- */
.btn{
  border:none; border-radius:var(--radius-pill); padding:9px 20px; font-size:var(--fs-base); font-weight:500;
  cursor:pointer; transition:transform .15s var(--ease), background .2s var(--ease), opacity .2s var(--ease), box-shadow .2s var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--blue); color:#fff; }
.btn-primary:hover{ background:var(--blue-hover); }
.btn-secondary{ background:rgba(0,0,0,.06); color:var(--text); }
:root[data-theme="dark"] .btn-secondary{ background:rgba(255,255,255,.1); }
.btn-secondary:hover{ background:rgba(0,0,0,.1); }
:root[data-theme="dark"] .btn-secondary:hover{ background:rgba(255,255,255,.16); }
.btn-ghost{ background:transparent; color:var(--blue); padding:9px 14px; }
.btn-ghost:hover{ text-decoration:underline; }
.btn-danger{ background:transparent; color:var(--red); padding:9px 14px; }
.btn-danger:hover{ text-decoration:underline; }
.btn-sm{ padding:6px 14px; font-size:var(--fs-sm); }
.btn-icon{ width:34px; height:34px; padding:0; justify-content:center; }
.btn svg{ width:14px; height:14px; }
.btn:disabled{ opacity:.4; cursor:default; }

/* ---------- Tables / lists ---------- */
.list{ display:flex; flex-direction:column; }
.list-row{
  display:flex; align-items:center; justify-content:space-between; padding:var(--sp-4) 0;
  border-bottom:1px solid var(--border-soft); gap:var(--sp-4);
}
.list-row:last-child{ border-bottom:none; }
.person{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.avatar{
  width:36px; height:36px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:var(--fs-sm); flex-shrink:0;
}
.person-name{ font-weight:500; font-size:var(--fs-base); }
.person-sub{ color:var(--text-tertiary); font-size:var(--fs-xs); }
.pay-cols{ display:flex; gap:var(--sp-8); text-align:right; }
/* Ancho fijo: sin esto, "1.400€" y "980€" dan columnas de distinto ancho y el
   límite Neto/Bruto se desplaza de una fila a otra — deja de leerse como tabla. */
.pay-col{ min-width:72px; }
.pay-col .v{ font-weight:600; font-variant-numeric:tabular-nums; font-size:var(--fs-base); }
.pay-col .l{ color:var(--text-tertiary); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em; }
.row-actions{ display:flex; gap:var(--sp-1); flex-shrink:0; }

.empty-state{ text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--text-tertiary); }
.empty-state .glyph{ font-size:28px; margin-bottom:var(--sp-2); opacity:.5; }
.empty-state p{ font-size:var(--fs-sm); }

/* Otro Personal — tabla real con columnas fijas: la cabecera usa el MISMO grid-template-columns
   que las filas, así cada dato cae exactamente bajo su título, al milímetro, sea cual sea la
   longitud del departamento ("SAC" vs "Administrativo") o del nombre. */
.staff-table-scroll{ overflow-x:auto; }
.staff-table{ min-width:680px; }
.staff-row{
  display:grid; grid-template-columns:1.6fr 150px 120px 100px 100px 72px; align-items:center;
  gap:var(--sp-4); padding:var(--sp-4) 0; border-bottom:1px solid var(--border-soft);
}
.staff-row:last-child{ border-bottom:none; }
.staff-header{
  font-size:var(--fs-2xs); font-weight:700; color:var(--text-tertiary); text-transform:uppercase;
  letter-spacing:.04em; padding-bottom:var(--sp-3); border-bottom:2px solid var(--border);
}
.staff-col-name{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.staff-col-name .person-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-col-hours{ font-size:var(--fs-sm); color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.staff-col-pay{ text-align:right; }
.staff-col-pay .v{ font-weight:600; font-variant-numeric:tabular-nums; font-size:var(--fs-base); }
.staff-col-pay .l{ color:var(--text-tertiary); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em; }
.staff-col-actions{ display:flex; gap:var(--sp-1); justify-content:flex-end; }

/* Coste & Beneficios — cuadrante tipo hoja de cálculo: mismas 3 columnas (Concepto/Valor/Acciones)
   en cabecera, filas y el total, así todo cae exactamente alineado, al milímetro.
   max-width evita que "Concepto" (1fr) se estire sin límite y separe demasiado el concepto de
   su valor; la tarjeta entera (.cb-card) se reduce a ese mismo ancho y se centra en la página
   en vez de quedarse pegada a la izquierda con un hueco en blanco enorme a la derecha. */
.cb-card{ max-width:480px; margin-left:auto; margin-right:auto; }
.cb-row{
  display:grid; grid-template-columns:28px 1fr 125px 56px; align-items:center; gap:var(--sp-2);
  padding:var(--sp-4) 0; border-bottom:1px solid var(--border-soft);
}
.cb-row:last-child{ border-bottom:none; }
.cb-header{
  font-size:var(--fs-2xs); font-weight:700; color:var(--text-tertiary); text-transform:uppercase;
  letter-spacing:.04em; padding-bottom:var(--sp-3); border-bottom:2px solid var(--border);
}
.cb-concepto{ font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cb-valor{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.cb-valor.pos{ color:var(--green); }
.cb-valor.neg{ color:var(--red); }
.cb-actions{ display:flex; gap:var(--sp-1); justify-content:flex-end; }
.cb-reorder{ display:flex; flex-direction:column; gap:1px; }
.cb-reorder-btn{
  width:22px; height:15px; border:none; background:transparent; color:var(--text-tertiary);
  cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:4px;
  padding:0; transition:background .15s var(--ease), color .15s var(--ease);
}
.cb-reorder-btn:hover{ background:rgba(0,0,0,.06); color:var(--text); }
:root[data-theme="dark"] .cb-reorder-btn:hover{ background:rgba(255,255,255,.1); }
.cb-reorder-btn:disabled{ opacity:.2; pointer-events:none; }
.cb-reorder-btn svg{ width:12px; height:12px; }
.cb-add{
  width:100%; background:none; border:none; border-bottom:1px dashed var(--border); cursor:pointer;
  font-family:inherit; text-align:left; border-radius:0;
}
.cb-add-label{ color:var(--blue); font-weight:600; font-size:var(--fs-base); }
.cb-add:hover .cb-add-label{ text-decoration:underline; }
.cb-total{ border-bottom:none; border-top:2px solid var(--border); padding-top:var(--sp-4); }
.cb-total > div:first-child{ font-weight:700; font-size:var(--fs-lg); }
.cb-total .cb-valor{ font-size:var(--fs-lg); }

/* ---------- Forms ---------- */
.field{ margin-bottom:var(--sp-5); }
.field label{ display:block; font-size:var(--fs-sm); font-weight:500; color:var(--text-secondary); margin-bottom:var(--sp-2); }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--bg-soft); color:var(--text); font-size:var(--fs-base); font-family:inherit;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-soft);
}
.field-row{ display:flex; gap:var(--sp-4); }
.field-row .field{ flex:1; }
.field-hint{ font-size:var(--fs-xs); color:var(--text-tertiary); margin:calc(-1 * var(--sp-4)) 0 var(--sp-5); }

/* ---------- Modal / sheet ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:100; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease); padding:var(--sp-4);
}
.overlay.open{ opacity:1; pointer-events:auto; }
.sheet{
  background:var(--bg-elevated); border-radius:var(--radius-lg); width:min(420px,100%); max-height:88vh; overflow:auto;
  box-shadow:var(--shadow-lg); padding:var(--sp-7); transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .38s var(--ease-spring), opacity .3s var(--ease);
}
.overlay.open .sheet{ transform:translateY(0) scale(1); opacity:1; }
.sheet-title{ font-size:var(--fs-xl); font-weight:600; letter-spacing:-.01em; margin-bottom:var(--sp-1); }
.sheet-sub{ color:var(--text-secondary); font-size:var(--fs-sm); margin-bottom:var(--sp-6); }
.sheet-actions{ display:flex; justify-content:flex-end; gap:var(--sp-3); margin-top:var(--sp-7); }
.sheet-actions.between{ justify-content:space-between; }

/* ---------- Time wheel picker ---------- */
.wheel-row{ margin:var(--sp-2) 0 var(--sp-4); }
.wheel-labels{ display:flex; gap:var(--sp-4); margin-bottom:var(--sp-2); }
.wheel-label{ flex:1; text-align:center; font-size:var(--fs-xs); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.wheel-viewports{ display:flex; gap:var(--sp-4); position:relative; }
.wheel-col{ flex:1; }
.wheel-highlight{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); height:40px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border); pointer-events:none; z-index:2;
}
.wheel{
  height:200px; overflow-y:scroll; scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
}
.wheel::-webkit-scrollbar{ display:none; }
.wheel .pad{ height:80px; }
.wheel-item{
  height:40px; display:flex; align-items:center; justify-content:center; scroll-snap-align:center;
  font-size:var(--fs-lg); color:var(--text-tertiary); font-variant-numeric:tabular-nums; cursor:pointer;
  transition:color .2s, font-weight .2s; user-select:none;
}
.wheel-item.active{ color:var(--text); font-weight:600; font-size:var(--fs-xl); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); z-index:200;
  background:var(--text); color:var(--bg); padding:12px 22px; border-radius:var(--radius-pill);
  font-size:var(--fs-sm); font-weight:500; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease-spring), opacity .3s var(--ease);
}
:root[data-theme="dark"] .toast{ background:#f5f5f7; color:#1d1d1f; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- misc ---------- */
.section-label{ font-size:var(--fs-xs); font-weight:700; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--sp-3); }
.chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:99px; font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; }
.chip.blue{ background:var(--blue-soft); color:var(--blue); }
.chip.green{ background:rgba(10,138,60,.12); color:var(--green); }
.chip.amber{ background:rgba(199,119,0,.12); color:var(--amber); }
.chip.t1{ background:var(--t1-soft); color:var(--t1); }
.chip.t2{ background:var(--t2-soft); color:var(--t2); }
.chip.t3{ background:var(--t3-soft); color:var(--t3); }

/* Punto de color por turno (T1 naranja / T2 azul / T3 verde) */
.turno-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:middle; transform:translateY(-1px); flex-shrink:0; }
.turno-dot.t1{ background:var(--t1); }
.turno-dot.t2{ background:var(--t2); }
.turno-dot.t3{ background:var(--t3); }
/* Texto en color de turno (horario grande) — usa las variables, NO un hex fijo en JS, así se
   aclara solo en modo oscuro igual que los puntos/chips (--t1/--t2/--t3 ya cambian por tema). */
.text-t1{ color:var(--t1); }
.text-t2{ color:var(--t2); }
.text-t3{ color:var(--t3); }
.avatar-t1{ background:var(--t1-soft); color:var(--t1); }
.avatar-t2{ background:var(--t2-soft); color:var(--t2); }
.avatar-t3{ background:var(--t3-soft); color:var(--t3); }
.editable-title{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.editable-title .icon-btn{ opacity:0; transition:opacity .2s; }
.editable-title:hover .icon-btn{ opacity:1; }

@media (max-width:640px){
  .view{ padding:var(--sp-6) var(--sp-4) var(--sp-12); }
  .hero h1{ font-size:34px; }
  .hero p{ font-size:var(--fs-md); }
  .kpi-row{ grid-template-columns:repeat(2,1fr); }
  .schedule-row{ gap:var(--sp-4); }
  .topbar{ height:auto; min-height:52px; flex-wrap:wrap; row-gap:var(--sp-2); padding:var(--sp-2) var(--sp-4); }
  .topbar-clock, .topbar-crumb{ display:none; }
  .segmented.compact button{ padding:5px 9px; font-size:10px; }
}