* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  font-family: var(--font-body); color: var(--ink); background: var(--paper);
}
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.atmosphere {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(47,111,78,.1), transparent 55%),
    radial-gradient(700px 400px at 100% 0%, rgba(196,92,38,.08), transparent 50%),
    linear-gradient(180deg, #f4f6f5, #e8ece9);
}

.brand { display: flex; gap: .8rem; align-items: center; }
.brand__logo {
  width: 2.35rem; height: 2.35rem; border-radius: .75rem; display: block; flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(47,111,78,.28); object-fit: cover;
}
.brand--lg .brand__logo { width: 3rem; height: 3rem; border-radius: .9rem; }
.brand__name { margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }
.brand__tag { margin: .15rem 0 0; color: var(--ink-soft); font-size: .78rem; }
.sidebar .brand__name, .sidebar .brand__tag { color: var(--sidebar-text); }
.sidebar .brand__tag { opacity: .65; }
.sidebar .brand__logo { box-shadow: 0 4px 12px rgba(0,0,0,.28); }

.login-screen {
  height: 100vh; overflow: auto; display: grid; place-items: center; padding: 1.5rem;
}
.login-card {
  width: min(440px, 100%); padding: 1.8rem; border-radius: calc(var(--radius) + 4px);
  background: rgba(255,255,255,.82); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
.login-card h1 { font-family: var(--font-display); margin: 1.2rem 0 .4rem; }
.lead, .muted { color: var(--ink-soft); }
.stack { display: grid; gap: .85rem; margin-top: 1rem; }
label { display: grid; gap: .35rem; font-size: .88rem; font-weight: 500; color: var(--ink-soft); }
input, select, textarea {
  padding: .68rem .8rem; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(47,111,78,.45); box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-password { position: relative; display: grid; }
.field-password input { padding-right: 2.6rem; width: 100%; }
.field-password__toggle {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  width: 2rem; height: 2rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.field-password__toggle:hover { color: var(--ink); background: rgba(21,32,24,.06); }
.field-password__toggle[aria-pressed="true"] { color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border: 0; border-radius: 999px; padding: .68rem 1.05rem; font-weight: 600; cursor: pointer;
  transition: transform .12s, box-shadow .12s, opacity .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--accent); color: #f7fff8; box-shadow: 0 8px 18px rgba(47,111,78,.22); }
.btn--secondary { background: var(--ink); color: #f4f6f5; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.btn--soft { background: var(--accent-soft); color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.icon-btn {
  position: relative; width: 2.4rem; height: 2.4rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
}
.icon-btn__badge {
  position: absolute; top: -.2rem; right: -.15rem; min-width: 1rem; height: 1rem;
  padding: 0 .25rem; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .65rem; font-weight: 700; display: grid; place-items: center;
}

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  height: 100vh; overflow: hidden;
  background: var(--sidebar); color: var(--sidebar-text);
  padding: 1.15rem .95rem; display: flex; flex-direction: column; gap: 1.1rem;
  border-right: 1px solid rgba(255,255,255,.04);
}
.nav {
  display: flex; flex-direction: column; gap: .2rem;
  overflow: auto; flex: 1; padding-right: .15rem;
}
.nav a {
  display: flex; align-items: center; gap: .55rem; padding: .68rem .75rem; border-radius: .85rem;
  color: rgba(213,221,214,.78); font-weight: 500; font-size: .92rem;
}
.nav a i { font-size: 1.1rem; opacity: .9; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.is-active {
  background: linear-gradient(90deg, rgba(47,111,78,.35), rgba(47,111,78,.12));
  color: #fff; box-shadow: inset 3px 0 0 var(--accent);
}

.main {
  min-width: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden;
}
.topbar {
  flex: 0 0 auto; min-height: var(--topbar-h);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem 1.35rem; background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); z-index: 20;
}
.topbar__left { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.topbar__title {
  margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1;
}
.topbar__filters { display: flex; flex-wrap: wrap; gap: .55rem; align-items: end; }
.topbar__filters label { font-size: .75rem; gap: .2rem; }
.topbar__filters input, .topbar__filters select {
  padding: .4rem .55rem; font-size: .86rem; min-width: 0;
}
.week-picker {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .35rem .2rem .2rem;
  border: 1px solid var(--line); border-radius: .75rem; background: #fff;
}
.week-picker__btn {
  width: 2rem; height: 2rem; border: 0; border-radius: .55rem;
  background: #f4f7f5; color: var(--ink); cursor: pointer; display: grid; place-items: center;
  font-size: 1.15rem;
}
.week-picker__btn:hover { background: var(--accent-soft); color: var(--accent); }
.week-picker__meta { min-width: 11.5rem; text-align: center; line-height: 1.15; padding: 0 .25rem; }
.week-picker__meta strong { display: block; font-size: .86rem; font-weight: 700; }
.week-picker__meta small { color: var(--ink-soft); font-size: .68rem; }
.topbar__right { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }

.user-menu { position: relative; }
.user-menu__trigger {
  display: flex; align-items: center; gap: .55rem; padding: .3rem .45rem .3rem .3rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;
}
.user-menu__meta { display: grid; text-align: left; line-height: 1.15; }
.user-menu__meta strong { font-size: .86rem; }
.user-menu__meta small { color: var(--ink-soft); font-size: .72rem; }
.avatar {
  width: 2.05rem; height: 2.05rem; border-radius: 999px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .85rem;
}
.user-menu__dropdown {
  position: absolute; right: 0; top: calc(100% + .4rem); min-width: 200px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .35rem; z-index: 40;
}
.user-menu__dropdown button {
  width: 100%; display: flex; align-items: center; gap: .5rem;
  border: 0; background: transparent; padding: .65rem .7rem; border-radius: .6rem;
  cursor: pointer; text-align: left; color: var(--ink); font-weight: 500;
}
.user-menu__dropdown button:hover { background: var(--paper); }

.content {
  flex: 1 1 auto; overflow: auto; padding: 1.15rem 1.35rem 2.2rem;
}

.kpi-row, .split, .grid-2 { display: grid; gap: 1rem; }
.kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; }
.split { grid-template-columns: 1.2fr 1fr; }
.grid-2 { grid-template-columns: 1fr 1fr; }

.panel, .kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.kpi { padding: 1rem 1.1rem; }
.kpi__label { margin: 0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.kpi__value { margin: .3rem 0 0; font-family: var(--font-display); font-size: 1.65rem; }
.panel { overflow: hidden; }
.panel__head { padding: 1rem 1.15rem .75rem; border-bottom: 1px solid var(--line); }
.panel__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.12rem; }
.panel__head p { margin: .25rem 0 0; color: var(--ink-soft); font-size: .88rem; }
.panel__body { padding: .95rem 1.15rem 1.15rem; }

.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { text-align: left; padding: .6rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--ink-soft); font-weight: 600; font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; }
.table tr:hover td { background: rgba(47,111,78,.03); }

.badge {
  display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 650;
}
.badge--hard, .badge--alta { background: rgba(180,35,24,.1); color: var(--danger); }
.badge--soft, .badge--media { background: rgba(181,71,8,.12); color: var(--warn); }
.badge--ok, .badge--ready, .badge--published { background: var(--accent-soft); color: var(--ok); }
.badge--blocked { background: rgba(180,35,24,.1); color: var(--danger); }
.badge--draft { background: rgba(21,32,24,.07); color: var(--ink-soft); }

.toolbar { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-bottom: 1rem; }
.tabs { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .35rem; }
.tabs button {
  border: 0; background: transparent; border-radius: .55rem;
  padding: .5rem .85rem; cursor: pointer; font-weight: 600; color: var(--ink-soft);
}
.tabs button.is-active {
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.matrix { width: 100%; border-collapse: collapse; font-size: .86rem; }
.matrix th, .matrix td {
  border: 1px solid var(--line); padding: .45rem; text-align: center; min-width: 4.5rem;
}
.matrix th { background: #f7f9f8; font-size: .74rem; color: var(--ink-soft); }
.matrix td.role { text-align: left; font-weight: 600; background: #fafbfa; min-width: 8rem; }
.matrix .qty input {
  width: 3.2rem; text-align: center; padding: .35rem; border-radius: .55rem;
  border: 1px solid var(--line); font-family: var(--font-display); font-size: 1.05rem;
}

.shift-board-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; box-shadow: 0 8px 22px rgba(18,26,20,.04);
}
.shift-board { width: 100%; border-collapse: collapse; min-width: 920px; font-size: .78rem; }
.shift-board th, .shift-board td {
  border: 1px solid var(--line); padding: .4rem; vertical-align: top;
}
.shift-board thead th {
  background: #f4f7f5; position: sticky; top: 0; z-index: 2;
  font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft);
}
.shift-role {
  position: sticky; left: 0; z-index: 1; background: #fbfcfb; min-width: 8.5rem;
  text-align: left !important;
}
.shift-role strong { display: block; font-size: .86rem; }
.shift-role span { color: var(--ink-soft); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.shift-row--cocina .shift-role { box-shadow: inset 3px 0 0 #5b8fd6; }
.shift-row--sala .shift-role { box-shadow: inset 3px 0 0 var(--accent); }
.shift-row--barra .shift-role { box-shadow: inset 3px 0 0 #c45c5c; }
.shift-cell {
  min-width: 7.2rem; min-height: 4.2rem;
  background: repeating-linear-gradient(-45deg, #fafbfa, #fafbfa 6px, #f2f5f3 6px, #f2f5f3 12px);
}
.shift-cell:not(.is-empty) { background: #fff; }
.shift-chip {
  display: grid; grid-template-columns: 1fr auto 1fr auto auto; gap: .2rem; align-items: center;
  margin: 0 0 .35rem; padding: .3rem .35rem; border-radius: .5rem;
  border: 1px solid rgba(47,111,78,.18); background: #eef6f1;
  animation: chipIn .25s ease both;
}
.shift-chip input[type="time"] {
  width: 100%; min-width: 0; border: 0; background: transparent; padding: .1rem 0; font-size: .72rem; font-weight: 600;
}
.shift-chip .shift-qty {
  width: 2.4rem; border: 1px solid var(--line); border-radius: .4rem; text-align: center;
  padding: .15rem; font-weight: 700; font-family: var(--font-display);
}
.shift-sep { color: var(--ink-soft); font-size: .7rem; }
.shift-remove, .shift-add {
  border: 0; background: transparent; cursor: pointer; font-weight: 700; line-height: 1;
  color: var(--ink-soft); border-radius: .35rem; padding: .15rem .35rem;
}
.shift-remove:hover { color: var(--danger); background: #fdf2f0; }
.shift-add {
  display: block; width: 100%; margin-top: .15rem; border: 1px dashed var(--line);
  color: var(--accent); font-size: .85rem; padding: .25rem;
}
.shift-add:hover { background: var(--accent-soft); }
.shift-legend { margin: .75rem 0 0; }
.check-grid--days { grid-template-columns: repeat(7, minmax(0, 1fr)); }

.field-help-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin-top: .35rem;
}
.field-help { font-size: .78rem; font-weight: 500; color: var(--ink-soft); }
.field-help--ok { color: var(--ok, #2f6f4e); }
.field-help--bad { color: var(--danger); }
.badge--bad { background: #fdf2f0; color: #9b1c1c; }
.emp-roles { max-width: 16rem; }
.chip-role {
  display: inline-block; margin: .1rem .15rem .1rem 0; padding: .15rem .45rem;
  border-radius: .45rem; background: #eef3f0; border: 1px solid var(--line);
  font-size: .72rem; font-weight: 650; color: var(--ink);
}

.form-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.check-grid {
  display: grid; gap: .35rem .8rem;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.check-grid label {
  display: flex; align-items: center; gap: .45rem; font-weight: 500; font-size: .9rem; color: var(--ink);
}
.check-grid input { width: auto; }
.access-pass-row {
  display: grid; grid-template-columns: 1fr auto; gap: .45rem; align-items: center;
}
.access-pass-row input { margin: 0; }
.table tr.is-selected { background: var(--accent-soft); }
.table button.linkish {
  background: none; border: 0; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0;
}
.tbl-actions {
  display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.tbl-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid transparent; border-radius: .55rem;
  padding: .32rem .6rem; font-size: .78rem; font-weight: 650;
  cursor: pointer; line-height: 1.2; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .12s;
}
.tbl-btn:hover { transform: translateY(-1px); }
.tbl-btn i { font-size: .95rem; line-height: 1; }
.tbl-btn--icon { padding: .28rem .4rem; }
.tbl-btn--edit {
  color: var(--accent); background: var(--accent-soft);
  border-color: rgba(47, 111, 78, .22);
}
.tbl-btn--danger {
  color: #9b1c1c; background: #fdf2f0;
  border-color: rgba(180, 35, 24, .28);
}
.tbl-btn--hours {
  color: #1e4d7b; background: #eef5fb;
  border-color: rgba(30, 77, 123, .22);
}
.tbl-btn--warn {
  color: #8a4b12; background: #fff6eb;
  border-color: rgba(181, 71, 8, .25);
}
.tbl-btn--ok {
  color: #1f5a3a; background: #e9f5ee;
  border-color: rgba(47, 111, 78, .22);
}
.chip-center {
  display: inline-block; margin: .1rem .15rem .1rem 0; padding: .15rem .45rem;
  border-radius: .45rem; background: #eef5fb; border: 1px solid rgba(30, 77, 123, .18);
  font-size: .72rem; font-weight: 650; color: #1e4d7b;
}
.emp-centers { max-width: 14rem; }
.hours-pill__hint {
  display: block; font-size: .68rem; opacity: .85; margin-top: .15rem;
}

.puestos-layout {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.1rem; align-items: start;
}
.zone-rail {
  border: 1px solid var(--line); border-radius: var(--radius); background: #f7faf8; padding: .85rem;
}
.zone-rail__title {
  margin: 0 0 .65rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.zone-rail__list { display: grid; gap: .4rem; }
.zone-rail__item {
  display: grid; gap: .2rem; text-align: left; width: 100%;
  border: 1px solid var(--line); border-radius: .75rem; padding: .65rem .7rem;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.zone-rail__item:hover { background: #fff; }
.zone-rail__item.is-active {
  border-color: color-mix(in srgb, var(--zone-color) 55%, var(--line));
  background: color-mix(in srgb, var(--zone-color) 12%, #fff);
  box-shadow: inset 3px 0 0 var(--zone-color);
}
.zone-rail__name { font-weight: 650; font-size: .9rem; }
.zone-rail__meta { font-size: .72rem; color: var(--ink-soft); }
.puestos-main__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; flex: 1; }
.post-list { display: grid; gap: .55rem; }
.post-card {
  display: flex; gap: .75rem; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius); padding: .85rem .95rem;
  background: var(--surface); border-left: 3px solid var(--zone-color, var(--accent));
}
.post-card__top { display: flex; flex-wrap: wrap; gap: .45rem .7rem; align-items: baseline; }
.post-card__time {
  font-size: .75rem; font-weight: 650; padding: .15rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--zone-color, var(--accent)) 16%, #fff);
  color: color-mix(in srgb, var(--zone-color, var(--accent)) 70%, #1a2e22);
}
.post-card__note, .post-card__role { margin: .4rem 0 0; font-size: .8rem; color: var(--ink-soft); }
.post-card__note i { margin-right: .25rem; }
.post-card__actions { display: flex; gap: .55rem; flex: none; }
.day-chips { display: flex; gap: .25rem; margin-top: .45rem; }
.day-chip {
  width: 1.35rem; height: 1.35rem; border-radius: .35rem; display: grid; place-items: center;
  font-size: .65rem; font-weight: 700; background: #eef1ef; color: #b0b8b3;
}
.day-chip--on {
  background: color-mix(in srgb, var(--zone-color, var(--accent)) 75%, #1a2e22);
  color: #fff;
}

.hours-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.hours-week--split { align-items: stretch; }
.hours-pill--split { display: flex; flex-direction: column; gap: .35rem; min-height: 7.5rem; }
.hours-slots { display: grid; gap: .35rem; width: 100%; }
.hours-slot { display: grid; gap: .25rem; }
.hours-add-slot {
  margin-top: .15rem; padding: .25rem .4rem !important; font-size: .7rem !important;
  border-radius: .5rem !important; width: 100%;
}
.hire-banner {
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: var(--radius);
  background: #fff7f0; border: 1px solid rgba(196,92,38,.28); color: #6a3210;
}
.hire-banner--ok {
  background: #f3faf6; border-color: rgba(47,111,78,.28); color: #1f5a3a;
}
.hire-banner strong { display: block; margin-bottom: .35rem; font-family: var(--font-display); }
.hire-banner ul { margin: .35rem 0 0; padding-left: 1.1rem; font-size: .86rem; }
.hire-banner .muted { margin: .45rem 0 0; font-size: .75rem; }

.hours-pill {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .45rem;
  background: #f7faf8; cursor: pointer; text-align: center; transition: .15s;
}
.hours-pill strong { display: block; font-size: .78rem; margin-bottom: .35rem; }
.hours-pill__day {
  display: block; width: 100%; border: 0; background: transparent; font-weight: 700;
  font-size: .78rem; cursor: pointer; color: inherit; padding: 0; margin-bottom: .25rem;
}
.hours-pill__closed { font-size: .72rem; font-weight: 600; }
.hours-pill__times { display: grid; gap: .2rem; }
.hours-pill.is-open { border-color: rgba(47,111,78,.35); background: var(--accent-soft); }
.hours-pill.is-closed { border-color: rgba(180,35,24,.25); background: #fdf2f0; color: var(--danger); }
.hours-bar {
  height: .35rem; border-radius: 999px; background: rgba(21,32,24,.08); overflow: hidden; margin: .35rem 0;
}
.hours-bar > span {
  display: block; height: 100%; background: linear-gradient(90deg, #3a8a5f, var(--accent)); border-radius: 999px;
}
.hours-pill input[type="time"] {
  width: 100%; padding: .2rem; font-size: .72rem; border-radius: .4rem; margin-top: .2rem;
}

.coverage-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.coverage-strip__item {
  padding: .5rem .75rem; border-radius: .75rem; background: rgba(255,255,255,.72);
  border: 1px solid var(--line); font-size: .78rem; display: grid; gap: .12rem;
  animation: chipIn .35s ease both;
}
.coverage-strip__item strong { font-size: .82rem; }
.coverage-strip__item--total { background: linear-gradient(135deg, #e8f3ec, #f7f0ea); border-color: rgba(47,111,78,.22); }

.planning-kpis { margin-bottom: 1rem; }
.planning-kpis__sub {
  margin: .85rem 0 .45rem; font-family: var(--font-display); font-size: 1.05rem;
}
.kpi-compare-row {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kpi-compare-row--zones {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.kpi-compare {
  border: 1px solid var(--line); border-radius: .75rem; padding: .75rem .85rem;
  background: #fbfcfb;
}
.kpi-compare__label {
  margin: 0 0 .55rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft); font-weight: 700;
}
.kpi-compare__vals {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .5rem;
}
.kpi-compare__vals strong {
  display: block; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1;
}
.kpi-compare__vals .muted { font-size: .68rem; }
.kpi-compare__bar {
  height: .45rem; border-radius: 999px; background: rgba(21,32,24,.08); overflow: hidden;
}
.kpi-compare__bar > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #5a8f6e, #2f6f4e);
}
.kpi-compare--mid .kpi-compare__bar > span { background: linear-gradient(90deg, #d4a017, #b54708); }
.kpi-compare--bad .kpi-compare__bar > span { background: linear-gradient(90deg, #d47070, #b42318); }
.kpi-compare--ok .kpi-compare__bar > span { background: linear-gradient(90deg, #5a8f6e, #2f6f4e); }
.kpi-compare__meta { margin: .4rem 0 0; font-size: .72rem; color: var(--ink-soft); }
.kpi-compare--bad .kpi-compare__meta { color: var(--danger); font-weight: 650; }
.kpi-compare--ok .kpi-compare__meta { color: var(--ok); font-weight: 650; }
.planning-hours-panel {
  margin-top: 1rem; box-shadow: none; border: 1px solid var(--line);
}
.planning-hours-panel .panel__head { padding-bottom: .35rem; }
.planning-cuadrante { display: grid; gap: 0; }

.coverage-chip {
  padding: .45rem .7rem; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: .8rem; font-weight: 600;
}
.coverage-chip--gap { background: #fdf2f0; border-color: rgba(180,35,24,.2); color: var(--danger); }

.canvas-layout {
  display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: start;
}
.canvas-layout--timeline {
  grid-template-columns: 180px minmax(0, 1fr) 160px;
  align-items: start;
}
.canvas-layout--posts {
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
}
.pq-board {
  width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 820px;
}
.pq-board.just-updated { animation: boardFlash .55s ease; }
.pq-board th, .pq-board td {
  border: 1px solid var(--line); padding: .35rem; vertical-align: top; min-width: 6.2rem; background: #fff;
}
.pq-board thead th {
  background: #f7f9f8; position: sticky; top: 0; z-index: 2;
  font-size: .74rem; letter-spacing: .02em; text-align: center;
}
.pq-post {
  position: sticky; left: 0; z-index: 1; background: #fbfcfb !important;
  text-align: left; min-width: 10.5rem; max-width: 12rem;
}
.pq-post strong { display: block; font-size: .82rem; }
.pq-post small { display: block; color: var(--ink-soft); font-weight: 500; margin-top: .15rem; }
.pq-post__note {
  display: block; margin-top: .25rem; font-style: normal; font-size: .68rem;
  color: var(--ink-soft); font-weight: 500; line-height: 1.3;
}
.pq-zone td {
  background: color-mix(in srgb, var(--accent) 8%, #f4f7f5);
  font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); padding: .4rem .55rem;
}
.pq-zone--cocina td { background: #eaf2fb; color: #3d6b8a; }
.pq-zone--barra td { background: #fdecef; color: #9a3d3d; }
.pq-zone--mesa td, .pq-zone--sala td { background: #e9f5ee; color: #2f6f4e; }
.pq-zone__sym { margin-right: .35rem; }
.pq-slot {
  min-height: 4.2rem; border-radius: .55rem; border: 2px dashed var(--line);
  padding: .3rem; display: flex; flex-direction: column; gap: .25rem;
  background: #fff; transition: outline .15s ease, background .15s ease, border-color .15s;
}
.pq-slot.has-gap { border-color: rgba(180, 35, 24, .35); background: #fff8f7; }
.pq-slot.is-full { border-style: solid; border-color: color-mix(in srgb, var(--zone-color, var(--accent)) 45%, var(--line));
  background: color-mix(in srgb, var(--zone-color, var(--accent)) 10%, #fff); }
.pq-slot.is-drop-target {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: rgba(47,111,78,.1) !important;
}
.pq-slot--off {
  min-height: 4.2rem; border-radius: .55rem; display: grid; place-items: center;
  color: #a8b0ab; font-size: .7rem;
  background: repeating-linear-gradient(-45deg, #ecefec, #ecefec 6px, #e2e6e3 6px, #e2e6e3 12px);
  border: 1px solid transparent;
}
.pq-slot__head {
  display: flex; justify-content: flex-end; padding: 0 .15rem;
  font-size: .68rem; font-weight: 700; color: var(--ink-soft);
}
.pq-slot.has-gap .pq-slot__head { color: var(--danger); }
.pq-chip {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  border-radius: .4rem; padding: .25rem .4rem; font-size: .72rem;
  border: 1px solid var(--line); cursor: grab; animation: chipIn .25s ease both;
}
.pq-chip strong { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-chip__x {
  border: 0; background: transparent; cursor: pointer; color: inherit; opacity: .55;
  font-size: .85rem; line-height: 1; padding: 0 .1rem; flex: none;
}
.pq-chip__x:hover { opacity: 1; color: var(--danger); }
.pq-cell--off { background: #f7f8f7; }

.tl-board { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 760px; }
.tl-board.just-updated { animation: boardFlash .55s ease; }
.tl-board th, .tl-board td {
  border: 1px solid var(--line); padding: .35rem; vertical-align: top; min-width: 6.2rem; background: #fff;
}
.tl-board thead th {
  background: #f7f9f8; position: sticky; top: 0; z-index: 2;
  font-size: .74rem; letter-spacing: .02em; text-align: center;
}
.tl-day-letter { display: block; font-size: 1rem; font-weight: 700; color: var(--ink); }
.tl-board thead th small { color: var(--ink-soft); font-weight: 500; }
.need-tiles { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; }
.need-stack { display: grid; gap: .35rem; min-height: 2.5rem; }
.zone-fill {
  position: relative; overflow: hidden;
  display: grid; gap: .25rem;
  padding: .35rem .4rem; border-radius: .55rem;
  border: 1px solid color-mix(in srgb, var(--zone-color, #2f6f4e) 28%, var(--line));
  background: #f7f9f8; cursor: copy;
  animation: chipIn .25s ease both;
}
.zone-fill__bar {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%);
  background: color-mix(in srgb, var(--zone-color, #2f6f4e) 32%, transparent);
  transition: width .35s ease;
  pointer-events: none;
}
.zone-fill__head, .zone-fill__people { position: relative; z-index: 1; }
.zone-fill__head {
  display: grid; grid-template-columns: auto 1fr auto; gap: .3rem; align-items: center;
}
.zone-fill__sym { font-size: .95rem; font-weight: 700; color: var(--zone-color, #2f6f4e); line-height: 1; }
.zone-fill__name { font-size: .72rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zone-fill__ratio { font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.zone-fill.has-gap .zone-fill__ratio { color: var(--danger); }
.zone-fill.is-ok .zone-fill__ratio { color: var(--ok); }
.zone-fill.has-gap {
  border-color: rgba(180, 35, 24, .35);
  box-shadow: inset 3px 0 0 var(--danger);
}
.zone-fill.is-ok { box-shadow: inset 3px 0 0 var(--ok); }
.zone-fill.is-ok .zone-fill__bar {
  background: color-mix(in srgb, var(--zone-color, #2f6f4e) 45%, transparent);
}
.zone-fill.has-gap .zone-fill__bar {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
}
.zone-fill__people { display: flex; flex-wrap: wrap; gap: .25rem; }
.zone-fill__empty {
  font-size: .68rem; font-weight: 650; color: var(--danger);
  padding: .1rem .2rem;
}
.zone-fill--demo { cursor: default; pointer-events: none; min-width: 8rem; }
.zone-fill.is-drop-target {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.tl-cell__pct {
  margin-top: .3rem; text-align: right;
  font-size: .62rem; font-weight: 700; color: var(--ink-soft);
}
.tl-cell.has-gap .tl-cell__pct { color: var(--danger); }
.tl-cell.is-ok .tl-cell__pct { color: var(--ok); }
.need-tile {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  align-items: center; justify-items: center; gap: 0 .2rem;
  min-width: 2.4rem; padding: .28rem .35rem; border-radius: .45rem;
  border: 1px solid var(--line); background: #f7faf8; cursor: copy;
  animation: chipIn .25s ease both;
}
.need-tile__sym { font-size: 1.05rem; line-height: 1; font-weight: 700; grid-row: 1 / 3; }
.need-tile__qty { font-size: .85rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.need-tile__miss {
  grid-column: 2; font-size: .62rem; font-weight: 800; color: var(--danger); line-height: 1;
}
.need-tile__ok {
  grid-column: 2; font-size: .58rem; font-weight: 650; color: var(--ink-soft); line-height: 1;
}
.need-tile.has-gap {
  background: #fdf2f0; border-color: rgba(180,35,24,.4);
  box-shadow: inset 3px 0 0 var(--danger);
}
.need-tile.is-ok { box-shadow: inset 3px 0 0 var(--ok); }
.need-tile--cocina { background: #eaf2fb; }
.need-tile--barra { background: #fdecef; }
.need-tile--mesa, .need-tile--sala { background: #e9f5ee; }
.need-tile.is-drop-target, .need-tile--demo { pointer-events: auto; }
.need-tile--demo { cursor: default; pointer-events: none; }
.zone-legend__needs { display: flex; flex-wrap: wrap; gap: .4rem; }
.zone-legend__needs li { list-style: none; }
.zone-legend__note {
  margin: .9rem 0 0; font-size: .72rem; color: var(--ink-soft); line-height: 1.35;
}
.tl-time {
  position: sticky; left: 0; z-index: 1; background: #fbfcfb !important;
  font-weight: 700; min-width: 4.6rem; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tl-time span { display: block; color: var(--ink-soft); font-weight: 500; font-size: .68rem; }
.tl-cell {
  min-height: 4rem;
  background: repeating-linear-gradient(-45deg, #fafbfa, #fafbfa 7px, #f3f5f4 7px, #f3f5f4 14px);
  transition: outline .15s ease, background .15s ease;
}
.tl-cell:not(.is-empty):not(.is-closed) { background: #fff; }
.tl-cell.is-closed {
  background: repeating-linear-gradient(-45deg, #ecefec, #ecefec 6px, #e2e6e3 6px, #e2e6e3 12px);
}
.tl-cell.is-drop-target, .zone-chip.is-drop-target {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: rgba(47,111,78,.1) !important;
}
.zone-chip {
  display: flex; align-items: center; gap: .35rem;
  margin: 0 0 .3rem; padding: .3rem .4rem; border-radius: .5rem;
  border: 1px solid var(--line); background: #f7faf8; cursor: copy;
  animation: chipIn .25s ease both;
}
.zone-chip__sym { font-size: 1rem; line-height: 1; font-weight: 700; }
.zone-chip__meta { display: grid; line-height: 1.15; min-width: 0; }
.zone-chip__meta strong { font-size: .72rem; }
.zone-chip__meta small { font-size: .66rem; color: var(--ink-soft); }
.zone-chip.has-gap {
  background: #fdf2f0; border-color: rgba(180,35,24,.35);
  box-shadow: inset 3px 0 0 var(--danger);
}
.zone-chip.has-gap .zone-chip__meta small { color: var(--danger); font-weight: 700; }
.zone-chip.is-ok { box-shadow: inset 3px 0 0 var(--ok); }
.zone-chip--cocina { background: #eaf2fb; }
.zone-chip--barra { background: #fdecef; }
.zone-chip--mesa, .zone-chip--sala { background: #e9f5ee; }
.zone-legend {
  background: linear-gradient(180deg, #fbfcfb, #f1f5f2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem; position: sticky; top: .25rem;
  box-shadow: 0 8px 24px rgba(18,26,20,.05);
}
.zone-legend h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.05rem; }
.zone-legend > .muted { margin: 0 0 .7rem; font-size: .75rem; }
.zone-legend__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.zone-legend__list li { display: flex; gap: .5rem; align-items: center; }
.zone-legend__sym { font-size: 1.25rem; width: 1.5rem; text-align: center; }
.zone-legend__list strong { display: block; font-size: .86rem; }
.zone-legend__list small { color: var(--ink-soft); font-size: .7rem; }
.zone-legend__hint { margin-top: 1rem; padding-top: .75rem; border-top: 1px dashed var(--line); }
.zone-legend__hint .zone-chip.demo { pointer-events: none; margin-bottom: .4rem; }
.canvas-card--mesa { background: #d8f0e3; border-color: rgba(47,111,78,.28); color: #163528; }
.canvas-area--mesa td { background: #e9f5ee; color: #1f5a3a; }
.shift-row--mesa .shift-role { box-shadow: inset 3px 0 0 var(--accent); }

@media (max-width: 980px) {
  .canvas-layout--timeline, .canvas-layout--posts { grid-template-columns: 1fr; }
  .zone-legend { position: static; }
}
.pool {
  background: linear-gradient(180deg, #fbfcfb, #f1f5f2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .85rem; max-height: 68vh; overflow: auto;
  box-shadow: 0 8px 24px rgba(18,26,20,.05);
  position: sticky; top: .25rem;
}
.pool h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.05rem; }
.pool > .muted { margin: 0 0 .7rem; font-size: .75rem; line-height: 1.35; }
.pool__chips { display: grid; gap: .45rem; }
.pool__chip, .pool-chip, .canvas-card {
  display: flex; align-items: center; gap: .45rem; width: 100%; margin: 0;
  padding: .5rem .55rem; border-radius: .65rem; border: 1px solid var(--line);
  background: var(--surface); cursor: grab; font-size: .8rem; font-weight: 600; text-align: left;
  box-shadow: 0 2px 8px rgba(18,26,20,.05);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
  user-select: none;
}
.pool__chip:hover, .canvas-card:hover {
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(18,26,20,.1);
  border-color: rgba(47,111,78,.35);
}
.pool__chip.is-dragging, .canvas-card.is-dragging {
  opacity: .45; cursor: grabbing; transform: scale(.96) rotate(-1deg);
}
.pool__avatar {
  width: 1.55rem; height: 1.55rem; border-radius: .45rem; flex: 0 0 auto;
  display: grid; place-items: center; font-size: .75rem; font-weight: 700;
  background: linear-gradient(145deg, #3a8a5f, var(--accent)); color: #f4fff7;
}
.pool__meta { display: grid; gap: .12rem; min-width: 0; flex: 1; }
.pool__meta strong { font-size: .8rem; font-weight: 650; line-height: 1.15; }
.pool__zones { display: flex; gap: .2rem; align-items: center; }
.pool__zone { font-size: .95rem; line-height: 1; font-weight: 700; }
.pool__zone--none { color: #b0b8b3; font-size: .75rem; font-weight: 600; }
.pool__trash, .trash-drop {
  margin-top: .85rem; padding: .7rem; border-radius: .7rem; text-align: center;
  border: 1px dashed rgba(180,35,24,.35); color: var(--danger); font-weight: 600; font-size: .8rem;
  background: #fff; transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pool__trash.is-hot, .pool__trash.is-drop-target {
  background: #fdf2f0; border-style: solid; transform: scale(1.03);
  animation: pulseDrop 1s ease infinite;
}

.canvas-main { min-width: 0; }
.canvas-board-wrap {
  overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; box-shadow: 0 10px 28px rgba(18,26,20,.05);
}
.canvas-board { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 760px; }
.canvas-board.just-updated { animation: boardFlash .55s ease; }
.canvas-board th, .canvas-board td {
  border: 1px solid var(--line); padding: .4rem; vertical-align: top; min-width: 6.8rem; background: #fff;
}
.canvas-board thead th {
  background: #f7f9f8; position: sticky; top: 0; z-index: 2;
  font-size: .74rem; letter-spacing: .02em;
}
.canvas-role {
  position: sticky; left: 0; z-index: 1; background: #fbfcfb !important;
  font-weight: 700; min-width: 7.5rem; white-space: nowrap;
}
.canvas-area td {
  background: #eef2ef; font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft);
  padding: .45rem .55rem;
}
.canvas-area--cocina td { background: #e8f0fb; color: #1f4b7a; }
.canvas-area--sala td { background: #e9f5ee; color: #1f5a3a; }
.canvas-area--barra td { background: #fdecef; color: #8a2f45; }
.canvas-area--otro td { background: #f3f1ec; color: #5a5346; }

.canvas-cell {
  min-height: 4.2rem; transition: background .15s ease, box-shadow .15s ease, outline-color .15s ease;
  background:
    repeating-linear-gradient(-45deg, #fafbfa, #fafbfa 7px, #f3f5f4 7px, #f3f5f4 14px);
}
.canvas-cell:not(.is-empty) { background: #fff; }
.canvas-cell.has-gap {
  background: repeating-linear-gradient(-45deg, #fdf6f4, #fdf6f4 7px, #f8e8e4 7px, #f8e8e4 14px);
}
.canvas-cell.is-drop-target {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: rgba(47,111,78,.1) !important;
  box-shadow: inset 0 0 0 1px rgba(47,111,78,.25);
}
.is-dnd-active .canvas-cell { cursor: copy; }
.is-dnd-active .canvas-card:not(.is-dragging),
.is-dnd-active .canvas-drop-hint,
.is-dnd-active .canvas-gap { pointer-events: none; }
.canvas-drop-hint {
  color: var(--ink-soft); font-size: .68rem; font-weight: 600;
  opacity: .55; padding: .35rem .2rem; text-align: center;
  pointer-events: none;
}
.is-dnd-active .canvas-drop-hint { opacity: 1; color: var(--accent); }

.canvas-card {
  display: flex; align-items: center; justify-content: space-between; gap: .35rem;
  margin: 0 0 .35rem; color: #163528;
  animation: chipIn .28s cubic-bezier(.2,.8,.2,1) both;
  border-left-width: 3px;
}
.canvas-card strong {
  display: block; flex: 1 1 auto; min-width: 0;
  font-size: .78rem; line-height: 1.2; color: inherit;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.canvas-card .pq-chip__x { margin-left: auto; flex: none; }
.canvas-card span, .canvas-card small {
  display: block; font-weight: 500; color: inherit; opacity: .78; font-size: .7rem; margin-top: .12rem;
}
.canvas-card--cocina { background: #dce9fb; border-color: rgba(47,99,160,.28); color: #163a63; }
.canvas-card--sala { background: #d8f0e3; border-color: rgba(47,111,78,.3); color: #163528; }
.canvas-card--barra { background: #f9d9e1; border-color: rgba(170,55,85,.3); color: #6d2438; }
.canvas-card--otro { background: #efe8dc; border-color: rgba(140,110,60,.3); color: #4a3d28; }
/* Franja horaria: acento, nunca pisa el texto */
.canvas-card.cell-block--am,
.canvas-card.cell-block--pm,
.canvas-card.cell-block--night {
  color: inherit;
}
.canvas-card.cell-block--am { background: #dce9fb; box-shadow: inset 3px 0 0 #3d6b8a; }
.canvas-card.cell-block--pm { background: #d8f0e3; box-shadow: inset 3px 0 0 #2f6f4e; }
.canvas-card.cell-block--night { background: #efe8dc; box-shadow: inset 3px 0 0 #8a6a4a; }
.canvas-card--cocina.cell-block--am,
.canvas-card--cocina.cell-block--pm,
.canvas-card--cocina.cell-block--night { background: #dce9fb; color: #163a63; }
.canvas-card--sala.cell-block--am,
.canvas-card--sala.cell-block--pm,
.canvas-card--sala.cell-block--night { background: #d8f0e3; color: #163528; }
.canvas-card--barra.cell-block--am,
.canvas-card--barra.cell-block--pm,
.canvas-card--barra.cell-block--night { background: #f9d9e1; color: #6d2438; }
.canvas-card--otro.cell-block--am,
.canvas-card--otro.cell-block--pm,
.canvas-card--otro.cell-block--night { background: #efe8dc; color: #4a3d28; }

.canvas-gap {
  min-height: 1.9rem; border-radius: .45rem; padding: .35rem .4rem; margin-top: .2rem;
  color: var(--danger); font-weight: 700; font-size: .7rem;
  border: 1px dashed rgba(180,35,24,.35); background: transparent;
  pointer-events: none;
}

@keyframes chipIn {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes pulseDrop {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,.15); }
  50% { box-shadow: 0 0 0 6px rgba(180,35,24,.05); }
}
@keyframes boardFlash {
  0% { box-shadow: inset 0 0 0 0 rgba(47,111,78,.0); }
  35% { box-shadow: inset 0 0 0 3px rgba(47,111,78,.22); }
  100% { box-shadow: inset 0 0 0 0 rgba(47,111,78,.0); }
}

.quad { width: 100%; border-collapse: collapse; font-size: .8rem; }
.quad th, .quad td { border: 1px solid var(--line); padding: .35rem; vertical-align: top; min-width: 6.5rem; }
.quad th { background: #f7f9f8; font-size: .75rem; }
.cell-block {
  margin: .15rem 0; padding: .25rem .35rem; border-radius: .4rem; font-weight: 600;
}
.cell-block--am { background: var(--shift-am); color: var(--shift-am-ink); }
.cell-block--pm { background: var(--shift-pm); color: var(--shift-pm-ink); }
.cell-block--night { background: var(--shift-night); color: var(--shift-night-ink); }
.cell-gap { background: var(--gap); color: var(--danger); font-weight: 700; padding: .25rem; border-radius: .35rem; }

.hours-stats { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hours-stats th, .hours-stats td {
  border-bottom: 1px solid var(--line); padding: .55rem .45rem; text-align: left;
}
.hours-stats th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.hours-stats td.num, .hours-stats th.num { text-align: right; font-variant-numeric: tabular-nums; }
.hours-stats .bar {
  height: .35rem; border-radius: 999px; background: #e8ece9; overflow: hidden; margin-top: .35rem;
}
.hours-stats .bar > span {
  display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3a8a5f, var(--accent));
}
.hours-stats tr.is-over .bar > span { background: linear-gradient(90deg, #c45c26, #b42318); }
.hours-stats-wrap { overflow-x: auto; }
.hours-stats--daily th small {
  display: block; font-size: .62rem; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.hours-day__val { font-weight: 750; }
.hours-day__max { font-size: .68rem; color: var(--ink-soft); font-weight: 600; }
.hours-stats td.hours-day--empty { color: var(--ink-soft); opacity: .55; }
.hours-stats td.hours-day--ok { background: #e9f5ee; color: #1f5a3a; }
.hours-stats td.hours-day--near { background: #fff6eb; color: #8a4b12; }
.hours-stats td.hours-day--tight { background: #fff8e8; color: #8a4b12; }
.hours-stats td.hours-day--cap { background: #fdf2f0; color: #9b1c1c; }
.hours-day__room {
  display: block; font-size: .62rem; font-weight: 700; opacity: .85; line-height: 1.1;
}
.hours-stats-legend { margin: .55rem 0 0; font-size: .75rem; }
.hours-stats-legend .hours-day {
  display: inline-block; padding: .1rem .35rem; border-radius: .35rem;
  margin-right: .15rem; font-size: .68rem; font-weight: 700;
}
.hours-stats-legend .hours-day--ok { background: #e9f5ee; color: #1f5a3a; }
.hours-stats-legend .hours-day--near { background: #fff6eb; color: #8a4b12; }
.hours-stats-legend .hours-day--tight { background: #fff8e8; color: #8a4b12; }
.hours-stats-legend .hours-day--cap { background: #fdf2f0; color: #9b1c1c; }

.row-item { padding: .65rem 0; border-bottom: 1px solid var(--line); }
.row-item:last-child { border-bottom: 0; }
.row-item strong { display: block; }
.row-item span { color: var(--ink-soft); font-size: .86rem; }

.error, .toast.error { color: var(--danger); margin-top: .8rem; }
.toast {
  position: sticky; bottom: 1rem; margin: 0; padding: .8rem 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: .8rem; box-shadow: var(--shadow);
}
.toast-host {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 120;
  display: grid; gap: .55rem; width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast-float {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: .55rem; justify-content: space-between;
  padding: .85rem 1rem; border-radius: .85rem; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(18,26,20,.16);
  font-size: .9rem; line-height: 1.35; animation: toastIn .22s ease both;
}
.toast-float--error { border-color: rgba(180,35,24,.35); color: #7a1c14; background: #fff7f6; }
.toast-float--ok { border-color: rgba(47,111,78,.35); color: #1f5a3a; background: #f3faf6; }
.toast-float__x {
  border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1;
  opacity: .55; color: inherit; padding: 0;
}
.toast-float.is-out { opacity: 0; transform: translateY(8px); transition: .25s ease; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.empty { color: var(--ink-soft); padding: .5rem 0; }

.sheet { position: fixed; inset: 0; z-index: 80; }
.sheet__backdrop {
  position: absolute; inset: 0; background: rgba(12, 18, 14, .42); backdrop-filter: blur(3px);
  animation: fadeIn .2s ease;
}
.sheet__panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(640px, 100%); max-height: min(88vh, 820px);
  background: var(--surface); border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: sheetUp .28s cubic-bezier(.2,.8,.2,1);
  border: 1px solid var(--line); border-bottom: 0;
}
.sheet__handle {
  width: 42px; height: 4px; border-radius: 999px; background: rgba(21,32,24,.18);
  margin: .55rem auto .15rem;
}
.sheet__head {
  display: flex; justify-content: space-between; align-items: start; gap: 1rem;
  padding: .55rem 1.15rem .7rem; border-bottom: 1px solid var(--line);
}
.sheet__eyebrow {
  margin: 0 0 .15rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
}
.sheet__head h2 { margin: 0; font-family: var(--font-display); font-size: 1.25rem; }
.sheet__body { padding: 1rem 1.15rem; overflow: auto; flex: 1; }
.sheet__foot {
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: flex-end;
  padding: .85rem 1.15rem 1.1rem; border-top: 1px solid var(--line); background: #fbfcfb;
}
.sheet--danger .sheet__head h2 { color: var(--danger); }
.sheet__confirm-text { margin: 0; font-size: 1rem; line-height: 1.45; }

@keyframes sheetUp {
  from { transform: translate(-50%, 28%); opacity: .4; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}

body.sheet-open .content { overflow: hidden; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { height: auto; position: sticky; top: 0; z-index: 30; overflow: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; overflow: visible; }
  .kpi-row, .split, .grid-2, .canvas-layout, .form-grid, .hours-week, .puestos-layout, .kpi-compare-row { grid-template-columns: 1fr; }
  .user-menu__meta { display: none; }
  .topbar { flex-wrap: wrap; }
}