/* GOOD JOE — estilo moderno minimalista */
:root {
    --bg: #fafaf7;
    --bg-alt: #f2efe9;
    --ink: #141414;
    --ink-soft: #555;
    --accent: #c8923a;        /* mostaza dorada del logo */
    --accent-dark: #8a5f1e;
    --line: #e6e2da;
    --radius: 4px;
    --maxw: 1160px;
    --serif: 'Fraunces', Georgia, serif;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Nav ---------- */
.nav {
    position: sticky;
    top: 0;
    background: rgba(250, 250, 247, 0.92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    z-index: 100;
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    max-width: var(--maxw);
    margin: 0 auto;
}
.brand {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.5px;
}
.brand small {
    font-family: var(--sans);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--ink-soft);
    text-transform: uppercase;
    margin-left: 6px;
}
.nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
    font-size: 14px;
}
.nav ul a {
    color: var(--ink-soft);
    transition: color 0.2s;
}
.nav ul a:hover { color: var(--ink); }

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
    padding: 120px 24px 100px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.hero h1 {
    font-family: var(--serif);
    font-size: clamp(48px, 9vw, 104px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: -2px;
}
.hero h1 em {
    font-style: italic;
    color: var(--accent);
}
.hero p {
    max-width: 540px;
    margin: 28px auto 0;
    color: var(--ink-soft);
    font-size: 18px;
}
.hero .cta {
    margin-top: 40px;
    display: inline-flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--bg);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: all 0.2s;
    cursor: pointer;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn.ghost {
    background: transparent;
    color: var(--ink);
}
.btn.ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- Sections ---------- */
section {
    padding: 96px 0;
    border-bottom: 1px solid var(--line);
}
.section-head {
    text-align: center;
    margin-bottom: 56px;
}
.eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}
.section-head h2 {
    font-family: var(--serif);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 500;
    letter-spacing: -1px;
}

/* ---------- Sobre ---------- */
.sobre-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.sobre-grid p { color: var(--ink-soft); font-size: 17px; margin-bottom: 16px; }
.sobre-photo {
    aspect-ratio: 4 / 5;
    background-color: var(--bg-alt);
    background-image: url('../img/goodjoe-front.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--radius);
}

/* ---------- Menú ---------- */
.menu-cat {
    margin-bottom: 56px;
}
.menu-cat h3 {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
}
.menu-item:last-child { border-bottom: none; }
.menu-item .name { font-weight: 500; }
.menu-item .desc {
    color: var(--ink-soft);
    font-size: 14px;
    margin-top: 2px;
}
.menu-item .price {
    font-variant-numeric: tabular-nums;
    color: var(--accent-dark);
    font-weight: 500;
    white-space: nowrap;
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
}

/* Menú multi-columna balanceado, respeta categorías */
.menu-cols {
    column-count: 3;
    column-gap: 56px;
}
.menu-cols .menu-cat {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

.menu-note {
    text-align: center;
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-dark);
}

/* Sucursales */
.locations {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.location {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    background: white;
    display: flex;
    flex-direction: column;
}
.location h3 {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 6px;
}
.location .addr {
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.location .hours {
    font-size: 14px;
    color: var(--accent-dark);
    margin-bottom: 20px;
}
.location .map {
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    background: var(--bg-alt);
}
.location .btn {
    align-self: flex-start;
}

/* ---------- Visitar ---------- */
.visit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}
.visit-info h4 {
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 500;
    margin: 24px 0 8px;
}
.visit-info h4:first-child { margin-top: 0; }
.visit-info ul { list-style: none; }
.visit-info li {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--ink-soft);
    border-bottom: 1px dashed var(--line);
}
.map {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
footer {
    padding: 48px 24px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-soft);
}
footer .socials {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 16px;
}
footer .socials a {
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    transition: all 0.2s;
}
footer .socials a:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .menu-cols { column-count: 2; column-gap: 40px; }
}

@media (max-width: 820px) {
    .sobre-grid, .menu-grid, .visit-grid, .locations { grid-template-columns: 1fr; gap: 32px; }
    .menu-cols { column-count: 1; }
    .hero { padding: 80px 24px 64px; }
    section { padding: 64px 0; }
    .nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg);
        padding: 16px 24px;
        border-bottom: 1px solid var(--line);
    }
    .nav ul.open { display: flex; }
    .nav-toggle { display: block; }
}

