/* ==========================================================================
   GT1 — Hoja de estilos
   Paleta: azules corporativos, negro y escala de grises. Sin dependencias.
   ========================================================================== */
:root {
  --blue-950: #071631;
  --blue-900: #0a1f44;
  --blue-800: #0e2c61;
  --blue-700: #123d82;
  --blue-600: #1650a8;
  --blue-500: #1f63c9;
  --blue-400: #4a86e0;
  --blue-200: #bcd3f4;
  --blue-100: #e3edfb;
  --blue-50:  #f2f7fd;

  --black: #0b0d10;
  --g-950: #111318;
  --g-900: #181b21;
  --g-800: #262a32;
  --g-700: #3a3f48;
  --g-600: #575d68;
  --g-500: #777d88;
  --g-400: #a1a6af;
  --g-300: #c8ccd2;
  --g-200: #e1e4e8;
  --g-100: #edeff2;
  --g-50:  #f5f6f8;
  --white: #ffffff;

  --ok: #1d7f55;   --ok-bg: #e6f4ed;
  --warn: #9a6512; --warn-bg: #fbf1df;
  --bad: #b8323a;  --bad-bg: #fbe9ea;
  --info: var(--blue-600); --info-bg: var(--blue-100);

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(11, 13, 16, .05);
  --shadow: 0 1px 2px rgba(11, 13, 16, .04), 0 4px 16px rgba(11, 13, 16, .05);
  --shadow-lg: 0 12px 40px rgba(7, 22, 49, .18);
  --sidebar-w: 264px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, "SFMono-Regular", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--g-900); background: var(--g-50); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.25; color: var(--black); letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 650; }
h2 { font-size: 15px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
p { margin: 0; }
small, .small { font-size: 12px; }
.muted { color: var(--g-500); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.center, .table .center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bad-text { color: var(--bad); font-weight: 600; }
.link { color: var(--blue-600); font-weight: 500; }
.link:hover { color: var(--blue-800); text-decoration: underline; }
[hidden] { display: none !important; }

/* Íconos */
.ic { width: 18px; height: 18px; flex: none; vertical-align: middle; }
.ic.sm { width: 15px; height: 15px; }
.ic.xs { width: 12px; height: 12px; }
.ic.xl { width: 40px; height: 40px; stroke-width: 1.4; }

/* ---------- Estructura ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--black); color: var(--g-400);
  display: flex; flex-direction: column; z-index: 40; border-right: 1px solid #000;
}
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.content { padding: 28px 32px 48px; max-width: 1440px; width: 100%; margin: 0 auto; }

.brand { display: flex; align-items: center; gap: 12px; padding: 20px 20px 18px; border-bottom: 1px solid var(--g-900); }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; width: 38px; height: 38px; border-radius: 10px;
  background: linear-gradient(140deg, var(--blue-500), var(--blue-800)); color: #fff;
  font-weight: 800; font-size: 14px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand-mark b { color: var(--blue-200); }
.brand-mark.lg { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { color: #fff; font-size: 16px; letter-spacing: .02em; }
.brand-text small { color: var(--g-500); font-size: 11px; }

.nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; scrollbar-width: thin; scrollbar-color: var(--g-800) transparent; }
.nav-section { margin: 18px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--g-600); }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: var(--radius-sm);
  color: var(--g-400); font-weight: 500; cursor: pointer; list-style: none; position: relative; transition: background .15s, color .15s;
}
.nav-link::-webkit-details-marker { display: none; }
.nav-link:hover { background: var(--g-900); color: #fff; }
.nav-link.active, .nav-link.current { color: #fff; }
.nav-link.active { background: rgba(31, 99, 201, .22); }
.nav-link.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue-400); }
.nav-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-link .chev { width: 14px; height: 14px; transition: transform .2s; opacity: .6; }
.nav-group[open] > summary .chev { transform: rotate(90deg); }
.nav-sub { display: flex; flex-direction: column; padding: 2px 0 6px 29px; margin-left: 10px; border-left: 1px solid var(--g-800); }
.nav-sub a { padding: 6px 10px; border-radius: 6px; color: var(--g-500); font-size: 13px; }
.nav-sub a:hover { color: #fff; background: var(--g-900); }
.nav-sub a.active { color: #fff; background: rgba(31, 99, 201, .22); font-weight: 500; }
.nav-empty { padding: 8px 10px; font-size: 12px; color: var(--g-600); }
.sidebar-foot { padding: 12px 20px; font-size: 11px; color: var(--g-700); border-top: 1px solid var(--g-900); }

.topbar {
  position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 32px;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--g-200);
}
.topbar-title { font-weight: 600; color: var(--g-700); }
.topbar-right { margin-left: auto; }

.usermenu { position: relative; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 5px 8px 5px 5px; border-radius: 999px; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: var(--g-100); }
.usermenu-name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 600; font-size: 13px; }
.usermenu-name small { color: var(--g-500); font-weight: 400; font-size: 11.5px; }
.usermenu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: #fff; border: 1px solid var(--g-200);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.usermenu-pop a, .usermenu-pop button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; border: 0; background: none;
  font: inherit; color: var(--g-800); cursor: pointer; text-align: left;
}
.usermenu-pop a:hover, .usermenu-pop button:hover { background: var(--g-100); }
.usermenu-pop form.logout button { color: var(--bad); }

.avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--blue-100); color: var(--blue-700); font-weight: 700; font-size: 12.5px; letter-spacing: .02em;
}
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 72px; height: 72px; font-size: 24px; background: linear-gradient(140deg, var(--blue-500), var(--blue-800)); color: #fff; }

.icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent;
  color: var(--g-600); cursor: pointer; transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--g-100); color: var(--black); }
.icon-btn.danger:hover { background: var(--bad-bg); color: var(--bad); }
.only-mobile { display: none; }
.scrim { display: none; }

/* ---------- Encabezados de página ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin-top: 4px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g-500); margin-bottom: 6px; }
.crumbs a:hover { color: var(--blue-600); }
.crumbs span { color: var(--g-700); }
.count { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--g-100); color: var(--g-600); font-size: 13px; font-weight: 600; vertical-align: middle; }
.head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.head-actions form { margin: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px;
  border-radius: var(--radius-sm); border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 13.5px;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn .ic { width: 16px; height: 16px; }
.btn.sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 1px 2px rgba(18, 61, 130, .3); }
.btn-primary:hover { background: var(--blue-700); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--blue-200); }
.btn-ghost { background: #fff; border-color: var(--g-300); color: var(--g-800); }
.btn-ghost:hover { border-color: var(--g-400); background: var(--g-50); }
.btn-text { background: transparent; color: var(--g-600); }
.btn-text:hover { color: var(--black); background: var(--g-100); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #9c2930; }
.btn-danger-ghost { background: #fff; border-color: var(--g-300); color: var(--bad); }
.btn-danger-ghost:hover { background: var(--bad-bg); border-color: #e9b9bc; }

/* ---------- Tarjetas ---------- */
.card { background: #fff; border: 1px solid var(--g-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--g-100); }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.pad { padding: 18px 20px; }
.pad-x { padding: 10px 20px 0; }

/* ---------- Avisos ---------- */
.flash {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 16px;
  border: 1px solid; font-weight: 500;
}
.flash > span { flex: 1; }
.flash-success { background: var(--ok-bg); border-color: #bfe2cf; color: #145c3d; }
.flash-error { background: var(--bad-bg); border-color: #efc2c5; color: #8f2329; }
.flash-warning { background: var(--warn-bg); border-color: #efd8ac; color: #7a4f0d; }
.flash-info { background: var(--blue-50); border-color: var(--blue-200); color: var(--blue-800); }
.flash-x { border: 0; background: none; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
.flash-x:hover { opacity: 1; }

.alerts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-bottom: 20px; }
.alert { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--g-200); background: #fff; font-weight: 500; transition: border-color .15s, transform .15s; }
.alert span { flex: 1; }
.alert:hover { transform: translateY(-1px); border-color: var(--g-300); }
.alert-warn .ic:first-child { color: var(--warn); }
.alert-bad .ic:first-child { color: var(--bad); }
.alert-info .ic:first-child { color: var(--blue-500); }

/* ---------- Pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.6; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-info { background: var(--info-bg); color: var(--blue-700); }
.pill-neutral { background: var(--g-100); color: var(--g-600); }

/* ---------- Inicio ---------- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 4px; }
.module-card { margin: 0; overflow: hidden; }
.module-card header { display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; }
.module-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--blue-50); color: var(--blue-600); flex: none; }
.module-ic.sm { width: 26px; height: 26px; border-radius: 7px; vertical-align: middle; }
.module-ic.sm .ic { width: 15px; height: 15px; }
.module-items { list-style: none; margin: 0; padding: 0 10px 12px; }
.module-items li { display: flex; align-items: center; gap: 4px; }
.module-items li > a:first-child { flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; color: var(--g-700); }
.module-items li > a:first-child:hover { background: var(--g-50); color: var(--black); }
.module-items b { font-variant-numeric: tabular-nums; color: var(--g-900); font-size: 13px; }
.mini-add { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--g-500); }
.mini-add:hover { background: var(--blue-50); color: var(--blue-600); }
.module-grid + .card { margin-top: 20px; }

.timeline { list-style: none; margin: 0; padding: 8px 20px 14px; }
.timeline li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--g-100); }
.timeline li:last-child { border-bottom: 0; }
.timeline li > span:nth-child(2) { flex: 1; }
.timeline.compact li { font-size: 13px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--g-300); }
.dot-ok { background: var(--ok); } .dot-bad { background: var(--bad); } .dot-info { background: var(--blue-500); }

.empty { text-align: center; padding: 48px 20px; color: var(--g-500); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty .ic.xl { color: var(--g-300); }
.empty h3 { color: var(--g-800); }

/* ---------- Toolbar / filtros ---------- */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 10px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 260px; }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--g-400); }
.search input { padding-left: 36px; }
.toolbar select, .toolbar input:not([type=hidden]) { width: auto; }
.toolbar .search input { width: 100%; }
.toolbar .narrow { width: 110px; }
.toolbar .is-set { border-color: var(--blue-400); background-color: var(--blue-50); }
.toolbar label.inline { display: flex; align-items: center; gap: 6px; color: var(--g-600); font-size: 13px; }

/* ---------- Formularios ---------- */
input, select, textarea {
  font: inherit; color: var(--g-900); width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--g-300); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, box-shadow .15s; outline: none;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; min-height: 90px; line-height: 1.5; }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777d88' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
input:hover, select:hover, textarea:hover { border-color: var(--g-400); }
input:focus, select:focus, textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(31, 99, 201, .15); }
input:disabled { background: var(--g-50); color: var(--g-500); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--blue-600); cursor: pointer; padding: 0; }

