/* =====================================================================
   Dkoko Time Clock — design system (feature 008: official brand)
   Implements the official "Dkoko Color System" (claude.ai/design):
   Azul Mar (#4075DD) leads ACTIONS; the warm Arena→Driftwood neutral ramp
   leads SURFACES and the strongest text; Verde Alga (teal) is the accent;
   Púrpura Bruma a soft highlight. Light + dark are driven by a single
   [data-theme] attribute. Existing component class names are preserved and
   re-tokenised, so every screen adopts the official brand without
   per-template rewrites.

   WCAG AA (non-negotiable): base Azul Mar is only ~4.37:1 on white, so button
   fills with small/regular labels and colored links use --color-primary-strong
   (primary-600 #2F5BB8) or darker; --color-text-muted is decorative only.
   ===================================================================== */

/* ---- Self-hosted fonts (woff2, Latin subset) ---- */
@font-face { font-family:"Mulish"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../vendor/fonts/mulish-400.woff2") format("woff2"); }
@font-face { font-family:"Mulish"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../vendor/fonts/mulish-600.woff2") format("woff2"); }
@font-face { font-family:"Mulish"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../vendor/fonts/mulish-700.woff2") format("woff2"); }
@font-face { font-family:"Mulish"; font-style:normal; font-weight:800; font-display:swap;
  src:url("../vendor/fonts/mulish-800.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../vendor/fonts/fraunces-600.woff2") format("woff2"); }
@font-face { font-family:"Fraunces"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../vendor/fonts/fraunces-700.woff2") format("woff2"); }

/* =====================================================================
   1 — Design tokens (Dkoko Color System: tokens/colors|typography|spacing)
   ===================================================================== */
:root {
  /* Brand anchors */
  --dk-azul-mar:#4075DD; --dk-verde-alga:#175C6A; --dk-purpura-bruma:#E6DDF5;
  --dk-arena:#F0ECE5; --dk-driftwood:#5A4438;

  /* Primary ramp — Azul Mar */
  --dk-primary-50:#EEF3FC; --dk-primary-100:#D6E2F8; --dk-primary-200:#AEC5F0;
  --dk-primary-300:#85A8E8; --dk-primary-400:#5D8CE0; --dk-primary-500:#4075DD;
  --dk-primary-600:#2F5BB8; --dk-primary-700:#25478F; --dk-primary-800:#1B3469;
  --dk-primary-900:#122244;
  /* Teal ramp — Verde Alga */
  --dk-teal-50:#E9F1F3; --dk-teal-100:#C9DEE2; --dk-teal-200:#94BEC6;
  --dk-teal-300:#5E9DA9; --dk-teal-400:#2E7A89; --dk-teal-500:#175C6A;
  --dk-teal-600:#134B57; --dk-teal-700:#0E3A43; --dk-teal-800:#0A2A30; --dk-teal-900:#06191D;
  /* Lilac ramp — Púrpura Bruma */
  --dk-lilac-50:#F6F2FC; --dk-lilac-100:#E6DDF5; --dk-lilac-200:#D3C4ED;
  --dk-lilac-300:#BCA6E1; --dk-lilac-400:#A589D5; --dk-lilac-500:#8D6BC8;
  /* Neutral ramp — warm (Arena → Driftwood) */
  --dk-neutral-50:#F7F4EF; --dk-neutral-100:#F0ECE5; --dk-neutral-200:#E2DAD0;
  --dk-neutral-300:#CDC1B3; --dk-neutral-400:#A99A8B; --dk-neutral-500:#8A7868;
  --dk-neutral-600:#6E5A4C; --dk-neutral-700:#5A4438; --dk-neutral-800:#42332A;
  --dk-neutral-900:#2A211B; --dk-neutral-950:#1A1411;
  /* Semantic bases (desaturated, warmth-shifted to sit beside the brand) */
  --dk-success:#2E8B6A; --dk-success-soft:#E2F0EA; --dk-success-strong:#1E5F48;
  --dk-warning:#C8862F; --dk-warning-soft:#F7ECD9; --dk-warning-strong:#8A5A18;
  --dk-error:#C5483D;   --dk-error-soft:#F7E0DD;   --dk-error-strong:#8C2E26;
  --dk-info:#3D6FA8;    --dk-info-soft:#E1EAF4;    --dk-info-strong:#27496F;

  /* ---- Semantic aliases (light theme). Build against THESE so dark flips. ---- */
  --color-bg:var(--dk-arena); --color-surface:#FCFAF6; --color-surface-sunken:var(--dk-arena);
  --color-elevated:#FFFFFF; --color-border:#E2DAD0; --color-border-soft:#EFE9E1;
  --color-text:#2A211B; --color-text-secondary:#6E5A4C; --color-text-muted:#A99A8B;
  --color-on-primary:#FFFFFF; --color-on-accent:#FFFFFF;
  --color-primary:var(--dk-primary-500); --color-primary-strong:var(--dk-primary-600);
  --color-primary-hover:var(--dk-primary-700); --color-primary-soft:var(--dk-primary-50);
  --color-link:var(--dk-primary-600);
  --color-accent:var(--dk-teal-500); --color-accent-soft:var(--dk-teal-50);
  --color-highlight:var(--dk-lilac-100); --color-highlight-strong:var(--dk-lilac-500);
  --color-success:var(--dk-success); --color-success-soft:var(--dk-success-soft); --color-success-strong:var(--dk-success-strong);
  --color-warning:var(--dk-warning); --color-warning-soft:var(--dk-warning-soft); --color-warning-strong:var(--dk-warning-strong);
  --color-error:var(--dk-error);     --color-error-soft:var(--dk-error-soft);     --color-error-strong:var(--dk-error-strong);
  --color-info:var(--dk-info);       --color-info-soft:var(--dk-info-soft);       --color-info-strong:var(--dk-info-strong);

  /* Type */
  --font-body:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head:"Fraunces", Georgia, "Times New Roman", serif;
  --font-display:var(--font-head);
  --tracking-head:.03em;

  /* Shape / touch / motion */
  --radius-sm:8px; --radius-md:11px; --radius:14px; --radius-lg:18px; --radius-pill:999px;
  --tap-min:44px;
  --motion-fast:120ms; --motion:180ms; --motion-slow:280ms; --ease:cubic-bezier(.2,.6,.2,1);

  /* Warm shadows (ink-tinted, never neutral grey) */
  --shadow-1:0 1px 2px rgba(20,17,12,.06);
  --shadow-2:0 1px 2px rgba(20,17,12,.05), 0 6px 18px rgba(20,17,12,.07);
  --shadow-3:0 8px 28px rgba(20,17,12,.12);
  --shadow-primary:0 6px 18px rgba(47,91,184,.22);

  /* Layout */
  --maxw:1040px; --container:1040px;

  /* ---- Legacy aliases: existing component CSS → official tokens ----
     Kept so the ~450 lines of component rules below adopt the official
     palette without renaming every selector. */
  --sand:var(--dk-arena); --sand-2:var(--color-surface-sunken); --ocean:var(--color-accent);
  --accent:var(--color-link); --driftwood:var(--color-primary-strong);
  --ink:var(--color-text); --gold:var(--color-link); --muted:var(--color-text-secondary);
  --line:var(--color-border); --bg:var(--color-bg);
  --c-bg:var(--color-bg); --c-surface:var(--color-surface); --c-surface-2:var(--color-surface-sunken);
  --c-text:var(--color-text); --c-accent:var(--color-link); --c-primary:var(--color-primary-strong);
  --c-on-dark:var(--color-on-accent); --c-line:var(--color-border); --c-line-soft:var(--color-border-soft);
  --c-ok:var(--color-success-strong); --c-danger:var(--color-error-strong);
}

/* ---- Dark theme: set <html data-theme="dark">. Surfaces → warm-charcoal,
   Azul Mar lightens to primary-400, status tints get dark soft/light strong. ---- */
:root[data-theme="dark"] {
  --color-bg:#1A1411; --color-surface:#231C17; --color-surface-sunken:#2D241D;
  --color-elevated:#2D241D; --color-border:#3A2E25; --color-border-soft:#322A22;
  --color-text:#F0ECE5; --color-text-secondary:#CDC1B3; --color-text-muted:#8A7868;
  --color-on-primary:#10182A; --color-on-accent:#06191D;
  --color-primary:var(--dk-primary-400); --color-primary-strong:var(--dk-primary-300);
  --color-primary-hover:var(--dk-primary-200); --color-primary-soft:#1B3469; --color-link:var(--dk-primary-300);
  --color-accent:var(--dk-teal-300); --color-accent-soft:#0E3A43;
  --color-highlight:#3A2F52; --color-highlight-strong:var(--dk-lilac-300);
  --color-success-soft:#16382B; --color-success-strong:#7FD3AE;
  --color-warning-soft:#3A2C12; --color-warning-strong:#E0B872;
  --color-error-soft:#3A1F1B;   --color-error-strong:#E89A91;
  --color-info-soft:#15263A;    --color-info-strong:#93B6DE;
  /* deepen the warm shadows on dark */
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 8px 22px rgba(0,0,0,.45);
  --shadow-3:0 12px 34px rgba(0,0,0,.55);
  --shadow-primary:0 6px 18px rgba(0,0,0,.5);
}

/* =====================================================================
   2 — Element defaults
   ===================================================================== */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100dvh; font-family:var(--font-body);
       background:var(--color-bg); color:var(--color-text); line-height:1.5;
       -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.wrap { width:100%; margin:0 auto; padding:0 0 3rem; position:relative; z-index:1; }

/* Headings in the brand serif; short section headers echo the storefront's
   uppercase treatment. Names/greetings stay normal-case for readability. */
h1, h2, h3, .colilla__title, .colilla__company strong {
  font-family:var(--font-head); font-weight:600; }
h2 { text-transform:uppercase; letter-spacing:var(--tracking-head); }

a { color:var(--color-link); }
a:hover { text-underline-offset:2px; }

/* ---- Accessibility: skip link, focus ring, reduced motion ---- */
.skip-link { position:absolute; left:-9999px; top:0; z-index:100;
             background:var(--dk-teal-600); color:#fff; padding:.7rem 1rem;
             border-radius:0 0 12px 0; font-weight:700; text-decoration:none; }
.skip-link:focus { left:0; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline:3px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
  outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.001ms !important;
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    scroll-behavior:auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
}

/* Smooth cross-page transitions on normal navigation (US2) — Chrome/Edge/Android.
   Pure CSS, no JS; degrades to an instant cut elsewhere and under reduced-motion. */
@view-transition { navigation: auto; }

/* ---- Toast / aria-live region (htmx + JS feedback) ---- */
.toast-region { position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  z-index:60; display:grid; gap:.5rem; width:min(92vw,420px); pointer-events:none; }
.toast { pointer-events:auto; display:flex; gap:.5rem; align-items:center;
  padding:.8rem 1rem; border-radius:12px; font-weight:600; box-shadow:var(--shadow-2);
  background:var(--color-surface); border:1px solid var(--color-border); animation:toast-in var(--motion) var(--ease); }
.toast--ok { background:var(--color-success-soft); color:var(--color-success-strong); border-color:var(--color-success); }
.toast--error { background:var(--color-error-soft); color:var(--color-error-strong); border-color:var(--color-error); }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* ---- Skeleton shimmer (perceived speed) ---- */
.sk { position:relative; overflow:hidden; background:var(--color-surface-sunken);
  border-radius:8px; }
.sk::after { content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-surface) 70%, transparent), transparent);
  transform:translateX(-100%); animation:sk 1.2s infinite; }
.sk-line { height:.85rem; margin:.4rem 0; }
.sk-card { height:64px; margin:.6rem 0; border-radius:var(--radius); }
@keyframes sk { 100% { transform:translateX(100%); } }
/* htmx loading indicator: fade region while a request is in flight */
.htmx-indicator { opacity:0; transition:opacity var(--motion) var(--ease); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; }
[aria-busy="true"] { cursor:progress; }

/* Full-width brand hero (teal): theme-stable deep teal so the sand logo always
   reads. Azul Mar leads actions; teal carries this single brand surface. */
.brandbar { background:var(--dk-teal-600); color:#fff; text-align:center;
            padding:clamp(1.4rem,2.6vw,2rem) 1rem clamp(1rem,1.8vw,1.3rem);
            border-bottom-left-radius:clamp(16px,2vw,22px);
            border-bottom-right-radius:clamp(16px,2vw,22px); }
.brandbar img.logo { width:clamp(132px,18vw,172px); max-width:54%;
                     height:auto; display:block; margin:0 auto; }
.brandbar p { margin:.5rem 0 0; color:var(--dk-teal-100); letter-spacing:.14em;
              text-transform:uppercase; font-size:clamp(.66rem,1vw,.76rem); }

/* Centered content column that widens on larger screens */
.content { max-width:var(--maxw); margin:0 auto; padding:clamp(1.1rem,3vw,2rem); }
h2 { font-size:clamp(1rem,1.6vw,1.15rem); color:var(--color-accent);
     display:flex; gap:.5rem; align-items:center; }

/* Roster: 1 col on phones → auto-fills more columns as width allows */
ul.roster { list-style:none; padding:0; margin:1rem 0; display:grid; gap:.7rem;
            grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.card { display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem; background:var(--color-surface);
        border:1px solid var(--color-border); border-radius:var(--radius); text-decoration:none;
        color:var(--color-text); font-size:1.05rem; font-weight:600;
        box-shadow:var(--shadow-1); transition:transform .06s, box-shadow .15s; }
.card i { color:var(--color-primary-strong); font-size:1.25rem; width:1.4rem; text-align:center; }
@media (hover:hover) { .card:hover { box-shadow:var(--shadow-2); transform:translateY(-1px); } }
.card:active { transform:scale(.99); }
.empty { color:var(--color-text-secondary); padding:1rem; grid-column:1/-1; }
.owner { display:inline-flex; gap:.5rem; align-items:center; margin-top:1.4rem;
         color:var(--color-text-secondary); text-decoration:none; font-weight:600; }
code { background:var(--color-surface-sunken); padding:.1rem .3rem; border-radius:6px; }

/* --- PIN + clock components --- */
.content--narrow { max-width:430px; }
.backlink { display:inline-flex; gap:.4rem; align-items:center; color:var(--color-text-secondary);
            text-decoration:none; font-size:.9rem; margin-bottom:.4rem; }
.greet { font-family:var(--font-head); font-size:clamp(1.2rem,2.4vw,1.5rem); display:flex; gap:.5rem;
         align-items:center; margin:.2rem 0; }
.greet i { color:var(--color-primary-strong); }
.muted { color:var(--color-text-secondary); }
.small { font-size:.82rem; }
.msg { display:flex; gap:.5rem; align-items:center; padding:.7rem .9rem;
       border-radius:10px; font-weight:600; margin:.6rem 0; }
.msg--ok { background:var(--color-success-soft); color:var(--color-success-strong); }
.msg--error { background:var(--color-error-soft); color:var(--color-error-strong); }
.pinform { display:grid; gap:.9rem; margin-top:1rem; }
.pininput { font-size:2rem; text-align:center; letter-spacing:.6em; padding:.7rem .7rem;
            border:2px solid var(--color-border); border-radius:var(--radius); background:var(--color-surface);
            color:var(--color-text); width:100%; }
.pininput:focus { outline:none; border-color:var(--color-accent); }
.btn { display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
       border:none; border-radius:var(--radius); padding:.85rem 1.1rem; font-size:1.05rem;
       font-weight:700; cursor:pointer; text-decoration:none; min-height:var(--tap-min);
       transition:transform .06s, box-shadow .15s, background .15s; }
.btn:active { transform:scale(.98); }
.btn-primary { background:var(--color-primary-strong); color:var(--color-on-primary); box-shadow:var(--shadow-primary); }
@media (hover:hover){ .btn-primary:hover { background:var(--color-primary-hover); box-shadow:var(--shadow-2); } }
.btn-secondary { background:transparent; color:var(--color-accent); border:2px solid var(--color-accent); }
@media (hover:hover){ .btn-secondary:hover { background:var(--color-accent); color:var(--color-on-accent); } }
.btn-tertiary { background:var(--color-surface-sunken); color:var(--color-text); }
.btn-danger { background:var(--color-error); color:#fff; }
.btn-big { width:100%; padding:1.1rem; font-size:1.2rem; margin-top:1rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; }
.btn.is-loading { opacity:.7; pointer-events:none; }
.btn.is-loading::after { content:""; width:1em; height:1em; margin-left:.1em; border:2px solid currentColor;
  border-right-color:transparent; border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }
/* tiny inline spinner for loading buttons/regions */
.spin { width:1em; height:1em; border:2px solid currentColor; border-right-color:transparent;
        border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.statuscard { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
              padding:1.3rem; text-align:center; box-shadow:var(--shadow-1); }
.statuscard.is-in { border-color:var(--color-success); background:var(--color-success-soft); }
.statuscard__state { font-size:1.3rem; font-weight:800; margin:.1rem 0 .2rem; display:flex;
                     gap:.5rem; align-items:center; justify-content:center; }
.statuscard.is-in .statuscard__state { color:var(--color-success-strong); }
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
         gap:.7rem; margin:1.2rem 0 .4rem; }
.stat { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
        padding:.9rem; text-align:center; }
.stat__label { display:block; color:var(--color-text-secondary); font-size:.72rem;
               text-transform:uppercase; letter-spacing:.08em; }
.stat__val { display:block; font-size:1.25rem; font-weight:800; margin-top:.2rem; font-variant-numeric:tabular-nums; }
.stat--money .stat__val { color:var(--color-success-strong); }
.punchlist { list-style:none; padding:0; margin:.6rem 0 1.4rem; display:grid; gap:.4rem; }
.punchlist li { display:flex; justify-content:space-between; gap:.5rem; background:var(--color-surface);
                border:1px solid var(--color-border); border-radius:10px; padding:.6rem .8rem;
                font-size:.95rem; }
.punchlist i.in { color:var(--color-success-strong); }
.punchlist i.out { color:var(--color-error-strong); }
/* Decorative brand art in the side gutters — wide screens only. */
.side-decor { display:none; }
@media (min-width:1200px) {
  .side-decor { display:block; position:fixed; bottom:0; z-index:0;
                width:clamp(200px,15vw,300px); height:auto; opacity:.9;
                pointer-events:none; user-select:none; }
  .side-decor--left { left:0; transform:scaleX(-1); }
  .side-decor--right { right:0; }
}
.forgot { display:inline-flex; gap:.4rem; align-items:center; margin-top:1.1rem;
          color:var(--color-text-secondary); text-decoration:none; font-size:.9rem; }
.pinlabel { font-size:.75rem; color:var(--color-text-secondary); text-transform:uppercase;
            letter-spacing:.06em; margin:.3rem 0 -.4rem; }
.textinput { font-size:1.2rem; padding:.8rem 1rem; border:2px solid var(--color-border);
             border-radius:var(--radius); background:var(--color-surface); color:var(--color-text); width:100%; }
.textinput:focus { outline:none; border-color:var(--color-accent); }
.card--soon { color:var(--color-text-muted); cursor:default; justify-content:space-between; }
.card--nav { justify-content:space-between; }
.card--soon > span:first-child, .card--nav > span:first-child {
  display:inline-flex; gap:.7rem; align-items:center; }
.card--nav i.nav-arrow { color:var(--color-text-muted); font-size:1rem; }
.badge { background:var(--color-surface-sunken); color:var(--color-text-secondary); font-size:.62rem; text-transform:uppercase;
         letter-spacing:.06em; padding:.18rem .5rem; border-radius:999px; font-weight:800; }

/* --- Resumen --- */
.periodnav { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
             margin:.4rem 0 1rem; }
.periodnav__btn { display:inline-flex; align-items:center; justify-content:center;
                  width:44px; height:44px; border-radius:12px; background:var(--color-surface);
                  border:1px solid var(--color-border); color:var(--color-accent); text-decoration:none; }
.periodnav__btn.is-disabled { opacity:.3; }
.periodnav__label { text-align:center; display:flex; flex-direction:column; }
.periodnav__range { font-weight:800; font-size:1.05rem; font-variant-numeric:tabular-nums; }
.nowcard { display:flex; align-items:center; gap:.6rem; padding:.9rem 1.1rem;
           border-radius:var(--radius); background:var(--color-surface); border:1px solid var(--color-border);
           color:var(--color-text-secondary); margin-bottom:1rem; }
.nowcard.is-active { background:var(--color-success-soft); border-color:var(--color-success); color:var(--color-success-strong); }
.nowcard i { color:inherit; }
.nowcard strong { font-size:1.1rem; }
.emplist { list-style:none; padding:0; margin:0; display:grid; gap:.7rem;
           grid-template-columns:repeat(auto-fill, minmax(min(100%,280px),1fr)); }
.empcard { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); padding:.9rem 1rem; }
.empcard.is-in { border-color:var(--color-success); }
.empcard__head { display:flex; align-items:center; gap:.5rem; margin-bottom:.7rem; }
.empcard__name { font-weight:700; }
.empcard__since { margin-left:auto; font-size:.8rem; color:var(--color-success-strong); font-weight:600; }
.empcard__basis { font-size:.76rem; color:var(--color-text-secondary); margin:-.35rem 0 .6rem; }
.empcard__basis i { color:var(--color-primary-strong); }
.status-dot { width:10px; height:10px; border-radius:50%; background:var(--color-border); flex:0 0 auto; }
.empcard.is-in .status-dot { background:var(--color-success); box-shadow:0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent); }
.empstats { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.empstats > div { display:flex; flex-direction:column; gap:.1rem; }
.empstats b { font-size:1.02rem; font-variant-numeric:tabular-nums; }
.totals { display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
          margin-top:1.2rem; padding:.9rem 1.1rem; border-radius:var(--radius);
          background:var(--dk-teal-600); color:#fff; font-weight:700; }
.totals i { color:#fff; }

/* --- Colillas --- */
.colilla-actions { display:flex; justify-content:space-between; align-items:center;
                   gap:.6rem; margin-bottom:.6rem; }
.colilla-btn { width:100%; margin-top:.7rem; }
.colilla { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
           padding:1.4rem; max-width:640px; margin:0 auto; }
.colilla__head { display:flex; align-items:center; justify-content:space-between; gap:1rem;
                 flex-wrap:wrap; border-bottom:1px solid var(--color-border); padding-bottom:1rem; }
.colilla__logo { width:150px; height:auto; }
.colilla__company { text-align:right; font-size:.82rem; color:var(--color-text-secondary); }
.colilla__company strong { display:block; color:var(--color-text); font-size:.95rem; }
.colilla__title { font-size:1.2rem; margin:1rem 0 .8rem; }
.colilla__meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
                 gap:.6rem; margin-bottom:1rem; }
.colilla__meta span { display:block; color:var(--color-text-secondary); font-size:.72rem;
                      text-transform:uppercase; letter-spacing:.05em; }
.colilla__meta b { font-size:.98rem; font-variant-numeric:tabular-nums; }
.colilla__table { width:100%; border-collapse:collapse; }
.colilla__table td { padding:.6rem .2rem; border-bottom:1px solid var(--color-border-soft); }
.colilla__table td:last-child { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.colilla__table tr.ded td:last-child { color:var(--color-error-strong); }
.colilla__table tr.net td { border-top:2px solid var(--color-accent); border-bottom:none;
                            font-size:1.15rem; font-weight:800; padding-top:.8rem; }
.colilla__table tr.net td:last-child { color:var(--color-success-strong); }
.colilla__note { color:var(--color-text-secondary); font-size:.85rem; margin-top:.8rem; }
/* Vacation balance block on the colilla (US4 of feature 004) */
.vac-balance { margin-top:1rem; padding:.9rem 1rem; border:1px solid var(--color-border);
               border-radius:12px; background:var(--color-accent-soft); }
.vac-balance__title { display:flex; gap:.5rem; align-items:center; font-weight:800; color:var(--color-accent); }
.vac-balance__title i { color:var(--color-accent); }
.vac-balance__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin:.6rem 0 .2rem; }
.vac-balance__stats > div { display:flex; flex-direction:column; }
.vac-balance__stats span { color:var(--color-text-secondary); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.vac-balance__stats b { font-size:1.1rem; font-variant-numeric:tabular-nums; }
.vac-balance__note { color:var(--color-text-secondary); font-size:.8rem; margin:.2rem 0 0; }
.adjform { display:grid; gap:.6rem; max-width:640px; margin:1.4rem auto 0; }
.adjform h2 { font-size:1rem; }
.publishbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
              flex-wrap:wrap; margin:.2rem 0 1rem; padding:.7rem .9rem; border-radius:12px;
              background:var(--color-warning-soft); color:var(--color-warning-strong); border:1px solid var(--color-warning); font-weight:600; }
.publishbar.is-pub { background:var(--color-success-soft); color:var(--color-success-strong); border-color:var(--color-success); }
.publishbar .btn { padding:.55rem .9rem; }
.colilla-list { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.colilla-list a { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
                  padding:.9rem 1.1rem; background:var(--color-surface); border:1px solid var(--color-border);
                  border-radius:var(--radius); text-decoration:none; color:var(--color-text); font-weight:600; }
.colilla-list .net { color:var(--color-success-strong); font-variant-numeric:tabular-nums; }

/* --- Correcciones --- */
.punchedit { display:grid; gap:.9rem; background:var(--color-surface); border:1px solid var(--color-border);
             border-radius:var(--radius); padding:1rem; margin-bottom:1.4rem; }
.punchedit label, .punchedit-fields label { display:flex; flex-direction:column; gap:.45rem; }
.punchedit .pinlabel, .punchedit-fields .pinlabel { margin:0; }
.punchedit-list { list-style:none; padding:0; margin:0; display:grid; gap:.7rem; }
.punchedit-row { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
                 padding:1rem; display:grid; gap:.6rem; }
.punchedit-fields { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); }
.punchedit-actions { display:flex; gap:.5rem; }
.punchedit-actions .btn { padding:.6rem .9rem; }
.punch-geo { display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:.6rem; font-size:.85rem; }
.punch-geo a { color:var(--color-accent); text-decoration:none; display:inline-flex; gap:.35rem; align-items:center; }
.punch-geo i.in { color:var(--color-success-strong); }
.punch-geo i.out { color:var(--color-error-strong); }
/* --- Ajustes (settings) --- */
.setcard { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg);
           padding:1.2rem; margin:0 auto 1.2rem; max-width:680px; }
.setcard > h2 { margin-top:0; }
.setcard .muted.small { margin:-.3rem 0 .4rem; }
.setform { display:grid; gap:.9rem; }
.field { display:flex; flex-direction:column; gap:.45rem; }
.field > span { font-size:.75rem; color:var(--color-text-secondary); text-transform:uppercase;
                letter-spacing:.06em; }
.field .hint { text-transform:none; letter-spacing:0; color:var(--color-text-secondary); font-size:.78rem; }
.field-row { display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); }
details.advanced { margin-top:.2rem; }
details.advanced > summary { cursor:pointer; font-size:.78rem; color:var(--color-text-secondary);
                             text-transform:uppercase; letter-spacing:.06em; width:max-content; }
details.advanced[open] > summary { margin-bottom:.6rem; }
select.textinput { padding-right:2.2rem; background:var(--color-surface); appearance:auto; }
.checkrow { display:flex; align-items:center; gap:.6rem; padding:.3rem 0; }
.checkrow input { width:1.25rem; height:1.25rem; flex:0 0 auto; }
.brackets { width:100%; border-collapse:collapse; font-size:.95rem; }
.brackets th, .brackets td { padding:.5rem .3rem; border-bottom:1px solid var(--color-border-soft); text-align:left; }
.brackets th:last-child, .brackets td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.setcard > .btn { margin-bottom:1rem; }
.setlist { list-style:none; padding:0; margin:0; display:grid; gap:.7rem;
           grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr)); }