/* ---------- Admin ---------- */
.admin-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px;
}
.admin-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 32px;
}
table.admin {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}
table.admin th, table.admin td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
table.admin th { background: var(--bg-alt); font-weight: 600; }
table.admin td.actions { text-align: right; white-space: nowrap; }
table.admin a { color: var(--accent); margin-left: 10px; }

.emp-tipo {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.emp-tipo.tipo-fijo      { background: #d8f3dc; color: #1f5631; }
.emp-tipo.tipo-franquero { background: #fff1c1; color: #855300; }
.emp-tipo.tipo-comodin   { background: #f0e6ff; color: #5b3491; }

form.admin label {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 14px 0 4px;
}
form.admin input, form.admin textarea, form.admin select {
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 15px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: white;
}
form.admin textarea { min-height: 70px; resize: vertical; }
form.admin .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.admin button {
    margin-top: 20px;
}
.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}
.flash.ok { background: #e8f5e9; color: #2e7d32; }
.flash.err { background: #ffebee; color: #c62828; }

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
}
.login-box {
    background: white;
    padding: 40px;
    border-radius: var(--radius);
    width: 100%;
    max-width: 380px;
    border: 1px solid var(--line);
}
.login-box h1 {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 24px;
    text-align: center;
}

/* ---------- Turnos ---------- */
.turnos-wrap { max-width: 1280px; }

.turnos-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    background: var(--bg-alt);
    border-radius: var(--radius);
}
.turnos-week, .turnos-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.btn.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    letter-spacing: 0.5px;
}

table.turnos {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--line);
    table-layout: fixed;
}
table.turnos th, table.turnos td {
    border: 1px solid var(--line);
    padding: 6px 6px;
    vertical-align: middle;
    text-align: center;
    font-size: 13px;
}
table.turnos thead th {
    background: var(--ink);
    color: var(--bg);
    font-weight: 500;
    padding: 10px 4px;
}
table.turnos thead th .dow {
    display: block;
    font-family: var(--serif);
    font-size: 16px;
    letter-spacing: 0.5px;
}
table.turnos thead th .dnum {
    display: block;
    font-size: 11px;
    opacity: 0.75;
}
table.turnos th.col-shift, table.turnos th.col-puesto { width: 80px; }
table.turnos th.col-today { background: var(--accent); color: var(--ink); }
table.turnos th.col-sunday {
    background: #6b4f2a;
}

table.turnos td.col-shift {
    background: var(--bg-alt);
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 36px;
    padding: 8px 4px;
}
table.turnos td.col-puesto {
    background: var(--bg-alt);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    width: 80px;
}
table.turnos td.cell-sunday {
    box-shadow: inset 0 2px 0 0 #c8923a;
}
table.turnos td.cell-comodin {
    border-style: dashed !important;
    border-width: 2px !important;
}
table.turnos td.cell-conflict {
    box-shadow: inset 0 0 0 2px #c62828;
}
.cell-select {
    width: 100%;
    padding: 6px 4px;
    font-size: 13px;
    font-family: inherit;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(255,255,255,0.7);
    cursor: pointer;
    font-weight: 500;
    color: var(--ink);
}
.cell-select.has-emp {
    border-color: rgba(0,0,0,0.18);
    font-weight: 600;
}
.cell-note {
    width: 100%;
    margin-top: 4px;
    padding: 3px 5px;
    font-size: 11px;
    border: 1px dashed var(--line);
    border-radius: 3px;
    background: transparent;
    color: var(--ink-soft);
}
.cell-note:focus { background: white; color: var(--ink); }
.cell-warn {
    display: block;
    margin-top: 2px;
    color: #c62828;
    font-size: 11px;
    font-weight: 600;
    cursor: help;
}

.turnos-save {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg-alt);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.turnos-panel {
    margin-top: 40px;
    padding: 24px;
    background: white;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.turnos-panel h3 { font-size: 22px; margin-bottom: 16px; }
.turnos-panel h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-soft);
    margin-bottom: 10px;
    font-weight: 600;
}
.panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.emp-load {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
}
.emp-load li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 4px 0;
}
.emp-load .dot, .legend-item .dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--line);
    flex-shrink: 0;
}
.emp-load .emp-name { flex: 1; }
.emp-load .emp-count {
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    font-size: 13px;
}
.emp-load .emp-hours {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    min-width: 52px;
    text-align: right;
    padding: 1px 8px;
    background: var(--bg-alt);
    border-radius: 999px;
}
.emp-load .emp-count.over {
    color: #c62828;
    font-weight: 600;
}
.badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    cursor: help;
}
.badge.warn { background: #fff3cd; color: #8a5f1e; }
.badge.err  { background: #ffebee; color: #c62828; }

.print-legend {
    display: none;
    margin-top: 12px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12px;
}
.print-week-label { display: none; }
.week-hours-report { display: none; }
body.print-mode .week-hours-report { display: table; }
body.print-mode .week-hours-report {
    width: auto;
    margin: 6px 0 0;
    border-collapse: collapse;
    font-size: 11px;
}
body.print-mode .week-hours-report th,
body.print-mode .week-hours-report td {
    border: 1px solid var(--line);
    padding: 2px 8px;
    text-align: left;
}
body.print-mode .week-hours-report .whr-title {
    font-family: var(--serif);
    font-size: 13px;
    background: var(--bg-alt);
    text-align: left;
}
body.print-mode .week-hours-report .num { text-align: right; font-variant-numeric: tabular-nums; }
body.print-mode .week-hours-report .whr-total td { border-top: 2px solid var(--ink); background: var(--bg-alt); }
body.print-mode .week-hours-report .dot {
    display: inline-block;
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid var(--line);
    vertical-align: middle;
    margin-right: 5px;
}
.cell-outofmonth { background: #f4f4f4 !important; border: 1px solid #e0e0e0; }
.col-outofmonth { color: #b0b0b0; }

/* ---------- Reportes ---------- */
.reportes-tabs { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.reportes-tab {
    padding: 6px 14px;
    font-size: 13px;
    text-decoration: none;
    color: var(--ink);
    background: white;
    border-right: 1px solid var(--line);
}
.reportes-tab:last-child { border-right: none; }
.reportes-tab.is-active { background: var(--ink); color: var(--bg); }
table.admin.reportes th.num,
table.admin.reportes td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.admin.reportes .dot {
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid var(--line);
}
table.admin .reportes-total td { border-top: 2px solid var(--ink); background: var(--bg-alt); }

/* ---------- Liquidación por empleado ---------- */
.liq-title {
    font-family: var(--serif); font-weight: 500;
    display: flex; align-items: center; gap: 10px; margin: 8px 0 18px;
}
.liq-title .dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--line); display: inline-block;
}
.liq-title small { color: var(--ink-soft); font-family: var(--sans); font-size: 14px; }
.liq-grid { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(320px, 380px); gap: 24px; align-items: start; }
table.admin.liq-dias td, table.admin.liq-dias th { padding: 5px 10px; font-size: 13px; }
table.admin.liq-dias .num { text-align: right; font-variant-numeric: tabular-nums; }
table.admin.liq-dias .liq-nota { font-size: 12px; color: var(--ink-soft); }
table.admin.liq-dias tr.liq-libre td { background: #fff7c2; color: var(--ink-soft); }
table.admin.liq-dias tr.liq-dom td:first-child { font-weight: 600; }
table.admin.liq-tot { width: 100%; }
table.admin.liq-tot th { background: var(--ink); color: var(--bg); text-align: center; }
table.admin.liq-tot td { padding: 7px 10px; }
table.admin.liq-tot .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.admin.liq-tot tr.liq-big td { background: var(--bg-alt); font-weight: 700; font-size: 16px; border-top: 2px solid var(--ink); }
table.admin.liq-tot tr.liq-pagar td { background: #cfe3f5; font-weight: 700; }
table.admin.liq-tot tr.liq-colab td { background: #ffe6a8; font-weight: 700; font-size: 15px; }
.liq-nota-libre { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); }
.liq-form {
    margin-top: 20px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 6px; background: var(--bg-alt);
}
.liq-form h3 { margin: 0 0 12px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; }
.liq-form label { display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.liq-form input {
    display: block; width: 100%; margin-top: 4px; padding: 8px;
    border: 1px solid var(--line); border-radius: 4px; box-sizing: border-box;
}
.liq-form button { margin-top: 6px; }
.liq-form .row { display: flex; gap: 10px; }
.liq-form .row > div { flex: 1; }

/* Input de hora editable en la grilla diaria de liquidación */
.liq-time {
    width: 88px; padding: 2px 4px; font-size: 12px;
    border: 1px solid var(--line); border-radius: 3px;
    font-variant-numeric: tabular-nums; background: #fff;
    text-align: right;
}
.liq-time:focus { outline: 2px solid var(--accent, #5b9bd5); outline-offset: -2px; }

/* Tablita de adelantos del mes (fecha + monto por fila) */
table.admin.liq-adel { width: 100%; margin-bottom: 8px; }
table.admin.liq-adel th, table.admin.liq-adel td { padding: 4px 6px; font-size: 12px; }
table.admin.liq-adel input[type="date"],
table.admin.liq-adel input[type="text"] {
    width: 100%; padding: 4px 6px; font-size: 12px;
    border: 1px solid var(--line); border-radius: 3px; background: #fff;
}
table.admin.liq-adel input[type="text"] {
    text-align: right; font-variant-numeric: tabular-nums;
}
table.admin.liq-adel tr.liq-adel-nuevo input { background: #fafafa; }

/* "Vista impresa" del horario (texto plano sin input) */
.print-only { display: none; }

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

.print-only-header { display: none; }
body.print-mode .print-only-header { display: block; margin-bottom: 12px; font-family: var(--serif); font-size: 18px; }
.print-legend .legend-items {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}
.print-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 900px) {
    .panel-grid { grid-template-columns: 1fr; }
    .emp-load { grid-template-columns: 1fr; }
    table.turnos { font-size: 11px; }
    .cell-select { font-size: 11px; padding: 4px 2px; }
}

/* ---------- Turnos · vista mobile (día por día) ---------- */
.turnos-mobile { display: none; }

@media (max-width: 768px) {
    .turnos-wrap { padding: 0 12px; }

    /* Padding del wrap más chico para aprovechar pantalla */
    .admin-wrap { padding: 20px 14px; }

    /* Nav admin: vertical, links grandes y separados */
    .admin-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-bottom: 14px;
        margin-bottom: 20px;
    }
    .admin-nav > strong { font-size: 18px !important; }
    .admin-nav > div {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-start;
    }
    .admin-nav > div a {
        flex: 1 1 auto;
        min-width: 70px;
        padding: 12px 10px;
        background: var(--bg-alt);
        border: 1px solid var(--line);
        border-radius: 8px;
        font-size: 15px;
        text-align: center;
        text-decoration: none;
        color: var(--ink);
    }
    /* Link de la página actual (el que envuelve <strong>) — invertido */
    .admin-nav > div a:has(strong) {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
    }
    .admin-nav > div a strong {
        background: transparent;
        color: inherit;
        padding: 0;
        font-weight: 600;
    }
    /* Esconder los separadores "·" en mobile (text-nodes sueltos en el div) */
    .admin-nav > div { font-size: 0; }
    .admin-nav > div > a { font-size: 15px; }

    /* La tabla se oculta — el JS movió los inputs al contenedor mobile */
    table.turnos { display: none; }
    .turnos-mobile:not([hidden]) { display: block; }

    /* Toolbar más compacta y apilada */
    .turnos-toolbar {
        padding: 10px;
        gap: 10px;
    }
    .turnos-week, .turnos-actions {
        width: 100%;
        justify-content: flex-start;
    }
    .turnos-week strong { font-size: 16px !important; }

    /* Tabs de día — grid de 7 columnas, los 7 días siempre visibles */
    .m-tabs {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
        padding: 6px 0 10px;
        margin: 0 0 14px;
    }
    .m-tab {
        padding: 8px 4px;
        background: var(--bg-alt);
        border: 1px solid var(--line);
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        font-family: inherit;
        font-size: 12px;
        color: var(--ink);
        min-width: 0;
        transition: background 0.12s, border-color 0.12s;
    }
    .m-tab:hover { background: white; }
    .m-tab.is-active {
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
    }
    .m-tab.is-today {
        box-shadow: inset 0 -3px 0 0 var(--accent);
    }
    .m-tab.is-sunday .m-tab-dow { color: #c8923a; }
    .m-tab.is-active.is-sunday .m-tab-dow { color: var(--accent); }
    .m-tab-dow {
        display: block;
        font-family: var(--serif);
        font-weight: 500;
        font-size: 13px;
    }
    .m-tab-dnum {
        display: block;
        font-size: 10px;
        opacity: 0.75;
        margin-top: 2px;
    }

    /* Día seleccionado */
    .m-day-header {
        display: flex;
        align-items: baseline;
        gap: 10px;
        padding: 6px 4px 14px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 16px;
    }
    .m-day-dow {
        font-family: var(--serif);
        font-size: 22px;
        font-weight: 500;
    }
    .m-day-date {
        font-size: 13px;
        color: var(--ink-soft);
    }
    .m-day-today {
        margin-left: auto;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: var(--accent);
        color: var(--ink);
        padding: 3px 8px;
        border-radius: 999px;
        font-weight: 600;
    }

    /* Bloque por turno (mañana/tarde) */
    .m-shift {
        margin-bottom: 22px;
        padding: 12px;
        background: var(--bg-alt);
        border-radius: 10px;
    }
    .m-shift-h {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .m-shift-name {
        font-family: var(--serif);
        font-size: 18px;
        font-weight: 500;
    }
    .m-shift-time {
        font-size: 12px;
        color: var(--ink-soft);
    }

    /* Card de cada puesto */
    .m-cell {
        background: white;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 10px 12px;
        margin-bottom: 8px;
    }
    .m-cell-label {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--ink-soft);
        font-weight: 600;
        margin-bottom: 8px;
    }
    .m-cell-slot {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    /* Selector grande tap-friendly */
    .m-cell-slot .cell-select {
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 6px;
    }
    .m-cell-slot .cell-note {
        width: 100%;
        padding: 8px 10px;
        font-size: 14px;
    }
    .m-cell-slot .cell-warn {
        margin: 0;
    }

    /* Resumen y panel se apilan en columna */
    .turnos-panel { padding: 16px; }
    .turnos-panel h3 { font-size: 18px; }
    .emp-load .emp-name { font-size: 14px; }
    .emp-load .emp-hours { font-size: 12px; min-width: 46px; }
}

/* ---------- Print ---------- */
@media print {
    @page { size: landscape; margin: 8mm; }
    /* Forzar que los browsers respeten los colores de fondo (Chrome/Edge los descartan por defecto). */
    body,
    table.turnos td,
    .legend-item .dot {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body { background: white; }
    .no-print { display: none !important; }
    .admin-wrap { padding: 0; max-width: none; }
    .turnos-panel { display: none; }
    /* La leyenda de colores es redundante: el reporte de horas ya lista a
       cada empleado con su color. Se oculta para que entre todo en una hoja. */
    .print-legend { display: none !important; }
    /* Forzar tabla visible aunque el viewport sea angosto (override de la regla mobile). */
    table.turnos { display: table !important; font-size: 11px; }
    .turnos-mobile { display: none !important; }
    table.turnos td { padding: 2px 4px; }
    /* Mantener la grilla y su reporte de horas juntos en la misma hoja. */
    .turnos-week-page { page-break-inside: avoid; }
    /* Una semana por hoja en el print de mes. */
    .turnos-week-page.page-break { page-break-before: always; }
    .print-week-label {
        display: block;
        font-family: var(--serif);
        font-size: 16px;
        margin: 6px 0 4px;
    }
    .cell-select {
        appearance: none;
        -webkit-appearance: none;
        border: none;
        background: transparent !important;
        font-weight: 600;
        font-size: 13px;
        text-align: center;
        text-align-last: center;
        cursor: default;
        padding: 1px 0;
        font-size: 11px;
    }
    .cell-select option { display: none; }
    .cell-select option:checked { display: block; }
    .cell-note {
        border: none;
        background: transparent !important;
        text-align: center;
        font-style: italic;
        font-size: 9px;
        padding: 0;
        height: auto;
    }
    .cell-warn { display: none; }
    .turnos-wrap { max-width: none; }
    body.print-mode { background: white; }
    .week-hours-report { display: table !important; page-break-inside: avoid; }

    /* Liquidación: dos columnas como el PDF, los colores de fondo se imprimen. */
    .liq-grid {
        display: grid !important;
        grid-template-columns: 1fr 360px;
        gap: 20px;
    }
    .liq-grid,
    table.admin.liq-tot td,
    table.admin.liq-tot th,
    table.admin.liq-dias tr.liq-libre td {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    table.admin.liq-dias td, table.admin.liq-dias th { padding: 2px 6px; font-size: 10px; }
    table.admin.liq-tot td, table.admin.liq-tot th { padding: 4px 8px; font-size: 11px; }
    .liq-side { page-break-inside: avoid; }
    .print-only { display: inline !important; }
}