.form-card { padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .field > span { font-weight: 600; font-size: 13px; color: var(--g-800); }
.field-bool { justify-content: flex-end; }
.req { color: var(--bad); font-style: normal; }
.hint { color: var(--g-500); }
.hint.warn { color: var(--warn); }
.error-msg { color: var(--bad); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.has-error input:focus, .has-error select:focus, .has-error textarea:focus { box-shadow: 0 0 0 3px rgba(184, 50, 58, .14); }
.input-prefix { position: relative; }
.input-prefix span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--g-500); }
.input-prefix input { padding-left: 26px; }
.input-icon { position: relative; }
.input-icon > .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--g-400); pointer-events: none; }
.input-icon input { padding-left: 38px; height: 44px; }
.input-icon .reveal { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--g-500); cursor: pointer; padding: 6px; border-radius: 6px; }
.input-icon .reveal:hover { color: var(--black); background: var(--g-100); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--g-100); flex-wrap: wrap; }
.form-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.form-actions.sticky { position: sticky; bottom: 0; background: rgba(245,246,248,.94); backdrop-filter: blur(6px); padding: 14px 0; margin-top: 0; border-top: 1px solid var(--g-200); z-index: 5; }
.stack { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.stack-lg { display: flex; flex-direction: column; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; color: var(--g-800); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { width: 38px; height: 22px; border-radius: 999px; background: var(--g-300); position: relative; transition: background .2s; flex: none; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s; }
.switch input:checked + .switch-ui { background: var(--blue-600); }
.switch input:checked + .switch-ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-ui { box-shadow: 0 0 0 3px var(--blue-200); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.check-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--g-200); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.check-card:hover { border-color: var(--g-300); }
.check-card:has(input:checked) { border-color: var(--blue-400); background: var(--blue-50); }
.check-card span { display: flex; flex-direction: column; }
.check-card.disabled { opacity: .6; }

progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--g-100); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--g-100); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--blue-500); border-radius: 999px; transition: width .3s; }
progress::-moz-progress-bar { background: var(--blue-500); border-radius: 999px; }
.strength { display: flex; flex-direction: column; gap: 4px; }
.strength progress { height: 5px; }
.strength[data-level="1"] progress::-webkit-progress-value { background: var(--bad); }
.strength[data-level="1"] progress::-moz-progress-bar { background: var(--bad); }
.strength[data-level="2"] progress::-webkit-progress-value { background: var(--warn); }
.strength[data-level="2"] progress::-moz-progress-bar { background: var(--warn); }
.strength[data-level="4"] progress::-webkit-progress-value { background: var(--ok); }
.strength[data-level="4"] progress::-moz-progress-bar { background: var(--ok); }