.setlist .empcard { display:flex; flex-direction:column; gap:.5rem; text-decoration:none; color:var(--color-text); }
.setlist .empcard__name { font-weight:700; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.tag { font-size:.62rem; text-transform:uppercase; letter-spacing:.05em;
       padding:.16rem .5rem; border-radius:999px; font-weight:800; }
.tag--off { background:var(--color-error-soft); color:var(--color-error-strong); }
.tag--owner { background:var(--color-highlight); color:var(--color-highlight-strong); }
.tag--pin { background:var(--color-warning-soft); color:var(--color-warning-strong); }

/* --- Horario (schedule) --- */
.daygroup { margin:0 0 1.1rem; }
.dayhead { display:flex; align-items:baseline; gap:.5rem; margin:.2rem 0 .5rem;
           font-weight:800; text-transform:capitalize; }
.dayhead .dow { color:var(--color-accent); }
.dayhead.is-today .dow { color:var(--color-success-strong); }
.dayhead .dnum { color:var(--color-text-secondary); font-weight:600; font-size:.85rem; }
.shiftlist { list-style:none; padding:0; margin:0; display:grid; gap:.5rem;
             grid-template-columns:repeat(auto-fill, minmax(min(100%,300px),1fr)); }
.shiftcard { background:var(--color-surface); border:1px solid var(--color-border); border-left:4px solid var(--color-primary-strong);
             border-radius:12px; padding:.7rem .85rem; }
.shiftcard.mine { border-left-color:var(--color-success); background:var(--color-success-soft); }
.shiftcard.is-draft { border-left-color:var(--color-border); opacity:.85; }
.shiftcard__top { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.shiftcard__time { font-weight:800; font-variant-numeric:tabular-nums; }
.shiftcard__store { font-size:.66rem; text-transform:uppercase; letter-spacing:.05em;
                    background:var(--color-surface-sunken); color:var(--color-text-secondary); padding:.16rem .5rem; border-radius:999px; font-weight:800; }
.shiftcard__who { color:var(--color-text); font-weight:600; }
.shiftcard__note { color:var(--color-text-secondary); font-size:.82rem; margin:.3rem 0 0; }
.shiftcard__actions { display:flex; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.shiftcard__actions .btn { padding:.45rem .75rem; font-size:.9rem; }
.draft-tag { font-size:.6rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800;
             color:var(--color-warning-strong); background:var(--color-warning-soft); padding:.14rem .45rem; border-radius:999px; }
.shift-form { display:grid; gap:.6rem; margin-top:.5rem; }
.pubbar { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
          flex-wrap:wrap; margin:.2rem 0 1rem; }
details.addshift { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
                   padding:.4rem .9rem; margin-bottom:1.1rem; }
details.addshift > summary { cursor:pointer; font-weight:700; padding:.5rem 0;
                             display:flex; align-items:center; gap:.5rem; }
details.addshift > summary i { color:var(--color-primary-strong); }
.day-empty { color:var(--color-text-secondary); font-size:.88rem; padding:.2rem 0 .4rem; }

/* --- Onboarding tour "?" help button --- */
.tour-help { position:fixed; right:14px; bottom:14px; z-index:40; width:46px; height:46px;
             border-radius:50%; border:none; background:var(--dk-teal-600); color:#fff;
             font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow-2);
             display:flex; align-items:center; justify-content:center; }
.tour-help:active { transform:scale(.95); }
.driver-popover { font-family:inherit; }

/* ---- Theme toggle (light / dark / auto), stacked above the tour "?" ---- */
.theme-toggle { position:fixed; right:14px; bottom:68px; z-index:40; width:46px; height:46px;
  border-radius:50%; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-accent);
  font-size:1.1rem; cursor:pointer; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center; }
.theme-toggle:active { transform:scale(.95); }

@media print {
  .noprint, .tour-help, .theme-toggle, .toast-region, .skip-link { display:none !important; }
  /* Colillas always print light, even when the screen is in dark mode. */
  :root, :root[data-theme="dark"] {
    --color-bg:#fff; --color-surface:#fff; --color-surface-sunken:#EFE9E1;
    --color-elevated:#fff; --color-border:#E2DAD0; --color-border-soft:#EFE9E1;
    --color-text:#2A211B; --color-text-secondary:#5A4438; --color-text-muted:#8A7868;
    --color-accent:#175C6A; --color-primary-strong:#2F5BB8; --color-link:#2F5BB8;
    --color-success-strong:#1E5F48; --color-error-strong:#8C2E26; }
  body { background:#fff; color:#2A211B; }
  .wrap { max-width:none; }
  .content { padding:0; }
  .colilla { border:none; border-radius:0; padding:0; max-width:none; }
  .side-decor { display:none !important; }
}

/* =====================================================================
   Calendar views + phone subscription (feature 006)
   Month = 7-col grid; week = compact day-stack of chips; list = existing.
   ===================================================================== */

/* View toggle (segmented control) */
.calbar { display:flex; gap:.5rem; align-items:center; justify-content:center;
  flex-wrap:wrap; margin:.2rem 0 1rem; }
.calseg { display:inline-flex; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:999px; padding:.22rem; gap:.18rem; box-shadow:var(--shadow-1); }
.calseg a { padding:.45rem .95rem; border-radius:999px; text-decoration:none;
  color:var(--color-text-secondary); font-weight:700; font-size:.92rem; display:inline-flex;
  align-items:center; gap:.35rem; min-height:38px; }
.calseg a.is-active { background:var(--color-primary-strong); color:var(--color-on-primary); }

/* Owner control bar: store filter + add + publish */
.schedctl { display:flex; flex-wrap:wrap; gap:.6rem; align-items:flex-end;
  justify-content:center; margin:0 0 .9rem; }
.schedctl .field { margin:0; }
.schedctl__filter { min-width:11rem; }
.schedctl form { margin:0; }

/* Period nav reuses .periodnav (already styled). Month name label: */
.calperiod { text-transform:capitalize; }

/* Month grid */
.calhead, .calgrid { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; }
.calhead { margin-bottom:3px; }
.calhead span { text-align:center; font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-secondary); padding:.3rem 0; }
.calcell { background:var(--color-surface); border:1px solid var(--color-border); border-radius:9px;
  min-height:88px; padding:3px 3px 4px; display:flex; flex-direction:column; gap:2px;
  overflow:hidden; }
.calcell--out { background:transparent; border-color:transparent; opacity:.42; }
.calcell--today { border-color:var(--color-primary-strong); box-shadow:inset 0 0 0 1px var(--color-primary-strong); }
.caldate { font-size:.74rem; font-weight:800; color:var(--color-text-secondary);
  display:flex; align-items:center; gap:2px; padding:0 2px; line-height:1.2; }
.caldate .calnum { margin-left:auto; }
.calcell--today .caldate { color:var(--color-primary-strong); }
.caladd { border:0; background:var(--color-surface-sunken); color:var(--color-accent); border-radius:6px;
  min-width:20px; height:20px; line-height:1; font-weight:800; font-size:.95rem;
  cursor:pointer; padding:0 4px; }
.caladd:hover { background:var(--color-accent); color:var(--color-on-accent); }
.calcell__chips { display:flex; flex-direction:column; gap:2px; }

/* Shift chip (shared by month + week) */
.calchip { display:block; width:100%; text-align:left; border:0; border-radius:6px;
  background:var(--color-surface-sunken); color:var(--color-text); padding:2px 5px; font:inherit;
  font-size:.7rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; }
button.calchip { cursor:pointer; }
button.calchip:hover { filter:brightness(.97); }
.calchip__t { font-weight:800; }
.calchip--mine { background:var(--color-success-soft); color:var(--color-success-strong); }
.calchip--open { background:var(--color-warning-soft); color:var(--color-warning-strong); }
.calchip--draft { outline:1px dashed var(--color-text-muted); }
.calmore { border:0; background:transparent; color:var(--color-primary-strong); font:inherit;
  font-size:.68rem; font-weight:800; cursor:pointer; padding:1px 4px; text-align:left;
  list-style:none; }
.calmorewrap > summary { list-style:none; }
.calmorewrap > summary::-webkit-details-marker { display:none; }
.calmorewrap .calwday__chips, .calmorewrap .calcell__chips { margin-top:2px; }
.calweek .caladd { margin-top:4px; }

/* Week view: day-stacked compact chips */
.calweek { display:flex; flex-direction:column; gap:.7rem; }
.calweek .calwday { display:grid; grid-template-columns:3.4rem 1fr; gap:.6rem;
  align-items:start; }
.calweek .calwday__d { text-align:center; }
.calweek .calwday__dow { font-size:.66rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--color-text-secondary); }
.calweek .calwday__n { font-family:var(--font-head); font-size:1.25rem; line-height:1; }
.calweek .calwday--today .calwday__n { color:var(--color-primary-strong); }
.calweek .calwday__chips { display:flex; flex-direction:column; gap:3px; min-width:0; }
.calweek .calchip { font-size:.82rem; padding:4px 8px; white-space:normal; }
.calweek .calwday__empty { color:var(--color-text-secondary); font-size:.82rem; padding:3px 0; }

@media (max-width:380px) {
  .calcell { min-height:64px; }
  .calchip { font-size:.6rem; padding:1px 3px; }
  .caldate { font-size:.66rem; }
  .calweek .calwday { grid-template-columns:2.7rem 1fr; }
}
@media (min-width:760px) {
  .calcell { min-height:122px; }
  .calchip { font-size:.8rem; }
}

/* Subscribe card (US3/US4) */
.subcard { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:1rem; margin:1.2rem 0; box-shadow:var(--shadow-1); }
.subcard__head { display:flex; align-items:center; gap:.5rem; margin:0 0 .5rem;
  font-family:var(--font-head); }
.subcard__grid { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.subcard__qr { width:200px; height:200px; flex:0 0 auto; background:#fff; border:1px solid var(--color-border);
  border-radius:10px; padding:8px; }
@media (max-width:380px) { .subcard__qr { width:170px; height:170px; } }
.subcard__qr svg { width:100%; height:100%; display:block; }
.subcard__body { flex:1 1 12rem; min-width:0; }
.subcard__copy { margin-top:.2rem; }
.subcard__copybtn { display:inline-flex; align-items:center; gap:.45rem; background:none; border:0;
  padding:0; font:inherit; font-weight:700; color:var(--color-link); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; }
.subcard__copybtn:hover { color:var(--color-accent); }
.subcard__actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem; }
.subcard__note { color:var(--color-text-secondary); font-size:.82rem; margin:.5rem 0 0; }

/* --- Detalle por día (feature 011) --- */
.daylist { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.7rem; }
.daycard { background:var(--color-surface); border:1px solid var(--color-border);
           border-radius:var(--radius); padding:.8rem 1rem; }
.daycard__head { display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.daycard__date { font-weight:700; }
.daycard__hours { font-variant-numeric:tabular-nums; font-weight:700; }
.punchlist { list-style:none; padding:0; margin:.5rem 0; display:grid; gap:.25rem; }
.punch { font-size:.84rem; color:var(--color-text-secondary); font-variant-numeric:tabular-nums; }
.punch i { color:var(--color-primary-strong); margin-right:.15rem; }
.punch__open { color:var(--color-success-strong); font-weight:700; }
.daybadge { display:inline-block; font-size:.72rem; font-weight:800; padding:.22rem .55rem;
            border-radius:var(--radius-pill); }
.daybadge--yes   { background:var(--color-success-soft); color:var(--color-success-strong); }
.daybadge--grace { background:var(--color-success-soft); color:var(--color-success-strong); }
.daybadge--manual{ background:var(--color-surface-sunken); color:var(--color-accent); }
.daybadge--no    { background:var(--color-surface-sunken); color:var(--color-text-secondary); }
.daycard__audit  { font-size:.74rem; color:var(--color-text-secondary); margin:.45rem 0 0; }
.daycounters { font-size:.74rem; color:var(--color-text-secondary); margin:.6rem 0 0; }
/* Resumen per-row pattern counters — plain text, never a badge (FR-026) */
.empcounters { font-size:.72rem; color:var(--color-text-secondary); margin:.5rem 0 0; }
.empcard__link { text-decoration:none; color:inherit; display:block; }

/* Day-detail override actions (feature 011) */
.dayactions { margin-top:.6rem; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.dayactions form { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; width:100%; }
.btn-sm { padding:.4rem .7rem; font-size:.8rem; }
.textinput-sm { padding:.4rem .6rem; font-size:.85rem; flex:1 1 8rem; min-width:0; }