/* Planificador GeoVictoria — interfaz operacional, densa y compacta. */

:root {
  /* Touch-inspired design tokens. Operational statuses stay semantically distinct. */
  --bg: #f3f8f5;
  --panel: #ffffff;
  --line: #d7e8df;
  --line-soft: #e8f1ec;
  --ink: #15352d;
  --muted: #59766b;
  --blue: #229c68;
  --blue-dark: #147e53;
  --blue-soft: #e6f7ee;
  --green: #168354;
  --green-soft: #ddf5e8;
  --amber: #a95b0b;
  --amber-soft: #fff2dc;
  --red: #b32636;
  --red-soft: #fce9ec;
  --purple: #66518b;
  --purple-soft: #f0ebf8;
  --cyan: #177e88;
  --cyan-soft: #e2f5f5;
  --nav: #113c30;
  --nav-soft: #1c5c46;
  --radius: 7px;
  --font: "Poppins", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
}

#app, .shell { height: 100%; }

.boot { padding: 40px; color: var(--muted); }
.boot.error { color: var(--red); }

.shell { display: flex; }

/* ------------------------------ navegación ------------------------------ */

.nav {
  width: 194px;
  flex: 0 0 194px;
  background: var(--nav);
  color: #cfd8e3;
  display: flex;
  flex-direction: column;
  padding: 10px 8px;
  gap: 2px;
}

.brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 14px; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 5px; background: var(--blue);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.brand strong { color: #fff; font-size: 13px; display: block; line-height: 1.1; }
.brand-sub { font-size: 11px; color: #8fa1b5; }

.nav-item {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; color: #c3cedb; text-align: left;
  padding: 7px 9px; border-radius: var(--radius); cursor: pointer;
  font: inherit; font-size: 12.5px;
}
.nav-item:hover { background: var(--nav-soft); color: #fff; }
.nav-item.active { background: var(--blue); color: #fff; }
.nav-icon { width: 16px; text-align: center; opacity: .9; }

/* ------------------------------ estructura ------------------------------ */

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 34px; flex: 0 0 34px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
}

.save-badge { font-size: 11.5px; color: var(--muted); }
.save-badge.saving { color: var(--amber); }
.save-badge.saved { color: var(--green); }
.save-badge.error { color: var(--red); }

.view { flex: 1; overflow: auto; padding: 14px; }

.view-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 12px;
}
.view-head h1 { font-size: 18px; margin: 0 0 2px; }
.view-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px;
}
.panel.pad { padding: 12px 14px; }
.panel h2 { font-size: 14px; margin: 0 0 8px; }
.panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 { margin: 0; }
.panel-head-inline { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.warn-panel { border-left: 3px solid var(--amber); }

.small-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 14px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 11.5px; }
.pad { padding: 10px 12px; }
.ok-text { color: var(--green); }
.text-error { color: var(--red); }
.sep { color: var(--line); }

/* ------------------------------ controles ------------------------------ */

.btn {
  font: inherit; font-size: 12.5px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 5px 11px; border-radius: var(--radius); cursor: pointer;
}
.btn:hover { background: #f5f7fa; }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }
.btn-danger { color: var(--red); border-color: #e6bcbc; }
.btn-danger:hover { background: var(--red-soft); }
.btn-ghost { background: #fff; }
.btn-mini { padding: 3px 8px; font-size: 11.5px; }
.icon-btn { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }

.input {
  font: inherit; font-size: 12.5px; width: 100%;
  padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.input:focus { outline: 2px solid var(--blue-soft); border-color: var(--blue); }
textarea.input { resize: vertical; font-family: var(--font); }

.field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.field-label { font-size: 11.5px; color: var(--muted); }
.field-hint { font-size: 11px; color: var(--muted); }
.req { color: var(--red); font-style: normal; }

.form { display: block; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
.filters { display: flex; gap: 8px; margin-bottom: 10px; }
.filters .input { max-width: 240px; }

.check-inline { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.check-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.check-item {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center;
  padding: 4px 8px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.check-item:hover { background: #f7f9fb; }
.check-actions { display: flex; gap: 6px; margin: 6px 0; }

/* ------------------------------ tablas ------------------------------ */

.table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; }
.table-wrap.scroll-y { max-height: 420px; }
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: #f7f9fb; padding: 6px 9px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2;
}
.table td { padding: 5px 9px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:hover td { background: #f9fbfd; }
.table-mini td, .table-mini th { padding: 3px 7px; font-size: 11.5px; }
.row-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ------------------------------ etiquetas ------------------------------ */

.badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; margin-right: 4px; white-space: nowrap;
}
.badge-neutral { background: #eef1f5; color: #47566a; }
.badge-ok { background: var(--green-soft); color: var(--green); }
.badge-warn { background: var(--amber-soft); color: var(--amber); }
.badge-error { background: var(--red-soft); color: var(--red); }
.badge-info { background: var(--blue-soft); color: var(--blue); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: #fbfcfe; }
.tile-label { display: block; font-size: 11px; color: var(--muted); }
.tile-value { display: block; font-size: 19px; line-height: 1.25; }
.tile-sub { font-size: 11px; color: var(--muted); }
.tile.ok { border-left: 3px solid var(--green); }
.tile.warn { border-left: 3px solid var(--amber); }
.tile.error { border-left: 3px solid var(--red); }

.summary-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.bullets { margin: 4px 0; padding-left: 18px; color: var(--muted); }
.bullets li { margin: 3px 0; }

.issue-list { list-style: none; margin: 0; padding: 0; }
.issue {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 12px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px;
}
.issue-error { border-left: 3px solid var(--red); }
.issue-warn { border-left: 3px solid var(--amber); }
.issue-ok { border-left: 3px solid var(--green); }

.empty { text-align: center; padding: 44px 20px; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); }
.empty h3 { margin: 0 0 6px; color: var(--ink); font-size: 15px; }
.empty p { margin: 0 0 12px; }

.preview-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 10px; background: #fbfcfe; margin: 8px 0; max-height: 220px; overflow: auto;
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; background: #eef1f5; }
.chip-holiday { background: var(--cyan-soft); color: var(--cyan); }
.chip-rest { background: var(--purple-soft); color: var(--purple); }
.chip-work { background: var(--blue-soft); color: var(--blue); }
.chip-noid { background: var(--red-soft); color: var(--red); }
.chip-licencia, .chip-vacaciones, .chip-permiso, .chip-ausencia, .chip-feriado { background: var(--amber-soft); color: var(--amber); }
.chip-x { border: 0; background: none; cursor: pointer; color: inherit; font-size: 13px; line-height: 1; }

.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rule-item { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); }

/* ------------------------------ planificador ------------------------------ */

.planner-head { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.planner-head h1 { font-size: 16px; margin: 0 0 3px; }
.planner-head-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.planner-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.planner-actions { display: flex; gap: 6px; }

.planner-body { display: flex; gap: 10px; align-items: flex-start; }

.catalog {
  width: 208px; flex: 0 0 208px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px;
  max-height: calc(100vh - 150px); display: flex; flex-direction: column; gap: 7px;
}
.catalog-head { display: flex; align-items: baseline; justify-content: space-between; }
.catalog-head h2 { font-size: 13px; margin: 0; }
.shift-list { overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.shift-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 7px;
  cursor: grab; background: #fbfcfe;
}
.shift-card:hover { border-color: var(--blue); background: var(--blue-soft); }
.shift-card-top { display: flex; justify-content: space-between; font-size: 12px; }
.shift-card-time { font-size: 12px; color: var(--blue); font-variant-numeric: tabular-nums; }
.shift-card-rest { background: var(--purple-soft); border-color: #c9c2e2; display: flex; justify-content: space-between; align-items: center; }

.planner-main { flex: 1; min-width: 0; }

.toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.tabs { display: flex; gap: 3px; }
.tab { border: 1px solid var(--line); background: #fff; padding: 4px 12px; border-radius: var(--radius); cursor: pointer; font: inherit; font-size: 12.5px; }
.tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.toolbar-actions { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.sel-count { min-width: 62px; }

.matrix-wrap {
  overflow: auto; max-height: calc(100vh - 210px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.matrix { border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.matrix th, .matrix td { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.matrix thead th {
  position: sticky; background: #f7f9fb; z-index: 3; color: var(--muted);
  font-weight: 600; padding: 3px 4px; text-align: center;
}
.matrix thead tr:first-child th { top: 0; }
.matrix thead tr:nth-child(2) th { top: 22px; }
.week-head { font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
.day-head { min-width: 34px; }
.day-head.weekend { background: #eef2f7; }
.day-head.holiday { background: var(--cyan-soft); color: var(--cyan); }
.day-head.today { box-shadow: inset 0 -2px 0 var(--blue); }
.dh-letter { display: block; font-size: 9.5px; opacity: .75; }
.dh-day { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); }
.totals-head { background: #f2f5f9; min-width: 62px; }
.totals-head.small { font-size: 10px; }

.sticky-col {
  position: sticky; left: 0; z-index: 4; background: #fff;
  border-right: 1px solid var(--line) !important; text-align: left;
  min-width: 178px; max-width: 178px;
}
.matrix thead .sticky-col { z-index: 5; background: #f7f9fb; }
.corner { vertical-align: bottom; padding: 4px 8px !important; }
.worker-cell { padding: 3px 8px; }
.worker-name { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.worker-sub { display: block; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cell {
  height: 30px; min-width: 40px; max-width: 46px; text-align: center; padding: 0 1px; cursor: pointer;
  user-select: none; padding: 0; position: relative; background: #fff; overflow: hidden;
}
.cell.weekend { background: #f5f7fa; }
.cell.holiday { background: var(--cyan-soft); }
.cell.today { box-shadow: inset 0 0 0 1px rgba(34, 156, 104, .35); }
.cell-id { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cell-sub { display: block; font-size: 8.5px; color: var(--muted); line-height: 1; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; }
.cell.work .cell-id { color: var(--blue); }
.cell.work { background: var(--blue-soft); }
.cell.work.weekend { background: #dfe9f7; }
.cell.rest { background: var(--purple-soft); }
.cell.rest .cell-id { color: var(--purple); }
.cell.no-id, .cell.bad-id { background: var(--red-soft); }
.cell.no-id .cell-id, .cell.bad-id .cell-id { color: var(--red); }
.cell.kind-licencia, .cell.kind-vacaciones, .cell.kind-permiso, .cell.kind-ausencia, .cell.kind-feriado { background: var(--amber-soft); }
.cell.kind-licencia .cell-id, .cell.kind-vacaciones .cell-id, .cell.kind-permiso .cell-id,
.cell.kind-ausencia .cell-id, .cell.kind-feriado .cell-id { color: var(--amber); font-size: 10px; }
.cell.selected { box-shadow: inset 0 0 0 2px var(--blue); }
.cell.drop-target { box-shadow: inset 0 0 0 2px var(--green); }
.cell.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background: #fde68a; } 100% { background: inherit; } }

.totals { text-align: center; font-variant-numeric: tabular-nums; background: #fafbfd; font-size: 11.5px; }
.totals.ok { color: var(--green); }
.totals.warn { color: var(--amber); }
.totals.bad { color: var(--red); }

.coverage-row td, .coverage-row th { background: #f7f9fb; font-size: 11px; color: var(--muted); text-align: center; }
.cov { font-variant-numeric: tabular-nums; }

/* ------------------------------ calendario ------------------------------ */

.calendar-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.cal-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.cal-user { display: flex; flex-direction: column; gap: 2px; }
.worker-select { min-width: 320px; }
.cal-month { font-size: 15px; font-weight: 600; }
.calendar { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar th {
  font-size: 11px; text-transform: capitalize; color: var(--muted);
  border: 1px solid var(--line-soft); background: #f7f9fb; padding: 4px; font-weight: 600;
}
.jornada-head { width: 108px; }
.cal-cell { border: 1px solid var(--line-soft); height: 74px; vertical-align: top; padding: 3px 4px; cursor: pointer; }
.cal-cell.weekend { background: #f5f7fa; }
.cal-cell.holiday { background: var(--cyan-soft); }
.cal-cell.today { box-shadow: inset 0 0 0 2px rgba(34, 156, 104, .3); }
.cal-cell.out { background: #f2f4f7; }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--blue); }
.cal-cell.drop-target { box-shadow: inset 0 0 0 2px var(--green); }
.cal-daynum { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; }
.cal-flag { color: var(--cyan); }
.cal-body { display: flex; flex-direction: column; gap: 2px; margin-top: 3px; }
.cal-body .chip { align-self: flex-start; }
.jornada { border: 1px solid var(--line-soft); text-align: center; background: #fafbfd; font-variant-numeric: tabular-nums; }
.jornada span { display: block; font-size: 10.5px; line-height: 1.35; }
.jornada strong { display: block; font-size: 12.5px; }
.jornada .ok { color: var(--green); }
.jornada .warn { color: var(--amber); }
.jornada .bad { color: var(--red); }

/* ------------------------------ modales ------------------------------ */

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 25, 35, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 100; overflow: auto;
}
.modal { background: #fff; border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22); max-width: 96vw; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.modal-title { font-size: 15px; margin: 0; }
.modal-sub { font-size: 12px; color: var(--muted); margin: 3px 0 0; }
.modal-body { padding: 12px 14px; max-height: 68vh; overflow: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line-soft); background: #fafbfd; }

.candidates { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.id-box { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.similar-box { margin-bottom: 6px; }

/* ------------------------------ avisos ------------------------------ */

#toasts { position: fixed; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 200; }
.toast {
  background: #1e2c3a; color: #fff; padding: 8px 12px; border-radius: var(--radius);
  font-size: 12.5px; max-width: 380px; box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
  animation: slide-in .18s ease-out;
}
.toast-ok { background: #14612f; }
.toast-error { background: #99201f; }
.toast-warn { background: #8a4409; }
.toast.out { opacity: 0; transition: opacity .25s; }
@keyframes slide-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------ cobertura ------------------------------ */

.coverage { display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; padding-top: 6px; }
.cov-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 26px; }
.cov-bar { width: 18px; height: 58px; background: #eef1f5; border-radius: 2px; display: flex; align-items: flex-end; }
.cov-fill { width: 100%; background: var(--blue); border-radius: 2px; min-height: 2px; }
.cov-day { font-size: 10px; }
.cov-dow { font-size: 9px; }
.cov-count { font-size: 10.5px; font-weight: 600; }

.import-host section { margin-bottom: 10px; }

@media (max-width: 1400px) {
  .catalog { width: 186px; flex-basis: 186px; }
  .sticky-col { min-width: 150px; max-width: 150px; }
}

/* ---------------- Touch · identidad y refinamientos UI ---------------- */
.nav {
  width: 212px;
  flex-basis: 212px;
  border-right: 1px solid #0a2f24;
  background: linear-gradient(180deg, #123e31 0%, #164e3b 65%, #0f362a 100%);
  padding: 16px 10px;
}
.brand {
  gap: 10px;
  padding: 6px 10px 19px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.brand-mark { width: 39px; height: 39px; flex-shrink: 0; background: transparent; border-radius: 0; }
.brand-mark img { width: 39px; height: 39px; display: block; }
.brand strong { font-size: 15px; letter-spacing: -.035em; font-weight: 700; }
.brand-sub { display: block; color: #a7e1c3; font-size: 10.5px; }
.nav-item { border-radius: 7px; color: #d1eade; padding: 9px 10px; font-weight: 500; }
.nav-item:hover { background: rgba(255,255,255,.10); }
.nav-item.active { background: #2cba7d; color: #083723; font-weight: 700; box-shadow: inset 3px 0 0 #b5f2d2; }
.nav-icon { font-size: 14px; }
.topbar { height: 43px; flex-basis: 43px; background: #fff; border-bottom-color: var(--line-soft); }
.view-head h1, .planner-head h1 { font-weight: 700; color: #173d2e; letter-spacing: -.025em; }
.panel, .table-wrap, .toolbar, .catalog, .calendar-wrap { box-shadow: 0 2px 6px rgba(24, 79, 51, .035); }
.btn-primary { font-weight: 600; }
.btn-primary:focus-visible, .nav-item:focus-visible, .tab:focus-visible, .input:focus-visible {
  outline: 2px solid #53cb97; outline-offset: 2px;
}
.table th, .matrix thead th, .calendar th { background: #edf6f0; }
.table tr:hover td { background: #f2fbf6; }
.matrix thead .sticky-col { background: #edf6f0; }
.cell.work { background: #e4f7ed; }
.cell.work.weekend { background: #d7f0e2; }
.cell.work .cell-id { color: #11633f; }
.cell.weekend, .cal-cell.weekend { background: #f1f6f3; }
.day-head.weekend { background: #e7f0eb; }
.day-head.today { box-shadow: inset 0 -2px 0 #2cba7d; }
.tile { background: #f9fdfb; }
.tile-value { color: #174b36; font-weight: 700; }
.shift-card:hover { background: #eefaf3; }
.shift-card-time { color: #167b53; }
.cov-fill { background: #2cba7d; }
.brand-login { display: flex; align-items: center; gap: 12px; padding-bottom: 7px; }
.brand-login img { height: 46px; width: 46px; }
.brand-login strong { font-size: 22px; line-height: 1.15; color: #164d37; letter-spacing: -.035em; }
.brand-login small { font-size: 11px; color: #56836a; display: block; }
.login-page { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at 75% 10%, #d6f7e6 0%, transparent 36%), #eef8f1; padding: 22px; }
.login-page .panel { width: min(100%, 420px); margin: 0 !important; padding: 25px !important; border-radius: 14px; box-shadow: 0 16px 48px rgba(18, 79, 48, .12); }
.login-page .btn-primary { padding: 10px 14px; }
@media (max-width: 850px) { .nav { width: 178px; flex-basis: 178px; } }
/* GeoPlanner Touch V3 · Rediseño SaaS inspirado en referencias de planificación */
:root { --bg:#f5f7f8; --panel:#fff; --line:#e5e9ee; --line-soft:#edf1f3; --ink:#162a2b; --muted:#718181; --blue:#128b75; --blue-dark:#08735f; --blue-soft:#eaf8f4; --nav:#fff; --nav-soft:#eff8f5; --radius:15px; }
html,body{font-size:13px;background:var(--bg);color:var(--ink)}
.shell{background:var(--bg);gap:0}.nav{width:222px;flex-basis:222px;background:#fff;color:#536566;border-right:1px solid #e8eded;padding:22px 13px;gap:5px;box-shadow:2px 0 15px rgba(20,50,42,.025)}
.brand{padding:7px 10px 27px;gap:12px}.brand-mark{width:38px;height:38px;border-radius:11px;background:#e9f8f3}.brand-mark img{width:28px;height:28px}.brand strong{color:#163e36;font-size:17px;font-weight:700;letter-spacing:-.5px}.brand-sub{color:#81948e;font-size:8px;letter-spacing:1.2px;font-weight:700;margin-top:4px}.nav-item{padding:12px 13px;border-radius:11px;color:#536664;font-size:12px;font-weight:500;transition:background .15s,color .15s}.nav-item:hover{background:#f0f7f4;color:#0b7662}.nav-item.active{color:#087c66;background:#eaf6f2;font-weight:700;box-shadow:inset 3px 0 #149b7d}.nav-icon{font-size:18px;width:21px;color:inherit}
.topbar{height:64px;flex-basis:64px;padding:0 28px;background:#fff;border-bottom:1px solid var(--line)}.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px}.topbar-tag{font-weight:700;color:#0d705e}.topbar .btn{border-radius:9px}.view{padding:26px 30px 40px}.view-head{margin-bottom:22px}.view-head h1{font-size:26px;letter-spacing:-.65px;font-weight:700}.view-head .muted{margin-top:7px}.panel{border-radius:16px;border-color:#e7eded;box-shadow:0 5px 22px rgba(22,45,39,.035);margin-bottom:18px}.panel.pad{padding:22px}.panel h2{font-size:16px;letter-spacing:-.25px;margin-bottom:14px}.btn{border-radius:9px}.btn-primary{background:#078c70;border-color:#078c70}.btn-primary:hover{background:#08735f}.input{border-radius:10px}.tabs,.toolbar{border-radius:12px}.badge{border-radius:8px}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.metric-card{background:#fff;border:1px solid #e7eeeb;border-radius:16px;padding:19px 20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 5px 22px rgba(22,45,39,.03)}.metric-card strong{font-size:27px;font-weight:700;letter-spacing:-.9px;color:#153d32}.metric-card .small{font-size:11px}
.weekly-shell{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;margin-top:12px}.weekly-period{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding:14px 20px;border-bottom:1px solid #e6efeb}.weekly-scroll{overflow:auto;max-width:100%}.week-table{width:100%;border-collapse:separate;border-spacing:0;min-width:980px;table-layout:fixed}.week-table th,.week-table td{border-right:1px solid #edf1ee;border-bottom:1px solid #edf1ee}.week-table thead th{background:#f4faf8;text-align:center;height:60px;color:#57766e;font-weight:600}.week-table .week-worker{width:214px;text-align:left;position:sticky;left:0;background:#fff;z-index:2;padding:12px 15px}.week-table thead .week-worker{background:#f4faf8;z-index:4}.week-dow,.week-date{display:block}.week-dow{font-size:11px;text-transform:uppercase}.week-date{font-size:19px;margin-top:3px;color:#204d43}.week-person{display:flex;align-items:center;gap:12px}.week-person strong{display:block;font-size:12px}.week-person small{font-size:10px;display:block;font-weight:400;color:#87928f;margin-top:5px}.avatar-initials{display:grid;place-items:center;width:37px;height:37px;flex:none;border-radius:50%;background:#dff5ed;color:#0b7f6b;font-size:11px;font-weight:700}.week-cell{vertical-align:top;cursor:pointer;padding:5px;height:94px;min-width:115px}.week-cell:hover{background:#f7fbf9}.week-cell.selected{outline:2px solid #159d7c;outline-offset:-2px;background:#ebf8f3}.week-shift{min-height:76px;border-radius:10px;padding:10px 8px;display:flex;flex-direction:column;gap:5px;border-left:3px solid #18a68a;background:#edfaf6;color:#0a7662;overflow:hidden}.week-shift strong{font-size:11px;line-height:1.3}.week-shift span{font-size:10px}.week-shift small{font-size:9px;opacity:.83}.week-shift.shift-empty{background:transparent;border:1px dashed transparent;align-items:center;justify-content:center;color:#b0beb9}.week-shift.shift-empty:hover{border-color:#91cdb9}.week-add{font-size:20px!important}.week-shift.shift-descanso{background:#f3f5f6;border-left-color:#9ea9aa;color:#667679}.week-shift.shift-unmatched{background:#fff2e8;border-left-color:#e9a14b;color:#ac651b}.week-shift.shift-licencia,.week-shift.shift-vacaciones,.week-shift.shift-permiso,.week-shift.shift-ausencia{background:#ffeff0;border-left-color:#e77887;color:#a94457}.week-summary{background:#f4faf8;font-weight:700;text-align:center;color:#0c755d}.week-table tfoot th{background:#f4faf8!important;font-weight:700}
.coverage-filter{display:flex;align-items:end;gap:16px;flex-wrap:wrap}.coverage-filter label{display:flex;flex-direction:column;gap:6px;min-width:200px;font-weight:600}.coverage-filter label:first-child{flex:1;min-width:230px}.staff-chart{height:255px;display:flex;align-items:end;gap:7px;padding:25px 8px 8px;border-bottom:1px solid #ddeae4;background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#f0f3f2 50px);overflow-x:auto}.staff-hour{flex:1;min-width:37px;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:9px;font-size:10px;color:#718580}.staff-bars{height:100%;width:100%;display:flex;gap:4px;align-items:end;justify-content:center}.staff-bars>div{width:38%;min-height:2px;border-radius:4px 4px 0 0}.staff-required{background:#b7c5c5}.staff-scheduled{background:#18ac88}.legend-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin:6px 0 12px;font-size:11px}.legend-row span:first-child{color:#889997}.legend-row span:nth-child(2){color:#0e9c7b}.heatmap-table th,.heatmap-table td{text-align:center;padding:10px 12px;white-space:nowrap}.heatmap-table td:first-child,.heatmap-table th:first-child{text-align:left;font-weight:600}.heat-negative{background:#fde8ed!important;color:#af3154!important;font-weight:700}.heat-positive{background:#e0f3ff!important;color:#167ba5!important;font-weight:700}.heat-equal{background:#e5f7ec!important;color:#18825e!important;font-weight:700}.rules-editor{display:grid;gap:14px}.rule-row{display:grid;grid-template-columns:1fr 1fr 1fr .7fr auto;gap:8px;align-items:center}
.audit-filters{display:grid;grid-template-columns:2fr repeat(3,1fr) 1.1fr 1.1fr;gap:10px;align-items:center;margin-bottom:18px}.audit-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin:0 0 15px}.audit-actions>span{margin-right:auto}.audit-table{min-width:1050px}.audit-table td{vertical-align:top;padding-top:13px;padding-bottom:13px}.audit-table strong{font-size:12px}.audit-table td .small{margin-top:4px}.audit-table td:nth-child(4),.audit-table td:nth-child(5){max-width:160px;overflow-wrap:anywhere}
.planner-head{border-radius:16px!important;background:white}.planner-body{gap:16px}.toolbar{background:#fff!important;border-radius:12px!important}.grid-host{min-width:0}.panel-head-inline{gap:12px}
@media(max-width:1300px){.metric-grid{grid-template-columns:repeat(2,1fr)}.audit-filters{grid-template-columns:repeat(3,1fr)}.nav{width:195px;flex-basis:195px}.view{padding:19px}}
@media(max-width:800px){.nav{width:62px;flex-basis:62px;padding:12px 6px}.nav-item{justify-content:center}.nav-item span:last-child,.brand>div{display:none}.nav-icon{font-size:20px}.topbar{padding:0 10px}.topbar .muted,.topbar-tag{display:none}.view{padding:12px}.metric-grid{grid-template-columns:1fr 1fr}.audit-filters{grid-template-columns:1fr 1fr}.coverage-filter{display:grid}.week-table{min-width:930px}}
.planner-insights{margin:0 0 18px}.insight-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.insight-card{background:#fff;border:1px solid #e7eeeb;border-radius:13px;padding:15px;display:flex;flex-direction:column;gap:8px;min-width:0}.insight-card strong{font-size:20px;color:#0a715c;letter-spacing:-.5px}.insight-card small{font-size:10px}.insights-trend{background:#fff;border:1px solid #e7eeeb;border-radius:14px;margin-top:12px;padding:14px 18px}.workload-mini{height:80px;display:flex;gap:4px;margin-top:16px;overflow:auto}.mini-day{flex:1;min-width:12px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:8px;color:#718581}.mini-track{height:57px;width:100%;display:flex;align-items:flex-end}.mini-fill{background:#71d8ba;width:100%;border-radius:3px 3px 0 0;min-height:2px}.mini-fill.mini-alert{background:#f5ae8a}@media(max-width:1300px){.insight-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.insight-grid{grid-template-columns:repeat(2,1fr)}}
.audit-filters{grid-template-columns:2fr repeat(5,minmax(110px,1fr)) 1.1fr 1.1fr}@media(max-width:1500px){.audit-filters{grid-template-columns:repeat(4,minmax(150px,1fr))}}@media(max-width:820px){.audit-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
.weekly-filters{display:flex;gap:10px;padding:12px 18px;border-bottom:1px solid #ecf0ed;background:#fff}.weekly-filters .input:first-child{flex:1}.weekly-filters select{max-width:180px}@media(max-width:700px){.weekly-filters{flex-wrap:wrap}.weekly-filters .input{flex:1;min-width:140px}}
/* V4: módulos operativos */
.ops-field{display:grid;gap:5px;min-width:0;color:var(--muted);font-weight:500;font-size:12px}
.ops-field input,.ops-field select,.ops-search{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit}
.ops-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ops-form>.ops-field:nth-child(4),.ops-form>p{grid-column:1/-1}
.ops-search{max-width:345px}
.ops-suggestions{display:grid;gap:9px}
.ops-suggestion{border:1px solid var(--line);border-radius:9px;padding:13px;border-left:4px solid var(--blue)}
.ops-suggestion.ops-error{border-left-color:var(--red)}.ops-suggestion.ops-warn{border-left-color:var(--amber)}
.ops-errors{max-height:350px;overflow:auto;white-space:pre-wrap}
.nav{overflow-y:auto}
@media(max-width:700px){.ops-form{grid-template-columns:1fr}.ops-search{max-width:190px}}