/* ---------- Tablas ---------- */
.table-card { overflow: hidden; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--g-500); background: var(--g-50); padding: 10px 14px; border-bottom: 1px solid var(--g-200); white-space: nowrap; }
.table th a { display: inline-flex; align-items: center; gap: 4px; }
.table th a:hover { color: var(--black); }
.table th.sorted { color: var(--blue-700); }
.table th.sorted.asc a::after { content: "↑"; }
.table th.sorted.desc a::after { content: "↓"; }
.table td { padding: 11px 14px; border-bottom: 1px solid var(--g-100); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[data-href] { cursor: pointer; }
.table tbody tr:hover td { background: var(--blue-50); }
.table td.t-money, .table td.t-decimal, .table td.t-int, .table th.num, .table td.num { text-align: right; }
.table.compact td, .table.compact th { padding: 8px 20px; }
.actions-col { width: 1%; white-space: nowrap; text-align: right; }
.row-actions { display: inline-flex; gap: 2px; }
.row-actions form { margin: 0; }
.progress-cell { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.progress-cell progress { width: 80px; }
.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell div { display: flex; flex-direction: column; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--g-100); flex-wrap: wrap; }
.pager > div { display: flex; gap: 4px; }
.audit-table pre { margin: 6px 0 0; padding: 10px; background: var(--g-50); border-radius: 8px; font-family: var(--mono); font-size: 11.5px; max-width: 520px; overflow: auto; white-space: pre-wrap; }
.audit-table summary { cursor: pointer; color: var(--blue-600); font-weight: 500; }

.perm-table td, .perm-table th { padding: 9px 16px; }
.perm-module-row th { background: var(--g-100); color: var(--g-800); font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.perm-row td:first-child { padding-left: 52px; color: var(--g-700); }
.perm-table tbody tr:hover td { background: var(--blue-50); }

/* ---------- Detalle ---------- */
.view-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.side-col .card { margin-bottom: 20px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 8px 20px; }
.detail-grid > div { padding: 12px 0; border-bottom: 1px solid var(--g-100); }
.detail-grid.one { grid-template-columns: 1fr; }
.detail-grid dt { font-size: 12px; color: var(--g-500); font-weight: 500; margin-bottom: 3px; }
.detail-grid dd { margin: 0; font-weight: 500; color: var(--g-900); word-break: break-word; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 12px 20px 16px; font-size: 12px; color: var(--g-500); }
.meta span { display: inline-flex; align-items: center; gap: 6px; }
.related { padding: 12px 20px; border-bottom: 1px solid var(--g-100); }
.related:last-child { border-bottom: 0; }
.related-head { display: flex; align-items: center; gap: 8px; }
.related-head .link { flex: 1; }
.related-head .via { display: block; font-size: 11.5px; color: var(--g-500); font-weight: 400; }
.related-empty { padding: 12px 20px 16px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.related-empty > span:first-child { width: 100%; font-size: 12px; color: var(--g-500); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--g-300); color: var(--g-600); font-size: 12px; }
a.chip:hover { border-color: var(--blue-400); color: var(--blue-700); background: var(--blue-50); }
.related-list { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.related-list li a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--g-700); }
.related-list li a:hover { background: var(--g-50); color: var(--blue-700); }
.related-list .more a { color: var(--blue-600); }
.profile-card { text-align: center; padding-top: 24px; }
.profile-card h2 { margin-top: 12px; font-size: 17px; }
.profile-card .detail-grid { text-align: left; }

/* ---------- Roles ---------- */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.role-card { margin: 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.role-card header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.role-card p { min-height: 40px; }
.role-stats { display: flex; justify-content: space-between; color: var(--g-600); font-size: 13px; }
.role-stats b { color: var(--black); }
.role-card footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.role-card footer form { margin: 0; }

/* ---------- Tablero ejecutivo ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 16px; background: #fff; border: 1px solid var(--g-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s; overflow: hidden; }
a.kpi:hover { border-color: var(--blue-200); transform: translateY(-1px); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--blue-500); }
.kpi.warn::before { background: var(--warn); }
.kpi.bad::before { background: var(--bad); }
.kpi-ic { position: absolute; right: 16px; top: 16px; color: var(--g-300); }
.kpi-label { color: var(--g-500); font-size: 12.5px; font-weight: 600; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--black); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--g-500); }
.kpi.warn .kpi-sub { color: var(--warn); }
.kpi.bad .kpi-sub { color: var(--bad); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dash-grid .card { margin: 0; }
.bars { list-style: none; margin: 0; padding: 8px 20px 16px; }
.bars li { padding: 10px 0; display: flex; flex-direction: column; gap: 5px; }
.bar-label { display: flex; justify-content: space-between; gap: 10px; font-weight: 500; }
.bars li.over progress::-webkit-progress-value { background: var(--bad); }
.bars li.over progress::-moz-progress-bar { background: var(--bad); }
.bars li.risk progress::-webkit-progress-value { background: var(--warn); }
.bars li.risk progress::-moz-progress-bar { background: var(--warn); }
.prio-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 20px; }
.prio { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; border-radius: 10px; background: var(--g-50); }
.prio strong { font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.prio span { font-size: 12px; color: var(--g-500); font-weight: 600; }
.prio-bad strong { color: var(--bad); } .prio-warn strong { color: var(--warn); } .prio-info strong { color: var(--blue-600); } .prio-neutral strong { color: var(--g-600); }

/* ---------- Login ---------- */
.blank { background: var(--g-50); }
.login { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.login-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 600px at 10% 110%, var(--blue-700) 0%, transparent 60%), linear-gradient(160deg, var(--black) 0%, var(--blue-950) 55%, var(--blue-900) 100%); display: flex; align-items: center; padding: 56px; }
.login-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); pointer-events: none; }
.login-hero-inner { position: relative; z-index: 1; max-width: 460px; }
.login-hero h1 { color: #fff; font-size: 38px; font-weight: 700; margin: 28px 0 14px; letter-spacing: -.03em; }
.login-hero h1 span { color: var(--blue-400); }
.login-hero p { color: var(--g-400); font-size: 15.5px; }
.login-points { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; color: var(--g-300); }
.login-points li { display: flex; align-items: center; gap: 12px; }
.login-points .ic { color: var(--blue-400); }
.login-panel { display: grid; place-items: center; padding: 40px 24px; background: #fff; }
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.login-card h2 { font-size: 24px; font-weight: 700; }
.login-card .flash { margin: 0; }
.caps { color: var(--warn); display: flex; align-items: center; gap: 6px; font-weight: 500; }
.login-card .btn { height: 44px; font-size: 14.5px; }
.login-foot { display: flex; gap: 8px; color: var(--g-500); font-size: 12px; align-items: flex-start; }

/* ---------- Error / Instalador ---------- */
.error-page { max-width: 520px; margin: 10vh auto; text-align: center; padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.error-code { font-size: 72px; font-weight: 800; line-height: 1; color: var(--blue-100); letter-spacing: -.04em; -webkit-text-stroke: 1px var(--blue-200); }
.error-page p { color: var(--g-600); }
.error-actions { margin-top: 10px; }
.install { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: linear-gradient(160deg, var(--black), var(--blue-950)); }
.install-card { width: 100%; max-width: 640px; padding: 28px; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.install-card .stack { padding: 0; }
.install-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.small-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--g-500); margin-top: 6px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { display: flex; align-items: center; gap: 8px; }
.checklist li.ok .ic { color: var(--ok); }
.checklist li.bad { color: var(--bad); }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .view-layout { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid .span-2 { grid-column: auto; }
}
@media (max-width: 960px) {
  .sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  .sidebar-open .sidebar { transform: none; }
  .sidebar-open .scrim { display: block; position: fixed; inset: 0; background: rgba(7, 22, 49, .45); z-index: 35; }
  .main { margin-left: 0; }
  .only-mobile { display: inline-grid; }
  .topbar { padding: 0 16px; }
  .content { padding: 20px 16px 40px; }
  .usermenu-name { display: none; }
  .login { grid-template-columns: 1fr; }
  .login-hero { padding: 36px 28px; }
  .login-hero h1 { font-size: 28px; margin-top: 18px; }
  .login-points { display: none; }
}
@media (max-width: 640px) {
  .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .prio-row { grid-template-columns: repeat(2, 1fr); }
  .page-head { align-items: flex-start; }
}
@media print {
  .sidebar, .topbar, .head-actions, .toolbar, .row-actions, .actions-col { display: none !important; }
  .main { margin: 0; }
  .card { box-shadow: none; }
}

/* ---------- Diálogo de confirmación ---------- */
.confirm-dialog { border: 0; border-radius: 14px; padding: 0; width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); }
.confirm-dialog::backdrop { background: rgba(7, 22, 49, .45); backdrop-filter: blur(2px); }
.confirm-dialog form { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.confirm-msg { font-size: 15px; color: var(--g-900); font-weight: 500; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ==========================================================================
   Diseño institucional (base): azul marino formal, líneas finas, densidad compacta
   ========================================================================== */
:root {
  --navy: #0b2349;
  --navy-2: #0f2f61;
  --radius: 6px;
  --radius-sm: 4px;
  --sidebar-w: 240px;
}
body { background: #eef1f5; font-size: 13.5px; }

/* Menú marino */
.sidebar { background: linear-gradient(180deg, var(--navy) 0%, #081a37 100%); border-right: 0; color: #9db1d1; }
.brand { border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { background: #fff; color: var(--navy); border-radius: 6px; box-shadow: none; }
.brand-mark b { color: var(--blue-500); }
.brand-text small { color: #7f96bb; }
.nav-section { color: #6d86ae; }
.nav-link { color: #b8c7df; border-radius: 4px; }
.nav-link:hover { background: rgba(255,255,255,.07); }
.nav-link.active { background: rgba(255,255,255,.12); }
.nav-link.active::before { background: #fff; left: -12px; width: 3px; }
.nav-sub { border-left-color: rgba(255,255,255,.12); }
.nav-sub a { color: #93a8c9; }
.nav-sub a:hover { background: rgba(255,255,255,.07); }
.nav-sub a.active { background: rgba(255,255,255,.12); }
.sidebar-foot { border-top-color: rgba(255,255,255,.08); color: #6d86ae; }

/* Barra superior con línea institucional */
.topbar { height: 54px; background: #fff; border-bottom: 1px solid var(--g-200); box-shadow: inset 0 -3px 0 var(--blue-600); }
.topbar-title { color: var(--navy); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.avatar { background: var(--navy); color: #fff; border-radius: 6px; }

.content { padding: 22px 28px 40px; }
h1 { font-size: 20px; color: var(--navy); font-weight: 700; }
.page-head { padding-bottom: 14px; border-bottom: 1px solid var(--g-200); margin-bottom: 18px; }
.count { border-radius: 4px; background: var(--navy); color: #fff; font-size: 12px; }

/* Tarjetas con filete superior */
.card { border-radius: 6px; border-color: #d9dee6; box-shadow: none; }
.card-head { background: #f7f9fb; border-bottom-color: #e3e7ed; padding: 11px 16px; }
.card-head h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.module-card { border-top: 3px solid var(--blue-600); }
.module-card header { border-bottom: 1px solid var(--g-100); padding: 14px 16px; }
.module-card header h2 { text-transform: uppercase; font-size: 12.5px; letter-spacing: .06em; color: var(--navy); }
.module-ic { background: var(--navy); color: #fff; border-radius: 6px; width: 32px; height: 32px; }
.module-items { padding: 6px 8px 10px; }
.module-items li > a:first-child { padding: 6px 8px; border-radius: 4px; }
.module-items b { color: var(--navy); }

/* Botones rectos */
.btn { border-radius: 4px; height: 34px; font-size: 13px; }
.btn-primary { background: var(--navy-2); box-shadow: none; }
.btn-primary:hover { background: var(--navy); }
.btn-ghost { border-color: #c9d1dc; }
input, select, textarea { height: 34px; border-radius: 4px; border-color: #c9d1dc; }
.input-icon input { height: 40px; }
.pill { border-radius: 4px; font-size: 11.5px; padding: 1px 7px; }

/* Tabla tipo reporte */
.table th { background: var(--navy); color: #dbe5f5; border-bottom: 0; font-size: 11px; padding: 9px 12px; }
.table th a:hover { color: #fff; }
.table th.sorted { color: #fff; }
.table td { padding: 8px 12px; }
.table tbody tr:nth-child(even) td { background: #f8fafc; }
.table tbody tr:hover td { background: #eaf1fc; }
.perm-module-row th { background: #e7ecf3; color: var(--navy); }

/* KPIs */
.kpi { border-radius: 6px; box-shadow: none; border-color: #d9dee6; }
.kpi::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 3px; background: var(--navy-2); }
.kpi-label { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; color: var(--g-600); }
.kpi-value { color: var(--navy); }
.alert { border-radius: 4px; border-left: 3px solid var(--blue-500); }
.alert-warn { border-left-color: var(--warn); }
.alert-bad { border-left-color: var(--bad); }

/* Login institucional: panel marino con franja */
.login { grid-template-columns: 1fr 1fr; }
.login-hero { background: var(--navy); }
.login-grid { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 14px); mask-image: none; }
.login-hero .brand-mark { background: #fff; color: var(--navy); border-radius: 8px; }
.login-hero h1 span { color: #8fb6ff; }
.login-panel { background: #fff; box-shadow: inset 6px 0 0 var(--blue-600); }
.login-card h2 { color: var(--navy); text-transform: uppercase; letter-spacing: .05em; font-size: 18px; }
.login-card .btn { border-radius: 4px; }

/* ---------- Controles de apariencia ---------- */
.topbar-right { display: flex; align-items: center; gap: 6px; }
.theme-quick { margin: 0; }
.when-dark { display: none; }
html[data-mode="oscuro"] .when-dark { display: inline-flex; }
html[data-mode="oscuro"] .when-light { display: none; }
.theme-seg { padding: 8px 10px 6px; border-top: 1px solid var(--g-100); margin-top: 4px; }
.theme-seg-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-500); margin-bottom: 6px; }
.seg { display: flex; gap: 2px; padding: 3px; background: var(--g-100); border-radius: 6px; }
.usermenu-pop .seg button, .seg button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 8px; border: 0; border-radius: 4px;
  background: transparent; color: var(--g-600); font: inherit; font-size: 12px; cursor: pointer; width: auto;
}
.seg button:hover { color: var(--g-900); }
.seg button.on { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.usermenu-pop .theme-seg button { color: var(--g-600); }
.usermenu-pop .theme-seg button.on { color: var(--navy); }
.login-panel { position: relative; }
.login-theme { position: absolute; right: 20px; bottom: 18px; border: 0; padding: 0; }
.login-theme .seg button { padding: 6px 10px; }
.theme-cards { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.theme-card {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: inherit;
  background: transparent; border: 1px solid var(--g-200); border-radius: 6px; cursor: pointer; transition: border-color .15s, background .15s;
}
.theme-card:hover { border-color: var(--g-400); }
.theme-card.on { border-color: var(--blue-600); background: var(--blue-50); }
.theme-card > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.theme-card strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.theme-card .tick { color: var(--blue-600); }
.theme-swatch { width: 44px; height: 32px; border-radius: 5px; flex: none; border: 1px solid var(--g-300); }
.sw-claro { background: linear-gradient(90deg, #0b2349 0 30%, #eef1f5 30%); }
.sw-oscuro { background: linear-gradient(90deg, #060d19 0 30%, #0f1828 30%); }
.sw-sistema { background: linear-gradient(135deg, #0b2349 0 15%, #eef1f5 15% 50%, #0f1828 50%); }

/* ==========================================================================
   MODO OSCURO institucional — se activa con html[data-mode="oscuro"]
   La escala de grises se invierte; lo demás se ajusta puntualmente.
   ========================================================================== */
html[data-mode="oscuro"] {
  color-scheme: dark;
  --black: #f1f4f9;
  --g-950: #f6f8fb; --g-900: #e4e9f1; --g-800: #d3dae6; --g-700: #bcc6d6; --g-600: #a0adc2;
  --g-500: #8090a9; --g-400: #5d6d88; --g-300: #2f3f5e; --g-200: #223150; --g-100: #18243d; --g-50: #0e1729;
  --blue-50: rgba(77, 140, 255, .10); --blue-100: rgba(77, 140, 255, .16); --blue-200: #2d4d82;
  --blue-700: #9cc0ff; --blue-800: #b8d1ff;
  --ok: #3cc795;   --ok-bg: rgba(60, 199, 149, .13);
  --warn: #f2b84b; --warn-bg: rgba(242, 184, 75, .13);
  --bad: #f2737b;  --bad-bg: rgba(242, 115, 123, .14);
  --surface: #111c30;
  --surface-2: #16233b;
  --line: #22314f;
}
html[data-mode="oscuro"] body, html[data-mode="oscuro"] .blank { background: #0a1222; }
html[data-mode="oscuro"] .sidebar { background: linear-gradient(180deg, #071733 0%, #050c1a 100%); }
html[data-mode="oscuro"] .brand-mark { background: #e8eef8; }
html[data-mode="oscuro"] .topbar { background: var(--surface); border-bottom-color: var(--line); box-shadow: inset 0 -3px 0 #2f6fe0; }
html[data-mode="oscuro"] .topbar-title, html[data-mode="oscuro"] h1, html[data-mode="oscuro"] .kpi-value,
html[data-mode="oscuro"] .module-card header h2, html[data-mode="oscuro"] .card-head h2, html[data-mode="oscuro"] .module-items b,
html[data-mode="oscuro"] .login-card h2 { color: #e9eff9; }
html[data-mode="oscuro"] .avatar { background: #1e3a6e; color: #dbe7fb; }
html[data-mode="oscuro"] .avatar.lg { background: linear-gradient(140deg, #2f6fe0, #0f2f61); }
html[data-mode="oscuro"] .usermenu-pop, html[data-mode="oscuro"] .confirm-dialog { background: var(--surface); border-color: var(--line); }
html[data-mode="oscuro"] .usermenu-pop form.logout button { color: var(--bad); }
html[data-mode="oscuro"] .seg { background: #0a1222; }
html[data-mode="oscuro"] .seg button.on { background: var(--surface-2); color: #e9eff9; }
html[data-mode="oscuro"] .theme-swatch { border-color: var(--line); }

html[data-mode="oscuro"] .card, html[data-mode="oscuro"] .kpi, html[data-mode="oscuro"] .alert { background: var(--surface); border-color: var(--line); }
html[data-mode="oscuro"] .card-head { background: #0f192c; border-bottom-color: var(--line); }
html[data-mode="oscuro"] .module-card { border-top-color: #2f6fe0; }
html[data-mode="oscuro"] .module-ic { background: rgba(77, 140, 255, .16); color: #9cc0ff; }
html[data-mode="oscuro"] .count { background: #1e3a6e; }
html[data-mode="oscuro"] .kpi::before { background: #2f6fe0; }
html[data-mode="oscuro"] .kpi.warn::before { background: var(--warn); }
html[data-mode="oscuro"] .kpi.bad::before { background: var(--bad); }
html[data-mode="oscuro"] .kpi-ic { color: #2b3c5c; }
html[data-mode="oscuro"] a.kpi:hover { border-color: #33507d; }
html[data-mode="oscuro"] .link { color: #7fb0ff; }
html[data-mode="oscuro"] .link:hover { color: #a9c9ff; }

html[data-mode="oscuro"] .btn-primary { background: #2563eb; }
html[data-mode="oscuro"] .btn-primary:hover { background: #3b7cf5; }
html[data-mode="oscuro"] .btn-ghost, html[data-mode="oscuro"] .btn-danger-ghost { background: var(--surface-2); border-color: var(--g-300); color: var(--g-900); }
html[data-mode="oscuro"] .btn-ghost:hover { background: #1c2b47; }
html[data-mode="oscuro"] .btn-danger-ghost { color: var(--bad); }
html[data-mode="oscuro"] .btn-danger-ghost:hover { background: var(--bad-bg); }

html[data-mode="oscuro"] input, html[data-mode="oscuro"] select, html[data-mode="oscuro"] textarea { background-color: #0b1424; border-color: var(--g-300); color: var(--g-900); }
html[data-mode="oscuro"] input:focus, html[data-mode="oscuro"] select:focus, html[data-mode="oscuro"] textarea:focus { border-color: #4d8cff; box-shadow: 0 0 0 3px rgba(77, 140, 255, .25); }
html[data-mode="oscuro"] input:disabled { background: var(--surface-2); }
html[data-mode="oscuro"] .toolbar .is-set { background-color: rgba(77, 140, 255, .12); border-color: #4d8cff; }
html[data-mode="oscuro"] .form-actions.sticky { background: rgba(10, 18, 34, .94); }
html[data-mode="oscuro"] .switch-ui { background: #34466a; }
html[data-mode="oscuro"] .switch input:checked + .switch-ui { background: #2563eb; }
html[data-mode="oscuro"] .check-card:has(input:checked) { border-color: #4d8cff; }

html[data-mode="oscuro"] .table th { background: #0b1f45; color: #b9cbea; }
html[data-mode="oscuro"] .table td { border-bottom-color: var(--line); }
html[data-mode="oscuro"] .table tbody tr:nth-child(even) td { background: #0f1a2e; }
html[data-mode="oscuro"] .table tbody tr:hover td { background: #172846; }
html[data-mode="oscuro"] .perm-module-row th { background: #16233b; color: #dbe5f5; }
html[data-mode="oscuro"] .audit-table pre { background: #0b1424; }
html[data-mode="oscuro"] progress::-webkit-progress-value { background: #3b7cf5; }
html[data-mode="oscuro"] progress::-moz-progress-bar { background: #3b7cf5; }
html[data-mode="oscuro"] .pill-info { color: #9cc0ff; }

html[data-mode="oscuro"] .flash-success { border-color: rgba(60,199,149,.3); color: #8fe6c4; }
html[data-mode="oscuro"] .flash-error { border-color: rgba(242,115,123,.3); color: #ffb3b8; }
html[data-mode="oscuro"] .flash-warning { border-color: rgba(242,184,75,.3); color: #f7d58f; }
html[data-mode="oscuro"] .flash-info { border-color: rgba(77,140,255,.3); color: #b8d1ff; }
html[data-mode="oscuro"] .error-code { color: #12213d; -webkit-text-stroke-color: #2d4d82; }

html[data-mode="oscuro"] .login-hero { background: #050c1a; }
html[data-mode="oscuro"] .login-panel { background: #0a1222; box-shadow: inset 6px 0 0 #2563eb; }
html[data-mode="oscuro"] .install { background: #050c1a; }
html[data-mode="oscuro"] .login-hero p { color: #8fa3c4; }
html[data-mode="oscuro"] .login-points { color: #b8c7df; }
html[data-mode="oscuro"] .login-hero h1 { color: #f1f4f9; }

/* ---------- Fase 1: insignias, aprobaciones, adjuntos ---------- */
.nav-badge { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.bell { position: relative; }
.dot-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.wf-panel .card-head { gap: 8px; }
.wf-steps { list-style: none; margin: 0; padding: 12px 16px 4px; display: flex; flex-direction: column; gap: 0; }
.wf-steps li { position: relative; display: flex; gap: 10px; padding: 0 0 14px; }
.wf-steps li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 22px; bottom: 2px; width: 2px; background: var(--g-200); }
.wf-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--g-100); color: var(--g-500); border: 2px solid var(--g-200); font-size: 11px; font-weight: 700; z-index: 1; }
.wf-dot.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.wf-dot.now { background: #fff; border-color: var(--blue-600); color: var(--blue-600); }
.wf-dot.bad { background: var(--bad); border-color: var(--bad); color: #fff; }
.wf-dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.wf-steps strong { display: block; font-size: 13px; }
.wf-steps small { color: var(--g-500); }
.wf-form { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--g-100); }
.wf-form textarea { min-height: 60px; }
.wf-form .row { display: flex; gap: 8px; }
.wf-form .row .btn { flex: 1; }
.wf-log { list-style: none; margin: 0; padding: 8px 16px 14px; font-size: 12.5px; border-top: 1px solid var(--g-100); }
.wf-log li { padding: 5px 0; color: var(--g-700); }
.wf-log li em { color: var(--g-500); display: block; font-style: normal; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; border: 1px solid var(--blue-200); background: var(--blue-50); color: var(--blue-800); }
.banner.warn { border-color: #efd8ac; background: var(--warn-bg); color: #7a4f0d; }
html[data-mode="oscuro"] .banner.warn { color: #f7d58f; border-color: rgba(242,184,75,.3); }
.banner ol { margin: 4px 0 0; padding-left: 18px; }
.files { list-style: none; margin: 0; padding: 6px 16px 10px; }
.files li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--g-100); font-size: 13px; }
.files li:last-child { border-bottom: 0; }
.files li a.link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files form { margin: 0; }
.upload { display: flex; gap: 8px; padding: 10px 16px 16px; border-top: 1px solid var(--g-100); align-items: center; }
.upload input[type=file] { height: auto; padding: 6px; font-size: 12.5px; }
.assign-table td { padding: 6px 8px; }
.assign-table select { min-width: 200px; }
.step-card { border: 1px solid var(--g-200); border-radius: 6px; padding: 14px; display: grid; grid-template-columns: 40px 1.4fr 1fr 1.4fr; gap: 10px 12px; align-items: end; margin-bottom: 10px; background: var(--g-50); }
.step-card .num { font-size: 20px; font-weight: 800; color: var(--blue-600); align-self: center; text-align: center; }
.step-card .cond { grid-column: 2 / -1; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
.step-card label { font-size: 12px; font-weight: 600; color: var(--g-600); display: flex; flex-direction: column; gap: 4px; }
.flow-row { display: grid; grid-template-columns: 1.2fr 2fr auto; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--g-100); }
.flow-row:last-child { border-bottom: 0; }
.flow-steps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--g-600); }
.flow-steps .arrow { color: var(--g-400); }
.qr-box { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; padding: 18px; }
.qr { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid var(--g-200); }
.qr img, .qr canvas, .qr svg { width: 100%; height: 100%; display: block; }
.secret { font-family: var(--mono); letter-spacing: .08em; background: var(--g-100); padding: 6px 10px; border-radius: 4px; word-break: break-all; display: inline-block; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; font-family: var(--mono); font-size: 14px; padding: 14px 18px; background: var(--g-50); border-radius: 6px; }
.otp-input { font-size: 24px !important; letter-spacing: .4em; text-align: center; height: 52px !important; font-family: var(--mono); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--g-200); margin-bottom: 16px; }
.tabs a { padding: 9px 14px; border-bottom: 2px solid transparent; color: var(--g-600); font-weight: 600; margin-bottom: -1px; display: inline-flex; gap: 6px; align-items: center; }
.tabs a.on { border-bottom-color: var(--blue-600); color: var(--blue-700); }
.tabs a .count { margin: 0; }
.notif { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--g-100); align-items: flex-start; }
.notif.unread { background: var(--blue-50); }
.notif .ic { margin-top: 2px; color: var(--blue-600); }
.notif div { flex: 1; }
.notif strong { display: block; }
.scope-chip { display: inline-flex; padding: 1px 8px; border-radius: 4px; background: var(--g-100); color: var(--g-700); font-size: 12px; margin: 2px 4px 2px 0; }
.diff-old { color: var(--bad); text-decoration: line-through; }
.diff-new { color: var(--ok); font-weight: 600; }
.selector { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.selector select { width: auto; }
@media (max-width: 900px) { .step-card { grid-template-columns: 1fr; } .step-card .cond { grid-column: auto; grid-template-columns: 1fr; } .flow-row { grid-template-columns: 1fr; } .qr-box { grid-template-columns: 1fr; } }
.stack.flush { padding: 0; }
.step-card > [data-remove-row] { grid-column: 2 / -1; justify-self: start; }

/* ---------- SaaS: progreso, importación ---------- */
.job { display: flex; flex-direction: column; gap: 14px; }
.job .page-head { margin-bottom: 0; }
.job-bar { display: flex; align-items: center; gap: 12px; }
.job-bar progress { height: 12px; flex: 1; }
.job-bar span { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; color: var(--blue-700); }
.job-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.job-steps li { display: flex; align-items: center; gap: 10px; color: var(--g-500); }
.job-steps li.done, .job-steps li.now { color: var(--g-900); }
.job-steps li.now { font-weight: 600; }
.job-steps li small { margin-left: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cols-table td:first-child { font-weight: 600; white-space: nowrap; }
.req-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--bad-bg); color: var(--bad); }
.opt-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--g-100); color: var(--g-600); }
.import-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.import-steps .card { margin: 0; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.import-steps .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-600); color: #fff; font-weight: 800; }
.dropzone { border: 2px dashed var(--g-300); border-radius: 8px; padding: 18px; text-align: center; background: var(--g-50); }
.dropzone input[type=file] { height: auto; padding: 8px; background: transparent; border: 0; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 150px; padding: 14px 16px; border-radius: 8px; background: var(--g-50); border: 1px solid var(--g-200); }
.stat strong { display: block; font-size: 24px; line-height: 1.2; }
.stat.ok strong { color: var(--ok); } .stat.bad strong { color: var(--bad); } .stat.warn strong { color: var(--warn); }
@media (max-width: 900px) { .import-steps { grid-template-columns: 1fr; } }
.inline-steps { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 6px; }
.checklist li.warn { color: var(--warn); }
.code-box { background: var(--g-900); color: #e6ebf3; padding: 14px; border-radius: 6px; font-family: var(--mono); font-size: 12px; overflow: auto; white-space: pre; }
fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend { font-weight: 600; margin-bottom: 6px; }
label.check { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; font-weight: 400; }
label.check input { width: auto; height: auto; margin-top: 3px; }
.stat small { display: block; }
.job .head-actions form { display: inline; }
.banner.error { border-color: rgba(184,50,58,.35); background: var(--bad-bg); color: var(--bad); }
.contract-banner { font-weight: 500; }
.choice-list { display: grid; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--surface); }
.choice:has(input:checked) { border-color: var(--blue-600); box-shadow: 0 0 0 1px var(--blue-600) inset; }
.choice input { margin-top: 3px; width: auto; height: auto; }
.choice small { display: block; margin-top: 3px; }
.choice .pill { margin-left: 6px; }
.choice-detail { padding: 4px 4px 4px 34px; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 16px; }
.module-grid input:disabled + * , .module-grid label:has(input:disabled) { opacity: .75; }
.invite-box { display: flex; gap: 8px; align-items: center; }
.invite-box code { flex: 1; overflow-wrap: anywhere; padding: 8px 10px; background: var(--surface-2, var(--bg)); border-radius: 4px; }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .form-grid.three { grid-template-columns: 1fr; } }
.banner.ok { border-color: rgba(29,127,85,.3); background: var(--ok-bg); color: var(--ok); }
.banner.ok code { color: var(--text, inherit); }
.install-card.wide { max-width: 860px; }
.step-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-600); color: #fff; font-size: 12px; margin-right: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 0; }
.chips li { padding: 2px 10px; border-radius: 999px; background: var(--info-bg); color: var(--blue-700); font-size: 13px; }
.detail-grid .span-2 { grid-column: 1 / -1; }
.module-list { list-style: none; margin: 0; padding: 0; }
.module-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.module-list li:first-child { border-top: 0; }
.module-list li.off { opacity: .6; }
.module-list small { display: block; }
.conn-list { display: grid; gap: 10px; margin: 8px 0; }
.grow { flex: 1; min-width: 0; }
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 80; max-width: 360px; }
.toast { display: grid; gap: 2px; padding: 12px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--blue-600); box-shadow: var(--shadow-lg); color: inherit; text-decoration: none; animation: toastIn .25s ease; }
.toast span { font-size: 13px; color: var(--muted, #6b7280); }
.toast.out { opacity: 0; transform: translateY(8px); transition: .35s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.push-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 16px; }
.push-box [data-push-status] { flex: 1; min-width: 200px; }
.notif-row { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.notif-row:first-child { border-top: 0; }
.notif-row .notif { flex: 1; border-top: 0 !important; }
.notif-row form { display: flex; align-items: center; padding-right: 10px; }
.aviso-card { margin-bottom: 16px; }
.aviso-add { display: flex; gap: 6px; align-items: center; }
.aviso-add select, .aviso-add input { max-width: 190px; }
.chips form.inline { display: inline; }
.chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 0 0 4px; }
.muted-chip { background: transparent !important; color: var(--muted, #6b7280) !important; }
.module-list li { grid-template-columns: 22px 1fr auto; }
.module-list .mgr-form { grid-column: 2 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.module-list .mgr-form select { max-width: 240px; }
.aviso-table { table-layout: fixed; }
.aviso-table th:nth-child(1) { width: 140px; }
.aviso-table th:nth-child(3) { width: 470px; }
.roles-fuera { margin-top: 20px; padding: 14px 18px; }
.roles-fuera summary { cursor: pointer; font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.roles-fuera .role-grid { margin-top: 14px; opacity: .75; }

/* ── Capital Humano ── */
.ch-panel .ch-block { padding: 14px 20px; border-bottom: 1px solid var(--g-100); }
.ch-panel h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--g-500); margin-bottom: 8px; display: flex; gap: 8px; align-items: baseline; }
.ch-panel p { margin: 4px 0; }
.ch-panel .btn { margin-top: 6px; }
.ch-vac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.ch-vac div { background: var(--g-50); border-radius: 8px; padding: 8px 6px; text-align: center; }
.ch-vac b { display: block; font-size: 18px; }
.ch-vac div:first-child b { color: var(--blue-600); }
.ch-vac span { font-size: 11px; color: var(--g-500); }
.ch-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px; }
.ch-actions .btn { margin: 0; }
.ch-baja { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 20px; align-items: start; }
.ch-baja .form-grid { grid-template-columns: 1fr 1fr; }
.ch-baja .field-bool { grid-column: span 2; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) { .ch-baja { grid-template-columns: 1fr; } }
.ch-calc .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ch-calc tr.grp td { background: var(--g-50); font-size: 11.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-700); padding: 7px 14px; }
.ch-calc tfoot td { font-weight: 600; border-bottom: 0; padding: 7px 14px; }
.ch-calc tr.tot td { font-size: 16px; color: var(--blue-700); }
.ch-calc .d-block { display: block; font-weight: 400; }
table.ch-calc.compact { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
table.ch-calc.compact td { padding: 5px 0; border-bottom: 1px solid var(--g-100); font-size: 13px; }
.ch-registrar { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g-100); }
.ch-registrar .btn { align-self: flex-start; }
.jefe-card { max-width: 560px; }
.jefe-det { margin: 12px 0 16px; }
.mt { margin-top: 12px; }
.jefe-card .row { display: flex; gap: 10px; justify-content: flex-end; }
.ch-sub { font-size: 13px; margin-top: 4px; }
.mi-exp { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .mi-exp { grid-template-columns: 1fr; } }
.mi-exp .files.pad { list-style: none; display: flex; flex-direction: column; gap: 6px; }

/* ── Finanzas ── */
.cur { font-size: 10.5px; color: var(--g-500); font-weight: 600; letter-spacing: .02em; }
.tax-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.tax-pick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--g-200); border-radius: 8px; font-size: 13px; cursor: pointer; background: #fff; }
.tax-pick input { width: auto; margin: 0; }
.tax-pick:has(input:checked) { border-color: var(--blue-400); background: var(--blue-50); }
.fin-total { margin-top: 8px; font-weight: 650; color: var(--blue-700); font-variant-numeric: tabular-nums; }
.fin-panel .fin-abono { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; }
.fin-panel .fin-abono b { margin-left: auto; }
.fin-panel .btn { margin-top: 8px; }
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--g-200); }
.tabs a { padding: 9px 14px; font-weight: 600; color: var(--g-500); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active { color: var(--blue-700); border-bottom-color: var(--blue-600); }
.txt-bad { color: var(--bad); } .txt-warn { color: var(--warn); } .txt-ok { color: var(--ok, #16a34a); }
.fin-aging td.num, .fin-aging th.num { white-space: nowrap; }
.fin-flujo { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items: end; }
.fin-sem { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.fin-bars { height: 140px; display: flex; gap: 3px; align-items: flex-end; width: 100%; justify-content: center; border-bottom: 1px solid var(--g-200); }
.fin-bars .bar { display: block; width: 40%; max-width: 18px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bar.in, .dot.in { background: var(--blue-500); } .bar.out, .dot.out { background: #f59e0b; }
.fin-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 10px; vertical-align: -1px; }
progress.over::-webkit-progress-value { background: var(--bad); }
.multiref { display: flex; flex-direction: column; gap: 6px; }
.multiref select { min-height: 150px; padding: 4px; }
.multiref select option { padding: 4px 6px; border-radius: 4px; }
.multiref select option:checked { background: var(--blue-100); }

/* ── Salas (2.5) ── */
.sala-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sala-bar .sala-dia { margin: 0 8px; }
.sala-next .ic { transform: rotate(0deg); }
.sala-card { padding: 0; overflow: hidden; }
.sala-cal { display: flex; overflow-x: auto; --px: 1.1px; }
.sala-horas { flex: 0 0 56px; border-right: 1px solid var(--g-100); }
.sala-col { flex: 1 0 150px; border-right: 1px solid var(--g-100); }
.sala-col:last-child { border-right: 0; }
.sala-head { height: 48px; padding: 6px 10px; border-bottom: 1px solid var(--g-200); display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.sala-head small { font-size: 11px; }
.sala-body { position: relative; height: calc(var(--mins, 840) * var(--px)); }
.sala-hora { height: calc(60 * var(--px)); font-size: 11px; color: var(--g-500); padding: 2px 6px; border-top: 1px solid var(--g-100); box-sizing: border-box; }
.sala-slot { position: absolute; left: 0; right: 0; height: calc(30 * var(--px)); border-top: 1px dashed var(--g-100); box-sizing: border-box; display: block; }
a.sala-slot:hover { background: var(--brand-50, rgba(37, 99, 235, .08)); }
.sala-slot.off { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.025) 6px 12px); }
.sala-ev { position: absolute; left: 4px; right: 4px; border-radius: 6px; padding: 3px 7px; font-size: 12px; line-height: 1.25; overflow: hidden; box-sizing: border-box; border-left: 3px solid; display: flex; flex-direction: column; z-index: 1; }
.sala-ev span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-ev small { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sala-mia { background: #e0ecff; border-color: #2563eb; color: #1e3a8a; }
.sala-ok { background: #e3f6ec; border-color: #16a34a; color: #14532d; }
.sala-pend { background: #fff4d6; border-color: #d97706; color: #78350f; }
.sala-busy { background: #eef0f4; border-color: #94a3b8; color: #475569; }
.sala-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--g-100); }
.sala-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border-left: 3px solid; vertical-align: -1px; }
.sala-list { list-style: none; margin: 0; padding: 0 16px 12px; }
.sala-list li { padding: 10px 0; border-bottom: 1px solid var(--g-100); display: flex; flex-direction: column; gap: 3px; }
.sala-list li:last-child { border-bottom: 0; }
.sala-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sala-acts form { margin: 0; }
[data-mode="oscuro"] .sala-mia { background: #1e3157; color: #c7dbff; }
[data-mode="oscuro"] .sala-ok { background: #173a29; color: #bff0d3; }
[data-mode="oscuro"] .sala-pend { background: #3d2e0d; color: #fde7b0; }
[data-mode="oscuro"] .sala-busy { background: #2a303b; color: #b6bfcc; }
.sala-form .sala-info { margin-top: 4px; }
/* ── Flota (2.5) ── */
.flota-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.flota-kpis .card { padding: 14px 16px; margin: 0; }
.flota-kpis b { display: block; font-size: 24px; }
.flota-alert { list-style: none; margin: 0; padding: 0 16px 12px; }
.flota-alert li { padding: 8px 0; border-bottom: 1px solid var(--g-100); display: flex; justify-content: space-between; gap: 10px; }
.flota-alert li:last-child { border-bottom: 0; }
.flota-inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.flota-inline input, .flota-inline select { max-width: 190px; }
.flota-inline .select-wrap { max-width: 210px; }

/* ── Organigrama (2.6) ── */
.org-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org-bar.org-drop-root { outline: 2px dashed var(--blue-600, #2563eb); outline-offset: 2px; }
.seg.org-per a { padding: 5px 12px; border-radius: 5px; font-size: 13px; color: var(--g-600); text-decoration: none; }
.seg.org-per a.on { background: var(--surface, #fff); color: var(--g-900); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.org-nota { margin: -8px 0 14px; }
.org-card-wrap { padding: 0; overflow: hidden; }
.org-wrap { position: relative; }
.org-zoom { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--g-100); flex-wrap: wrap; }
.org-scroll { overflow-x: auto; padding: 24px 20px 32px; }
.org-canvas { display: inline-flex; flex-direction: column; align-items: center; gap: 36px; min-width: 100%; transform-origin: top center; transform: scale(var(--z, 1)); }
.org-tree { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.org-tree ul { list-style: none; margin: 0; padding: 22px 0 0; position: relative; display: flex; justify-content: center; }
.org-tree li { position: relative; padding: 22px 6px 0; display: flex; flex-direction: column; align-items: center; }
.org-tree li::before, .org-tree li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1.5px solid var(--g-300); }
.org-tree li::after { right: auto; left: 50%; border-left: 1.5px solid var(--g-300); }
.org-tree li:only-child::before, .org-tree li:only-child::after { display: none; }
.org-tree li:only-child { padding-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0 none; }
.org-tree li:last-child::before { border-right: 1.5px solid var(--g-300); border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 1.5px solid var(--g-300); }
.org-tree > ul.org-root { padding-top: 0; }
.org-tree > ul.org-root > li { padding-top: 0; }
.org-tree > ul.org-root > li::before, .org-tree > ul.org-root > li::after { display: none; }
.org-tree li.org-closed > ul { display: none; }
.org-card { position: relative; width: 196px; box-sizing: border-box; padding: 10px 12px 12px; background: var(--surface, #fff); border: 1px solid var(--g-200);
  border-top: 3px solid var(--blue-600, #2563eb); border-radius: 8px; box-shadow: 0 1px 3px rgba(15,23,42,.06); display: flex; flex-direction: column; gap: 2px; text-align: center; font-size: 12px; }
.org-card[data-drag] { cursor: grab; }
.org-card .org-name { font-weight: 600; font-size: 13px; color: var(--g-900); }
.org-card .org-puesto { color: var(--g-700); font-weight: 500; }
.org-meta { display: flex; justify-content: center; gap: 10px; margin-top: 4px; font-size: 12px; flex-wrap: wrap; }
.org-rama { color: var(--g-500); font-size: 11px; }
.org-badges { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 4px; }
.org-badges .pill { font-size: 10px; padding: 1px 6px; }
.org-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px; margin-top: 4px; border-top: 1px solid var(--g-100); padding-top: 4px; }
.org-acts form { margin: 0; }
.org-acts .btn { padding: 2px 6px; font-size: 11px; }
.org-tog { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--g-300);
  background: var(--surface, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; z-index: 2; color: var(--g-600); }
.org-tog .ic { transform: rotate(90deg); transition: transform .15s; }
.org-closed > .org-card .org-tog .ic { transform: rotate(0deg); }
.org-vac { border-style: dashed; border-top-style: solid; border-top-color: #16a34a; background: #f3fbf6; }
.org-changed { border-top-color: #d97706; }
.org-card.org-dragging { opacity: .45; }
.org-card.org-drop { outline: 2px solid var(--blue-600, #2563eb); outline-offset: 2px; background: var(--info-bg, #eef4ff); }
.org-dialog form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 500; }
.org-dialog { width: min(480px, calc(100vw - 32px)); }
.org-dialog h3 { margin: 0; font-size: 16px; }
.org-comp tr.org-sel td { background: var(--g-50, #f8fafc); font-weight: 600; }
form.inline { display: inline; }
[data-mode="oscuro"] .org-vac { background: #12291c; }
[data-mode="oscuro"] .org-card.org-drop { background: #1e3157; }

/* Organigrama: equipos de solo «hojas» (3 o más) en columna descendente, para no ensanchar el árbol */
.org-tree li.org-stack > ul { flex-direction: column; align-items: center; }
.org-tree li.org-stack > ul > li { padding: 16px 0 0; }
.org-tree li.org-stack > ul > li::before { display: none; }
.org-tree li.org-stack > ul > li::after { display: block; content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 16px;
  border: 0 none; border-left: 1.5px solid var(--g-300); border-radius: 0; }
.org-tree li.org-stack > ul > li:first-child { padding-top: 0; }
.org-tree li.org-stack > ul > li:first-child::after { display: none; }
/* Personas sin jefe ni equipo: rejilla aparte */
.org-loose { width: 100%; max-width: 1240px; border-top: 1px dashed var(--g-200); padding-top: 18px; text-align: center; }
.org-loose h3 { margin: 0 0 4px; font-size: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; }
.org-loose-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.org-loose-list > li { display: flex; }

/* Vacaciones: cálculo en vivo */
.vac-calc { margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--info-bg, #eef4ff); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.vac-calc.bad { background: #fdecec; }
.vac-calc-row { display: flex; flex-wrap: wrap; gap: 6px 16px; }
[data-mode="oscuro"] .vac-calc { background: #1e3157; }
[data-mode="oscuro"] .vac-calc.bad { background: #3d1c1c; }

.area-form { display: grid; grid-template-columns: 110px minmax(200px, 260px) minmax(200px, 1fr) auto; gap: 10px; align-items: start; border-top: 1px solid var(--g-100); }
.area-form small { grid-column: 2 / 4; }
@media (max-width: 900px) { .area-form { grid-template-columns: 1fr; } .area-form small { grid-column: auto; } }

/* ── Bloque 1 (2.7): novedades, monitoreo, mis datos ── */
.nov-banner { align-items: center; gap: 12px; }
.nov-banner form { margin: 0; }
.nov-list { list-style: none; margin: 0; padding: 4px 16px 14px; }
.nov-list li { padding: 8px 0; border-bottom: 1px solid var(--g-100); display: flex; gap: 10px; align-items: baseline; }
.nov-list li:last-child { border-bottom: 0; }
.mon-checks { list-style: none; margin: 0; padding: 0 16px 12px; }
.mon-checks li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--g-100); align-items: baseline; }
.mon-checks li:last-child { border-bottom: 0; }
.mon-checks b { min-width: 170px; }
.mon-det { white-space: pre-wrap; font-size: 12px; max-height: 260px; overflow: auto; background: var(--g-50, #f8fafc); padding: 8px; border-radius: 6px; margin: 6px 0 0; }

/* ───── Dirección (2.8): semáforo, cierre con evidencia, pendientes ───── */
.kpi-note { display: block; color: var(--g-400); font-size: 11px; margin-top: 2px; }
.sem-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 0; }
.sem-row.sem-big { padding: 0; margin-bottom: 14px; }
.sem { display: flex; flex-direction: column; min-width: 92px; padding: 8px 12px; border-radius: var(--radius-sm); border: 1px solid var(--g-200); background: var(--surface, #fff); color: var(--g-700); text-decoration: none; }
.sem strong { font-size: 20px; line-height: 1.1; }
.sem span { font-size: 12px; color: var(--g-500); }
.sem.on { outline: 2px solid var(--blue-500); outline-offset: 1px; }
.sem-ok strong { color: var(--ok); }
.sem-warn strong { color: var(--warn); }
.sem-bad strong { color: var(--bad); }
.sem-info strong { color: var(--blue-700); }
.sem-neutral strong { color: var(--g-600); }
a.sem:hover { border-color: var(--blue-300); }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-row input[type=search], .filter-row select { width: auto; min-width: 160px; }
.filter-row .check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--g-600); }
.prog-cell { white-space: nowrap; }
.prog-cell progress { width: 70px; vertical-align: middle; }
.prog-line { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; }
.prog-line progress { flex: 1; }
.warn-text { color: var(--warn); }
.dir-tareas { list-style: none; margin: 0; padding: 4px 20px 12px; }
.dir-tareas li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--g-100); }
.dir-tareas li:last-child { border-bottom: 0; }
.dir-tareas li > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dir-tareas li.muted a { text-decoration: line-through; }
.cierre { display: flex; flex-direction: column; gap: 10px; }
.cierre-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cierre-box { border-radius: var(--radius-sm); padding: 10px 12px; border: 1px solid var(--g-200); }
.cierre-box p { margin: 0 0 6px; }
.cierre-box p:last-child { margin-bottom: 0; }
.cierre-box.info { background: var(--blue-50); border-color: var(--blue-200); }
.cierre-box.ok { background: var(--ok-bg); border-color: #bfe2cf; }
.cierre-box.warn { background: var(--warn-bg); border-color: #efd8ac; }
.cierre-box .files { padding: 0; margin: 4px 0; }
.evid-nota { white-space: normal; font-size: 13px; }
.cierre-form { display: flex; flex-direction: column; gap: 8px; }
.cierre-form .row { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.cierre-form .row small { flex: 1; }
.cierre-form label { display: flex; flex-direction: column; gap: 4px; }
.cierre-hist summary { cursor: pointer; font-size: 13px; color: var(--g-600); }
.dir-pend { list-style: none; margin: 0; padding: 0 20px; }
.dir-pend > li { padding: 16px 0; border-bottom: 1px solid var(--g-100); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.dir-pend > li:last-child { border-bottom: 0; }
.dir-pend-head { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cierre-form textarea { min-height: 64px; }
.dir-desc { color: var(--g-600); }
.pad-b { padding-bottom: 14px; padding-top: 6px; }
@media (max-width: 900px) { .dir-pend > li { grid-template-columns: 1fr; } }
html[data-mode="oscuro"] .cierre-box.info { background: rgba(70,120,230,.12); border-color: rgba(120,160,255,.3); }
html[data-mode="oscuro"] .cierre-box.ok { background: rgba(40,160,100,.12); border-color: rgba(80,200,140,.3); }
html[data-mode="oscuro"] .cierre-box.warn { background: rgba(220,160,40,.12); border-color: rgba(230,180,80,.3); }
html[data-mode="oscuro"] .sem { background: transparent; }

/* ───── Vistas guardadas y columnas (2.9) ───── */
.views-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.views-bar form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.views-pick label { display: inline-flex; align-items: center; gap: 6px; }
.views-pick select { min-width: 220px; }
.views-save { position: relative; }
.views-save > summary, .cols-menu > summary { list-style: none; cursor: pointer; }
.views-save > summary::-webkit-details-marker, .cols-menu > summary::-webkit-details-marker { display: none; }
.views-save-form { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 320px; padding: 14px; display: flex !important; flex-direction: column; gap: 10px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.15)); }
.views-save-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.views-save-form label.check { flex-direction: row; align-items: center; gap: 6px; }
.cols-menu { position: relative; }
.cols-list { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 280px; max-height: 360px; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.15)); }
.cols-list label.check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.list-range { margin: -6px 0 10px; }
.btn-text.danger { color: var(--bad); }
.scope-chip.chip-warn { background: var(--warn-bg); color: var(--warn); border-color: #efd8ac; }

/* ───── Reportes (2.10) ───── */
.rep-new { display: flex; align-items: flex-end; gap: 12px; padding: 16px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.rep-new label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--g-600); min-width: 280px; }
.rep-form { padding: 16px 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 14px; }
.rep-grid label, .rep-save-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--g-600); }
.rep-set { border: 1px solid var(--g-200); border-radius: var(--radius-sm); padding: 10px 14px 14px; margin: 0; }
.rep-set legend { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--g-500); padding: 0 6px; }
.rep-medida { display: flex; gap: 6px; }
.rep-medida select { flex: 1; min-width: 0; }
.rep-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 12px; margin-bottom: 10px; }
.rep-cols label.check, label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.rep-actions { display: flex; justify-content: flex-end; }
.rep-aviso { margin: 10px 20px 0; }
.rep-table td.up { color: var(--ok); }
.rep-table td.down { color: var(--bad); }
.rep-table tfoot th { border-top: 2px solid var(--g-300); }
.rep-bar { width: 22%; }
.rep-bar progress { width: 100%; }
.rep-save { display: flex; flex-direction: column; gap: 12px; }
.rep-save-form { display: grid; grid-template-columns: 2fr 3fr 2fr auto; gap: 10px; align-items: end; }
.rep-save-own { display: flex; gap: 8px; flex-wrap: wrap; }
.rep-save-own form { margin: 0; }
@media (max-width: 900px) { .rep-save-form { grid-template-columns: 1fr; } }
html[data-mode="oscuro"] .rep-set { border-color: rgba(255,255,255,.12); }

/* Suscripción y cobro (v2.11) */
.sus-kpis { padding: 16px 16px 0; margin-bottom: 8px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sus-kpis .kpi { box-shadow: none; }
.kpi-value.sm { font-size: 19px; }
.sus-prog { display: block; margin-top: 6px; max-width: 260px; }
.inline-form { display: inline; margin: 0; }
.cot-table td, .cot-table th { padding-left: 18px; padding-right: 18px; }
.cot-table tfoot th { font-weight: 500; color: var(--g-600); background: transparent; text-transform: none; letter-spacing: 0; font-size: 13.5px; border-top: 1px solid var(--g-200); }
html[data-mode="oscuro"] .cot-table tfoot th { color: var(--g-300); }
html[data-mode="oscuro"] .cot-table tfoot tr:last-child th { color: #fff; }
.cot-table tfoot tr:last-child th { font-weight: 700; color: var(--black); font-size: 15px; }
.cot-total { font-size: 17px; }
.cot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.plan-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; border: 0; padding: 0; margin: 0; }
.plan-pick { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 12px 40px; border: 1px solid var(--g-200); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.plan-pick input[type=radio] { position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; padding: 0; margin: 0; accent-color: var(--blue-600); box-shadow: none; cursor: pointer; }
.plan-price.sm { font-size: 14px; color: var(--g-600); }
.sus-kpis .kpi { padding: 14px 16px; }
.plan-pick:hover { border-color: var(--blue-200); }
.plan-pick:has(input:checked) { border-color: var(--blue-500); background: var(--blue-50, rgba(46,107,242,.06)); }
.plan-pick.is-current { border-style: dashed; }
.plan-name { font-weight: 700; }
.plan-price { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: 12px; font-weight: 500; color: var(--g-500); }
.sus-rules { margin: 0; padding-left: 34px; display: grid; gap: 8px; }
.retorno-ic { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: var(--g-100); }
html[data-mode="oscuro"] .plan-pick { border-color: rgba(255,255,255,.12); }
html[data-mode="oscuro"] .plan-pick:has(input:checked) { border-color: var(--blue-500); background: rgba(46,107,242,.12); }

/* Calendario general (2.13) */
.cal-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-mes { margin: 0 6px; font-size: 18px; min-width: 150px; text-align: center; }
.cal-sep { flex: 1; }
.flip { transform: rotate(180deg); }
.cal-capas { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cal-capa { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cal-capa input { width: auto; margin: 0; }
.cal-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; display: inline-block; }
.cal-card { padding: 0; overflow: hidden; margin-bottom: 18px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-dow { padding: 8px 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-500); border-bottom: 1px solid var(--g-200); }
.cal-day { min-height: 112px; padding: 6px 6px 8px; border-right: 1px solid var(--g-100); border-bottom: 1px solid var(--g-100); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.is-weekend { background: var(--g-50, #f7f8fa); }
.cal-day.is-off { background: #fdf3f1; }
.cal-day.is-out { opacity: .45; }
.cal-num { font-size: 13px; font-weight: 600; color: var(--g-600); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-day.is-today .cal-num { background: var(--blue-500); color: #fff; }
.cal-ev { display: block; font-size: 11.5px; line-height: 1.3; padding: 2px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; border-left: 3px solid; }
a.cal-ev:hover { filter: brightness(.96); }
.cal-ev.is-pend { background: transparent; border-style: dashed; border-width: 1px 1px 1px 3px; }
.cal-more { font-size: 11px; color: var(--g-500); padding-left: 6px; }
.cal-oficial { background: #fde8e4; color: #8a2a17; border-color: #d4553a; }
.cal-festivo { background: #fdeede; color: #7a4210; border-color: #e08a2c; }
.cal-especial { background: #efe9fc; color: #4b2a8a; border-color: #8a63d2; }
.cal-ausencia { background: var(--blue-50); color: var(--blue-800); border-color: var(--blue-400); }
.cal-aniversario { background: #e6f5ee; color: #1d5e40; border-color: #36a36b; }
.cal-dot.cal-oficial { background: #d4553a; } .cal-dot.cal-festivo { background: #e08a2c; } .cal-dot.cal-especial { background: #8a63d2; }
.cal-dot.cal-ausencia { background: var(--blue-400); } .cal-dot.cal-aniversario { background: #36a36b; }
.cal-list { list-style: none; margin: 0; padding: 0; }
.cal-list li { display: flex; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--g-100); }
.cal-list-date { flex: 0 0 44px; text-align: center; line-height: 1.1; }
.cal-list-date b { display: block; font-size: 20px; }
.cal-list-date small { color: var(--g-500); text-transform: uppercase; font-size: 11px; }
.cal-list-date.is-today b { color: var(--blue-500); }
.cal-list-items { display: grid; gap: 6px; flex: 1; }
.cal-list-item { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
html[data-mode="oscuro"] .cal-day.is-weekend { background: rgba(255,255,255,.02); }
html[data-mode="oscuro"] .cal-day.is-off { background: rgba(212,85,58,.10); }
html[data-mode="oscuro"] .cal-day, html[data-mode="oscuro"] .cal-dow, html[data-mode="oscuro"] .cal-list li { border-color: rgba(255,255,255,.07); }
html[data-mode="oscuro"] .cal-oficial { background: rgba(212,85,58,.18); color: #f3b4a6; }
html[data-mode="oscuro"] .cal-festivo { background: rgba(224,138,44,.18); color: #f5c891; }
html[data-mode="oscuro"] .cal-especial { background: rgba(138,99,210,.2); color: #cdb8f5; }
html[data-mode="oscuro"] .cal-ausencia { background: rgba(74,134,224,.18); color: #b6cff5; }
html[data-mode="oscuro"] .cal-aniversario { background: rgba(54,163,107,.18); color: #a8e0c2; }
@media (max-width: 760px) {
  .cal-day { min-height: 64px; padding: 4px; }
  .cal-ev { font-size: 0; height: 6px; padding: 0; border-left-width: 0; }
  .cal-more { display: none; }
  .cal-list li { padding: 10px 12px; }
}
html[data-mode="oscuro"] .cal-dot.cal-oficial { background: #d4553a; } html[data-mode="oscuro"] .cal-dot.cal-festivo { background: #e08a2c; }
html[data-mode="oscuro"] .cal-dot.cal-especial { background: #8a63d2; } html[data-mode="oscuro"] .cal-dot.cal-ausencia { background: #4a86e0; }
html[data-mode="oscuro"] .cal-dot.cal-aniversario { background: #36a36b; }