:root {
  --teal: #205864;
  --teal-dark: #163f48;
  --desk: #e8ecee;
  --line: #1a1a1a;
  --ok: #1b7a3d;
  --warn: #b8860b;
  --danger: #a33;
  --info: #1a5f9e;
  --muted: #5a6a72;
  --card: #fff;
  --accent: #17a2b8;
  --accent-dark: #128ba0;
  --font: "Segoe UI", Calibri, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  background: linear-gradient(160deg, #d7e2e6 0%, #eef2f4 45%, #cfd9dd 100%);
  color: #122;
  min-height: 100vh;
}

.boot { padding: 3rem; text-align: center; color: var(--muted); }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.25rem;
  border-bottom: 3px solid #0e2f36;
}
.topbar img { height: 42px; background: #fff; border-radius: 4px; padding: 2px 6px; }
.topbar h1 { font-size: 1.05rem; margin: 0; font-weight: 700; letter-spacing: .02em; }
.topbar .meta { font-size: .8rem; opacity: .9; }
.topbar .spacer { flex: 1; }
.topbar .userbox { font-size: .85rem; text-align: right; }

.layout { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; }
.sidebar {
  background: #f7fafb;
  border-right: 1px solid #c5d0d4;
  padding: 1rem .75rem;
}
.sidebar button {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: .65rem .75rem;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  color: #234;
  margin-bottom: .25rem;
}
.sidebar button:hover { background: #e4eef1; }
.sidebar button.active { background: var(--teal); color: #fff; }
.sidebar .sec { font-size: .7rem; text-transform: uppercase; color: var(--muted); margin: .85rem .5rem .35rem; letter-spacing: .06em; }

.content { padding: 1.25rem; overflow: auto; }

.card {
  background: var(--card);
  border: 1px solid #c8d2d6;
  border-radius: 8px;
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset;
}
.card h2, .card h3 { margin: 0 0 .75rem; color: var(--teal-dark); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .25rem; }
input, select, textarea {
  width: 100%;
  border: 1px solid #9aabb3;
  border-radius: 4px;
  padding: .45rem .55rem;
  font: inherit;
  background: #fff;
}
textarea { min-height: 88px; resize: vertical; }
.field { margin-bottom: .75rem; }

.btn {
  border: 0;
  border-radius: 5px;
  padding: .5rem .9rem;
  font: inherit;
  cursor: pointer;
  background: var(--teal);
  color: #fff;
}
.btn:hover { background: var(--teal-dark); }
.btn.secondary { background: #5a6f78; }
.btn.danger { background: var(--danger); }
.btn.warn { background: var(--warn); color: #111; }
.btn.ghost { background: transparent; color: var(--teal); border: 1px solid var(--teal); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

.badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.badge-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
}
.badge-btn:hover .badge {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  filter: brightness(0.97);
}
.badge-btn:focus-visible .badge {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.link-dept {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.link-dept:hover b {
  color: var(--teal);
  text-decoration: underline;
}
.st-no_iniciado { background: #eef1f3; color: #556; }
.st-en_elaboracion { background: #fff4d6; color: #7a5a00; }
.st-enviado { background: #dcecff; color: #134a86; }
.st-revisado { background: #d9f0ef; color: #0f5f5c; }
.st-devuelto { background: #ffe0e0; color: #8a2020; }
.st-aprobado { background: #d9f5e3; color: #146b34; }

.table-wrap { overflow: auto; border: 1px solid #b8c4c8; border-radius: 6px; }
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th {
  background: var(--teal);
  color: #fff;
  padding: .45rem .5rem;
  text-align: left;
  white-space: nowrap;
}
table.data td { border-top: 1px solid #d5dee1; padding: .35rem .45rem; vertical-align: top; }
table.data tr:nth-child(even) td { background: #f7fafb; }
table.data input, table.data select, table.data textarea {
  border: 1px solid #ccd6da;
  padding: .3rem;
  font-size: .8rem;
}

/* Unidades: direcciones desplegables y gerencias/unidades internas. */
table.data.unidades tr[hidden] { display: none; }
.u-toggle {
  display: flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.u-toggle:hover .u-nombre { color: var(--accent-dark); text-decoration: underline; }
.u-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
.u-toggle[aria-expanded="true"] .chev { transform: rotate(90deg); }
.u-nombre { font-weight: 700; }
.u-tipo {
  display: inline-block;
  padding: .06rem .42rem;
  border: 1px solid #cfdde1;
  border-radius: 999px;
  background: #f3f8f9;
  color: #587078;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.u-meta { margin-left: auto; color: var(--muted); font-size: .74rem; white-space: nowrap; }
.u-nota { display: block; margin-bottom: .1rem; color: var(--muted); font-size: .68rem; }
table.data.unidades tr.u-grupo td { background: #eef6f7; }
table.data.unidades tr.u-grupo td:first-child { border-left: 3px solid var(--accent); }
table.data.unidades tr.u-hija td { background: #fbfdfe; }
table.data.unidades tr.u-hija td:first-child { padding-left: 1.65rem; }
table.data.unidades tr.u-hija .u-nombre { font-weight: 600; }
@media (max-width: 720px) {
  .u-meta { white-space: normal; }
}

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(32,88,100,.25), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(22,63,72,.2), transparent 45%),
    linear-gradient(160deg, #c9d7dc, #eef3f5);
}
.login-card {
  width: min(420px, 100%);
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem;
  border: 1px solid #b9c7cc;
  box-shadow: 0 18px 40px rgba(18,40,48,.18);
}
.login-card .brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.login-card img { height: 48px; }
.login-card h1 { margin: 0; font-size: 1.2rem; color: var(--teal-dark); }
.hint { font-size: .78rem; color: var(--muted); margin-top: .75rem; }

.aviso {
  background: #fff8e6;
  border: 1px solid #e0c36a;
  color: #5c4800;
  padding: .85rem 1rem;
  border-radius: 6px;
  margin: .75rem 0;
  font-size: .9rem;
}
.aviso-ok {
  background: #e6f7ed;
  border-color: #7bc89a;
  color: #146b34;
}
.aviso-info {
  background: #e8f2fb;
  border-color: #8bb8de;
  color: #134a86;
}

input[readonly], textarea[readonly] {
  background: #f3f7f8 !important;
  color: #122 !important;
  opacity: 1 !important;
  cursor: default;
}
select:disabled {
  background: #f3f7f8;
  color: #122;
  opacity: 1;
}

.quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.quad .box {
  border: 1px solid #b8c4c8;
  border-radius: 6px;
  overflow: hidden;
}
.quad .box h4 {
  margin: 0;
  padding: .45rem .65rem;
  background: var(--teal);
  color: #fff;
  font-size: .85rem;
}
.quad .box .body { padding: .55rem; display: grid; gap: .4rem; }

.guide-month { background: #cfe9ff !important; }

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: #17343c;
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 8px;
  z-index: 50;
  max-width: 360px;
}

.kpi {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.kpi .chip {
  background: #fff;
  border: 1px solid #c5d0d4;
  border-radius: 8px;
  padding: .55rem .8rem;
  min-width: 120px;
}
.kpi .chip b { display: block; font-size: 1.1rem; color: var(--teal-dark); }
.kpi .chip span { font-size: .72rem; color: var(--muted); }

.foda-item {
  display: grid;
  gap: .35rem;
  margin-bottom: .55rem;
}
.foda-item .cat-select {
  font-size: .8rem;
}
.foda-table select.cat-select {
  width: 100%;
  min-width: 10rem;
  background: #fff;
  cursor: pointer;
}
.foda-table select.cat-select:not(:disabled):hover {
  border-color: var(--teal);
}

.hint-inline {
  font-weight: 400;
  color: var(--muted);
  font-size: .75rem;
}

.field-invalid,
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
  border-color: var(--danger) !important;
  background: #fff0f0 !important;
  box-shadow: 0 0 0 1px rgba(170, 51, 51, .35);
}

.table-riesgos .col-causa,
.table-riesgos .col-accion,
.table-riesgos .col-recursos {
  min-width: 220px;
}
.table-riesgos .col-wide,
.table-riesgos .col-md {
  min-width: 180px;
}
.table-riesgos .col-sm { max-width: 5rem; }
.table-riesgos .col-xs { width: 2.6rem; }
.table-riesgos .eval-grid {
  display: grid;
  gap: .2rem;
  font-size: .7rem;
}
.table-riesgos .partes-cell {
  display: grid;
  gap: .25rem;
  min-width: 180px;
}
.table-riesgos .partes-pick {
  min-height: 4rem;
  font-size: .75rem;
}

.table-poa .col-act,
.table-poa .col-act-h {
  min-width: 320px;
}
.table-poa textarea[data-f="actividad"] {
  min-width: 300px;
  min-height: 6rem;
}

/* Ancho cómodo en celdas de texto de las matrices anchas (scroll horizontal en .table-wrap) */
table.data textarea {
  min-width: 160px;
  min-height: 4.25rem;
}

.table-parte textarea[data-f="justificacion"] {
  min-width: 220px;
}
.table-parte textarea[data-f="necesidades"],
.table-parte textarea[data-f="expectativas"] {
  min-width: 200px;
}
.table-parte textarea[data-f="mecanismo"] {
  min-width: 180px;
}
.table-parte textarea[data-f="parte"] {
  min-width: 180px;
  min-height: 2.8rem;
}
.table-parte textarea[data-f="proceso"] {
  min-width: 240px;
  min-height: 2.8rem;
}
.table-parte input[data-f="parte"],
.table-parte input[data-f="proceso"],
.table-parte input[data-f="responsable_seg"] {
  min-width: 150px;
}

.table-riesgos textarea[data-f="personal_involucrado"] {
  min-height: 2.8rem;
}
.table-riesgos textarea[data-f="responsable"] {
  min-width: 130px;
  min-height: 2.8rem;
}

.table-poa textarea[data-f="responsable"] {
  min-width: 130px;
  min-height: 2.8rem;
}
.table-poa textarea[data-f="medios_verificacion"] {
  min-width: 180px;
  min-height: 2.8rem;
}
.table-poa textarea[data-f="servicios"] {
  min-width: 120px;
  min-height: 2.8rem;
}
.table-parte select {
  min-width: 105px;
}
.table-parte input[data-f="relacion"] {
  min-width: 4.5rem;
}

.table-eff td:nth-child(2),
.table-eff th:nth-child(2) {
  min-width: 220px;
}

.save-status {
  font-size: .78rem;
  padding: .35rem .65rem;
  border-radius: 6px;
  max-width: 220px;
  text-align: right;
}
.save-status[data-state="saving"] {
  background: #fff4d6;
  color: #7a5a00;
}
.save-status[data-state="saved"] {
  background: #d9f5e3;
  color: #146b34;
}
.save-status[data-state="error"] {
  background: #ffe0e0;
  color: #8a2020;
}

.sidebar button.nav-locked {
  opacity: .55;
  cursor: not-allowed;
}
.sidebar button.nav-locked:hover {
  background: transparent;
}

.field-row-n {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin-bottom: .5rem;
}
.field-row-n .btn { margin-bottom: .75rem; }

input[readonly].rel-auto,
input[data-f="relacion"] {
  background: #eef3f5 !important;
  font-weight: 600;
  text-align: center;
  max-width: 4.5rem;
}

/* —— Fase 2: UX, PDF preview, meta documento —— */
.btn-sm {
  padding: .25rem .55rem;
  font-size: .75rem;
}

.doc-meta {
  margin: .5rem 0 .75rem;
  padding: .55rem .75rem;
  background: #f4f8f9;
  border: 1px solid #c5d0d4;
  border-radius: 6px;
  font-size: .82rem;
}
.doc-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem 1rem;
}

.historial-panel {
  margin-top: .65rem;
  max-height: 220px;
  overflow: auto;
}
.historial-table { font-size: .78rem; }

.validation-panel {
  background: #fff0f0;
  border: 1px solid #e0a0a0;
  border-radius: 6px;
  padding: .75rem 1rem;
  margin: .75rem 0;
  font-size: .85rem;
}
.validation-panel ul {
  margin: .45rem 0 0;
  padding-left: 1.2rem;
}
.validation-count {
  float: right;
  font-size: .75rem;
  color: var(--danger);
  font-weight: 700;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 35, 42, .55);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay[hidden] { display: none !important; }
.modal-card {
  background: #fff;
  border-radius: 10px;
  max-width: 920px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid #d5dee1;
}
.modal-head h3 { margin: 0; font-size: 1rem; color: var(--teal-dark); }
.modal-close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
}
.modal-hint { margin: .5rem 1rem 0; font-size: .82rem; }
.modal-pdf iframe {
  flex: 1;
  min-height: 420px;
  border: 0;
  margin: .75rem 1rem 0;
  background: #eef2f4;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .85rem 1rem;
  border-top: 1px solid #d5dee1;
}

.flow-progress {
  background: #fff;
  border: 1px solid #c5d0d4;
  border-radius: 8px;
  padding: .65rem .75rem;
  margin-bottom: .85rem;
}
.flow-progress-head {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: .35rem;
}
.flow-bar {
  height: 6px;
  background: #e0e8eb;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .45rem;
}
.flow-bar-fill {
  height: 100%;
  background: var(--teal);
  border-radius: 999px;
  transition: width .3s ease;
}
.flow-steps {
  display: flex;
  gap: .35rem;
  justify-content: space-between;
}
.flow-step {
  flex: 1;
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  padding: .2rem 0;
  border-radius: 4px;
  background: #eef1f3;
  color: #667;
}
.flow-step.done { background: #d9f5e3; color: #146b34; }
.flow-step.sent { background: #dcecff; color: #134a86; }
.flow-step.returned { background: #ffe0e0; color: #8a2020; }
.flow-step.draft { background: #fff4d6; color: #7a5a00; }

.table-sticky thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
/* Las tablas crecen verticalmente; el scroll vertical queda en la página.
   El scroll horizontal se conserva en .table-wrap. */
.table-sticky {
  max-height: none;
}

/* —— Fase 3: notificaciones + panel planificación —— */
.notif-wrap { position: relative; }
.notif-bell {
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: 8px;
  padding: .35rem .55rem;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
}
.notif-bell:hover { background: rgba(255,255,255,.22); }
.notif-count {
  background: #c62828;
  color: #fff;
  border-radius: 999px;
  font-size: .65rem;
  padding: .1rem .35rem;
  margin-left: .15rem;
  font-weight: 700;
}
.notif-panel {
  position: fixed;
  top: 76px;
  right: 1rem;
  width: min(360px, calc(100vw - 2rem));
  max-height: 420px;
  background: #fff;
  border: 1px solid #c5d0d4;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.notif-panel[hidden] { display: none !important; }
.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .85rem;
  border-bottom: 1px solid #e0e8eb;
}
.notif-list {
  overflow: auto;
  max-height: 340px;
}
.notif-item {
  display: flex;
  gap: .55rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #eef2f4;
  background: #fff;
  padding: .65rem .85rem;
  cursor: pointer;
  font: inherit;
}
.notif-item:hover { background: #f4f8f9; }
.notif-icon { font-size: 1.1rem; flex-shrink: 0; }
.notif-msg { display: block; font-size: .82rem; }
.notif-meta { font-size: .72rem; }

.planif-kpi { margin-top: .75rem; }
.planif-actions { display: flex; flex-wrap: wrap; gap: .35rem; max-width: 280px; }
.cons-panel {
  margin-top: .75rem;
  min-height: 2rem;
}
.cons-panel .table-wrap {
  margin-top: .65rem;
  max-height: 360px;
}

.admin-unidades td { font-size: .8rem; }
.admin-avance {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 90px;
}
.admin-avance .flow-bar {
  flex: 1;
  margin: 0;
  height: 5px;
}
.admin-form .field textarea { min-height: 60px; }

/* ——— Matriz FODA (diseño wizard) ——— */
.foda-meta { margin-bottom: 1rem; }

.foda-stepper {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 1rem 0 1.25rem;
  padding: .65rem;
  background: #f4f7f8;
  border-radius: 10px;
  border: 1px solid #d5e0e4;
}
.foda-step {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 1;
  min-width: 160px;
  text-align: left;
  background: #fff;
  border: 1px solid #cfdadf;
  border-radius: 8px;
  padding: .55rem .7rem;
  cursor: pointer;
}
.foda-step small { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; }
.foda-step-num {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e4ecef;
  color: #345;
  font-weight: 700;
  font-size: .85rem;
  flex-shrink: 0;
}
.foda-step.active {
  border-color: var(--teal);
  box-shadow: 0 0 0 2px rgba(32, 88, 100, .15);
}
.foda-step.active .foda-step-num {
  background: var(--teal);
  color: #fff;
}
.foda-step.done .foda-step-num {
  background: #1a7a4c;
  color: #fff;
}

.foda-ai-hint {
  font-size: .75rem;
  margin: -.35rem 0 .85rem;
}
.foda-origen {
  font-size: .68rem;
  line-height: 1.3;
  color: var(--muted);
  margin-top: .25rem;
}
.foda-origen b { color: var(--teal-dark); }

.foda-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: .85rem;
}
.foda-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.foda-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  position: relative;
  margin-top: .85rem;
}
.foda-matrix.foda-layout-h {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  overflow-x: auto;
}
.foda-matrix.foda-layout-h .foda-center { display: none; }
.foda-matrix.foda-layout-v {
  grid-template-columns: 1fr;
}
.foda-matrix.foda-layout-v .foda-center { display: none; }
.foda-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
.foda-badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c5d0d4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  font-weight: 800;
  font-size: .75rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.foda-badge .c-f { color: #1a7a4c; }
.foda-badge .c-o { color: #1f6fbf; }
.foda-badge .c-d { color: #c45f12; }
.foda-badge .c-a { color: #b3261e; }

.foda-q {
  border: 1px solid #d0d9dd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.foda-q-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  padding: .55rem .75rem;
}
.foda-q-head h4 { margin: 0; font-size: .92rem; }
.foda-q-head .muted { font-size: .72rem; }
.foda-count {
  font-size: .75rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
}
.foda-q-body {
  max-height: 280px;
  margin: 0;
  border: none;
  border-radius: 0;
}
.foda-table { font-size: .78rem; }
.foda-table th { white-space: nowrap; }
.foda-table textarea {
  width: 100%;
  min-width: 0;
  min-height: 3.4rem;
  font-size: .78rem;
  resize: vertical;
}
.foda-code { font-weight: 700; white-space: nowrap; width: 2.5rem; }
.foda-c-f { color: #1a7a4c; }
.foda-c-o { color: #1f6fbf; }
.foda-c-d { color: #c45f12; }
.foda-c-a { color: #b3261e; }

.foda-q-f .foda-q-head { background: #e8f6ee; color: #145c3a; }
.foda-q-o .foda-q-head { background: #e8f1fb; color: #1a4f8c; }
.foda-q-d .foda-q-head { background: #fff0e4; color: #8a4208; }
.foda-q-a .foda-q-head { background: #fdeceb; color: #8b1e18; }

.foda-imp {
  display: inline-block;
  margin-top: .25rem;
  font-size: .68rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 999px;
}
.imp-f-alto, .imp-o-alto { background: #d9f2e3; color: #146c3e; }
.imp-a-alto { background: #fadad8; color: #9b1c16; }
.imp-medio { background: #ffe8cc; color: #8a4b00; }
.imp-bajo { background: #e8eef1; color: #445; }

.foda-acts { width: 2rem; text-align: center; }
.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--teal-dark);
  font-size: .95rem;
  padding: .15rem;
}
.icon-btn:hover { color: var(--danger); }
.clear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
html[data-theme="dark"] .clear-btn:hover { color: var(--dk-danger-text); }

.foda-resumen {
  margin: .85rem 0 0;
  padding: .85rem 1rem 1rem;
  background: #fff;
  border: 2px solid #205864;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(32, 88, 100, .08);
}
.foda-step-head {
  margin: 0 0 .75rem;
}
.foda-step-head h3 {
  margin: 0 0 .2rem;
  color: #1a3a4a;
}
.foda-resumen-title {
  margin: 0 0 .75rem;
  font-size: .95rem;
  color: #1a3a4a;
  font-weight: 700;
}
.foda-resumen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .65rem;
}
.foda-resumen-card {
  border-radius: 10px;
  padding: .7rem .85rem;
  min-height: 88px;
}
.foda-resumen-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.foda-resumen-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.foda-resumen-body b {
  display: block;
  font-size: 1.55rem;
  line-height: 1.1;
  color: #122;
  font-weight: 800;
}
.foda-resumen-body span:not(.foda-resumen-ico) {
  font-size: .72rem;
  color: #6a7a82;
}
.foda-resumen-ico {
  display: grid;
  place-items: center;
  opacity: .9;
}
.foda-resumen-card.f {
  background: #eaf7ef;
}
.foda-resumen-card.f .foda-resumen-label,
.foda-resumen-card.f .foda-resumen-ico { color: #1a7a4c; }
.foda-resumen-card.o {
  background: #eaf2fb;
}
.foda-resumen-card.o .foda-resumen-label,
.foda-resumen-card.o .foda-resumen-ico { color: #1f6fbf; }
.foda-resumen-card.d {
  background: #fff3e6;
}
.foda-resumen-card.d .foda-resumen-label,
.foda-resumen-card.d .foda-resumen-ico { color: #c45f12; }
.foda-resumen-card.a {
  background: #fdeceb;
}
.foda-resumen-card.a .foda-resumen-label,
.foda-resumen-card.a .foda-resumen-ico { color: #b3261e; }

/* Modal opciones de vista FODA */
.foda-vista-card { max-width: 720px; }
.foda-vista-body {
  padding: 0 1rem 1rem;
  overflow: auto;
  max-height: min(70vh, 640px);
}
.foda-vista-body h4 {
  margin: 1rem 0 .55rem;
  font-size: .9rem;
  color: #1a3a4a;
}
.foda-vista-layouts {
  display: grid;
  gap: .5rem;
}
.foda-layout-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .75rem;
  border: 1px solid #d0d9dd;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.foda-layout-opt.selected {
  border-color: #1f6fbf;
  box-shadow: 0 0 0 2px rgba(31, 111, 191, .18);
  background: #f3f8fd;
}
.foda-layout-opt input { accent-color: #1f6fbf; }
.foda-layout-opt b { display: block; font-size: .88rem; }
.foda-layout-opt small { display: block; color: var(--muted); font-size: .75rem; }
.foda-layout-ico {
  width: 36px;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex-shrink: 0;
}
.foda-layout-ico i {
  display: block;
  background: #8aa4b3;
  border-radius: 2px;
  min-height: 10px;
}
.foda-layout-opt.selected .foda-layout-ico i { background: #1f6fbf; }
.foda-ico-h {
  grid-template-columns: repeat(4, 1fr);
  height: 14px;
  align-self: center;
}
.foda-ico-v {
  grid-template-columns: 1fr;
  width: 14px;
  height: 36px;
}
.foda-vista-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.25rem;
}
.foda-vista-cols > div {
  display: grid;
  gap: .3rem;
  font-size: .85rem;
}
.foda-vista-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 400;
  cursor: pointer;
}
.foda-toggle {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .45rem 0;
  cursor: pointer;
  font-size: .88rem;
}
.foda-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.foda-toggle-ui {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #c5d0d4;
  position: relative;
  flex-shrink: 0;
  transition: background .15s;
}
.foda-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.foda-toggle input:checked + .foda-toggle-ui {
  background: #1f6fbf;
}
.foda-toggle input:checked + .foda-toggle-ui::after {
  transform: translateX(18px);
}
.foda-vista-actions {
  justify-content: space-between;
  border-top: 1px solid #d5e0e4;
  padding: .85rem 1rem;
  margin: 0;
}

.foda-est-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.foda-est-card .foda-q-body { max-height: 320px; }

.foda-results-title { margin: .5rem 0 .25rem; }
.foda-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: .75rem;
}
.foda-results-grid .foda-q-body { max-height: 220px; }

.foda-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #d5e0e4;
}

@media (max-width: 1100px) {
  .foda-results-grid { grid-template-columns: 1fr 1fr; }
  .foda-center { display: none; }
}
@media (max-width: 760px) {
  .foda-matrix,
  .foda-est-grid,
  .foda-results-grid,
  .foda-resumen-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Rediseño de navegación + vista de revisión con notas
   ============================================================ */

/* Contexto del proceso activo en el sidebar */
.ctx-block {
  background: #eef4f6;
  border: 1px solid #cfe0e5;
  border-radius: 8px;
  padding: .55rem .6rem;
  margin-bottom: .5rem;
}
.ctx-block .ctx-line { font-size: .85rem; margin: .15rem 0; }
.ctx-block .btn {
  background: #fff;
  color: var(--teal);
  border: 1px solid var(--teal);
}
.ctx-block .btn:hover { background: #e8f1f3; color: var(--teal-dark); }

/* Barra horizontal de pasos (dentro del contenido) */
.steps-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  background: #fff;
  border: 1px solid #c5d0d4;
  border-radius: 8px;
  padding: .5rem .6rem;
  margin-bottom: 1rem;
}
.steps-bar .flow-step {
  flex: 1 1 auto;
  min-width: 96px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  padding: .45rem .6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: #eef1f3;
  color: #556;
  cursor: pointer;
  font-family: inherit;
}
.steps-bar .flow-step:hover { background: #e2eaee; }
.steps-bar .flow-step.current {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
  background: #fff;
}
.steps-bar .flow-step.locked {
  opacity: .55;
  cursor: not-allowed;
  background: #f0f0f0;
  color: #99a;
}
.steps-bar .flow-step.done { background: #d9f5e3; color: #146b34; }
.steps-bar .flow-step.sent { background: #dcecff; color: #134a86; }
.steps-bar .flow-step.returned { background: #ffe0e0; color: #8a2020; }
.steps-bar .flow-step.draft { background: #fff4d6; color: #7a5a00; }

/* Notas/observaciones colapsables (privadas de Planificación) */
.notas-panel {
  background: #fff;
  border: 1px solid #e6cf9a;
  border-radius: 8px;
  padding: .6rem .8rem;
  margin-bottom: 1rem;
}
.notas-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.notas-panel-head h3 { margin: 0; font-size: .95rem; color: #8a5a00; }
.notas-panel .nota-composer { margin: .35rem 0 .5rem; }
.notas-panel .nota-composer select {
  width: 100%;
  margin-bottom: .35rem;
}

.nota {
  border: 1px solid #e6cf9a;
  border-radius: 8px;
  background: #fffdf7;
  margin: .45rem 0 .6rem;
  overflow: hidden;
}
.nota.resuelta { opacity: .55; }
.nota-cab {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .6rem;
  background: #fff7e6;
  cursor: pointer;
}
.nota-cab:hover { background: #fff1d6; }
.nota-chevron { color: #8a5a00; font-size: .8rem; width: .8rem; }
.nota-tag {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  background: #c47f00;
  color: #fff;
  border-radius: 999px;
  padding: .05rem .5rem;
  white-space: nowrap;
}
.nota-preview {
  flex: 1;
  font-size: .82rem;
  color: #6b4a00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nota-meta-mini { font-size: .68rem; color: #9a7b4a; white-space: nowrap; }
.nota-cuerpo { padding: .5rem .7rem .6rem; border-top: 1px dashed #e6cf9a; }
.nota-texto { font-size: .85rem; color: #333; white-space: pre-wrap; margin-bottom: .4rem; }
.nota-autor {
  font-size: .72rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.nota-composer textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  font: inherit;
  padding: .4rem .5rem;
  border: 1px solid #c5d0d4;
  border-radius: 6px;
}

/* ===================== Panel por unidad · tema moderno ===================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr; } }

.ro {
  border: 1px solid #e2eaed;
  background: #f6fafb;
  border-radius: 10px;
  padding: .5rem .6rem;
  font-size: .88rem;
}

.kpi .chip.accent { border-color: #8bb8de; background: #eaf4fc; }
.kpi .chip.warn { border-color: #e0c36a; background: #fff8e6; }
.kpi .chip.danger { border-color: #e0a0a0; background: #fdeeee; }

/* —— Shell moderno (nav + barra superior) —— */
.sidebar { background: #14343c; border-right: 1px solid #0e2a31; }
.sidebar .sec { color: #7fa6b0; }
.sidebar button { color: #cfe0e5; }
.sidebar button:hover { background: rgba(255, 255, 255, .07); }
.sidebar button.active { background: var(--accent); color: #04222a; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.sidebar button.active:hover { background: var(--accent-dark); color: #fff; }
.sidebar .ctx-block { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .2); color: #e6f1f4; }
.sidebar .ctx-block .muted { color: #9dc0c9; }
.sidebar .ctx-block .btn.secondary { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); color: #eaf6fa; }
.topbar { background: linear-gradient(120deg, #123840, #1c6b7d); border-bottom-color: #0d2a31; }

/* —— Panel —— */
.panel .card { border-color: transparent; border-radius: 16px; box-shadow: 0 8px 22px rgba(16, 42, 49, .08); }

.p-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.p-head .hi { width: 2rem; height: 2rem; border-radius: 12px; display: grid; place-items: center; background: rgba(23, 162, 184, .14); color: var(--accent-dark); font-size: 1.05rem; flex-shrink: 0; }
.p-head h3 { margin: 0; font-size: 1rem; color: var(--teal-dark); }
.p-head h2 { margin: 0; font-size: 1.12rem; color: var(--teal-dark); }
.p-head .sub { font-size: .74rem; color: var(--muted); }

.p-status { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 14px; border-left: 5px solid var(--teal); background: #f3f7f8; margin-bottom: .9rem; }
.p-status .ico { font-size: 1.25rem; }
.p-status b { color: var(--teal-dark); }
.p-status.ok { border-color: var(--ok); background: #eefaf2; }
.p-status.sent { border-color: var(--info); background: #f0f7ff; }
.p-status.dev { border-color: var(--danger); background: #fdf1f1; }
.p-status.draft { border-color: var(--warn); background: #fffaf0; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .7rem; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: .9rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(16, 42, 49, .08); }
.stat .ico { width: 2.7rem; height: 2.7rem; border-radius: 15px; display: grid; place-items: center; font-size: 1.2rem; background: #eef2f4; flex-shrink: 0; }
.stat .num { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--teal-dark); letter-spacing: -.02em; }
.stat .lbl { font-size: .76rem; color: var(--muted); }
.stat .sub { font-size: .68rem; color: var(--muted); opacity: .9; }
.stat.accent { background: linear-gradient(165deg, #e2f1fb, #f7fcff); }
.stat.accent .ico { background: #cfe6f7; }
.stat.warn { background: linear-gradient(165deg, #fff2cf, #fffbef); }
.stat.warn .ico { background: #ffe7a8; }
.stat.danger { background: linear-gradient(165deg, #fbdcdc, #fef5f5); }
.stat.danger .ico { background: #f6c9c9; }
.stat.ok { background: linear-gradient(165deg, #d8f3e3, #f4fbf7); }
.stat.ok .ico { background: #bfe8cf; }

.p-steps { position: relative; display: flex; gap: .4rem; }
.p-steps::before { content: ""; position: absolute; left: 9%; right: 9%; top: 1.15rem; height: 2px; background: #d5e0e4; }
.p-step { flex: 1; position: relative; z-index: 1; text-align: center; padding: .5rem .4rem; border: 0; background: transparent; font: inherit; color: inherit; cursor: default; }
.panel .p-step[data-abrir-editor] { cursor: pointer; border-radius: 12px; }
.panel .p-step[data-abrir-editor]:hover { background: rgba(23, 162, 184, .1); }
.p-step .n { width: 1.7rem; height: 1.7rem; margin: 0 auto .25rem; border-radius: 50%; display: grid; place-items: center; background: #eef1f3; color: #667; font-weight: 800; font-size: .78rem; border: 3px solid #eef3f5; box-shadow: 0 0 0 1px #d5e0e4; }
.p-step .nm { font-size: .72rem; font-weight: 700; color: #345; }
.p-step .st { font-size: .63rem; color: var(--muted); }
.p-step.done .n { background: var(--ok); color: #fff; }
.p-step.sent .n { background: var(--info); color: #fff; }
.p-step.returned .n { background: var(--danger); color: #fff; }
.p-step.draft .n { background: var(--warn); color: #111; }

.pending-list { display: grid; gap: .6rem; }
.pending-item { border: 0; border-left: 5px solid var(--warn); background: #fffdf5; border-radius: 14px; padding: .65rem .8rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; box-shadow: 0 6px 16px rgba(16, 42, 49, .07); }
.pending-item .body { flex: 1; min-width: 190px; }
.pending-item .body b { color: var(--teal-dark); }
.pending-item .inbox-meta { font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.pending-item.sent { border-left-color: var(--info); background: #f4f9ff; }

.unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
.unit-card { border: 0; border-radius: 16px; background: #fff; padding: .85rem .95rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: 0 8px 22px rgba(16, 42, 49, .08); transition: box-shadow .18s, transform .18s; }
.unit-card:hover { box-shadow: 0 14px 30px rgba(16, 42, 49, .13); transform: translateY(-2px); }
.unit-card .head { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; }
.unit-card .head b { color: var(--teal-dark); }
.unit-card .minis { display: flex; flex-wrap: wrap; gap: .2rem; }
.unit-card .minis .badge { font-size: .6rem; padding: .1rem .36rem; }
.unit-card .pend { font-size: .74rem; color: var(--danger); font-weight: 700; }
.unit-card .foot { margin-top: auto; }
.progress { height: 7px; background: #e6edf0; border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

.eff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
@media (max-width: 980px) { .eff-grid { grid-template-columns: 1fr 1fr; } }
.eff-card { border: 0; border-radius: 14px; padding: .65rem .75rem; background: #fff; box-shadow: 0 5px 16px rgba(16, 42, 49, .07); }
.eff-card .t { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.eff-card .meses { font-size: .72rem; color: var(--muted); margin: .25rem 0 .4rem; }

.nota-item { border-left: 4px solid var(--accent); background: #f4f9fa; border-radius: 0 12px 12px 0; padding: .55rem .75rem; margin-bottom: .5rem; }
.nota-item .meta { font-size: .72rem; color: var(--muted); }
.nota-item .txt { font-size: .86rem; margin-top: .15rem; white-space: pre-wrap; }
.pill {
  font-size: .65rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  background: #e4eef1;
  color: #345;
  font-weight: 700;
  display: inline-block;
}
.pill.seccion { background: #ede4f7; color: #5a2f86; }
.pill.resuelta { background: #d9f5e3; color: #146b34; }

.timeline { position: relative; padding-left: 1.15rem; }
.timeline::before { content: ""; position: absolute; left: .32rem; top: .3rem; bottom: .3rem; width: 2px; background: #dbe4e7; }
.tl { position: relative; padding-bottom: .7rem; }
.tl::before { content: ""; position: absolute; left: -1.02rem; top: .25rem; width: .6rem; height: .6rem; border-radius: 50%; background: #b9c7cc; border: 2px solid #fff; box-shadow: 0 0 0 1px #dbe4e7; }
.tl.ok::before { background: var(--ok); }
.tl.dev::before { background: var(--danger); }
.tl.send::before { background: var(--info); }
.tl .when { font-size: .68rem; color: var(--muted); }
.tl .what { font-size: .83rem; }
.tl .what b { color: var(--teal-dark); }

.empty { text-align: center; padding: 1.2rem; color: var(--muted); }
.empty .ei { font-size: 1.8rem; opacity: .6; }

.panel .btn { border-radius: 999px; }
.panel .btn.ghost { background: #fff; border-color: var(--accent); color: var(--accent-dark); }
.panel .badge { letter-spacing: .01em; }

.btn.ok { background: var(--ok); }
.btn.ok:hover { background: #14642f; }

/* ===================== Ajustes de Contexto (FODA) ===================== */

/* Cabecera del documento: migas + chips + acciones */
.dv-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.dv-crumb { font-size: .74rem; color: var(--muted); margin-bottom: .15rem; }
.meta-chips { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.chipm { font-size: .7rem; background: #eef3f5; border-radius: 999px; padding: .16rem .55rem; color: #456; }

/* Sin scroll interno en los cuadrantes (crecen con el contenido) */
.foda-q-body,
.foda-est-card .foda-q-body,
.foda-results-grid .foda-q-body { max-height: none; overflow: visible; }

/* Matriz FODA: anchos de columna con prioridad para la Descripción */
.foda-matrix .foda-table { table-layout: fixed; }
.foda-matrix .foda-table th,
.foda-est-grid .foda-table th { white-space: normal; }
.foda-matrix .foda-table .col-code { width: 3.1rem; }
.foda-matrix .foda-table .col-acc { width: 2.4rem; }
.foda-matrix .foda-table .col-cat { width: 32%; }
.foda-matrix .foda-table .col-fuente { width: 22%; }
.foda-matrix .foda-table .col-impacto { width: 17%; }
.foda-matrix .foda-table textarea,
.foda-est-grid .foda-table textarea { min-width: 0; width: 100%; }

/* Estrategias: la Estrategia propuesta ocupa la mayor parte del ancho */
.foda-est-grid .foda-table { table-layout: fixed; }
.foda-est-grid .foda-table .col-code { width: 3.2rem; }
.foda-est-grid .foda-table .col-left,
.foda-est-grid .foda-table .col-right { width: 22%; }
.foda-est-grid .foda-table .col-estrategia textarea { min-height: 5rem; }

/* Impacto: un solo control, con color según el valor */
select.foda-impacto {
  width: auto;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  font-size: .74rem;
  padding: .22rem .5rem;
  cursor: pointer;
}
select.foda-impacto.imp-alto { background: #fadad8; color: #9b1c16; }
select.foda-impacto.imp-medio { background: #ffe8cc; color: #8a4b00; }
select.foda-impacto.imp-bajo { background: #e8eef1; color: #445; }
select.foda-impacto:disabled { cursor: default; opacity: 1; }

/* ============================================================
   Selector de tema claro / oscuro
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2.25rem;
  min-height: 2.1rem;
  padding: .35rem .5rem;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: inherit;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .22); }
.theme-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.theme-toggle-ico { display: flex; align-items: center; justify-content: center; line-height: 1; }

.topbar .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .8); }
.topbar .btn.ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.login-theme {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 5;
}
.login-theme .theme-toggle {
  border-color: #9aabb3;
  background: rgba(255, 255, 255, .9);
  color: #163f48;
}
.login-theme .theme-toggle:hover { background: #fff; }
.login-theme .theme-toggle:focus-visible { outline-color: var(--teal); }

/* ============================================================
   MODO OSCURO
   Paleta azul-petróleo alineada con la marca. Los contrastes de
   texto principales superan 4.5:1 (WCAG AA) y los estados 7:1.
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: #4d727c #16262b;

  --teal: #2a7f8d;
  --teal-dark: #9be3ec;
  --card: #16262b;
  --muted: #a8bcc2;
  --accent: #3fc4d6;
  --accent-dark: #6fd8e5;

  --dk-bg: #0e1a1f;
  --dk-surface: #16262b;
  --dk-surface-2: #1b2f35;
  --dk-surface-3: #213a41;
  --dk-sidebar: #0b1a1e;
  --dk-border: #2e464e;
  --dk-border-strong: #4d727c;
  --dk-text: #e7eff1;
  --dk-muted: #a8bcc2;
  --dk-placeholder: #8aa0a8;
  --dk-input: #122127;
  --dk-readonly: #1a2a2f;
  --dk-accent: #8fdfe9;
  --dk-ok-text: #7ee2a8;
  --dk-ok-bg: #123528;
  --dk-ok-border: #2a6b48;
  --dk-warn-text: #ffd166;
  --dk-warn-bg: #3a2d0d;
  --dk-warn-border: #6b5518;
  --dk-danger-text: #ff9d9d;
  --dk-danger-bg: #3a1618;
  --dk-danger-border: #6e2b2e;
  --dk-info-text: #8ec5ff;
  --dk-info-bg: #102c46;
  --dk-info-border: #28527d;
  --dk-neutral-bg: #24343a;
  --dk-neutral-text: #c3d2d7;
}

html[data-theme="dark"] body {
  background: linear-gradient(160deg, #0b1519 0%, #102329 45%, #0a1418 100%);
  color: var(--dk-text);
}
html[data-theme="dark"] ::selection { background: #2a6470; color: #fff; }
html[data-theme="dark"] :focus-visible { outline-color: var(--accent); }
html[data-theme="dark"] .muted { color: var(--dk-muted); }
html[data-theme="dark"] .boot { color: var(--dk-muted); }

/* Barra superior y navegación */
html[data-theme="dark"] .topbar {
  background: linear-gradient(120deg, #0b242b, #124450);
  border-bottom-color: #071a1f;
  color: #eaf4f6;
}
html[data-theme="dark"] .topbar .meta { color: #a8c4cb; opacity: .9; }
html[data-theme="dark"] .topbar img { background: #fff; }
html[data-theme="dark"] .topbar .btn.ghost { color: #eaf4f6; border-color: #5a8b96; }
html[data-theme="dark"] .topbar .btn.ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

html[data-theme="dark"] .sidebar { background: var(--dk-sidebar); border-right-color: #071a1f; }
html[data-theme="dark"] .sidebar .sec { color: #7fa6b0; }
html[data-theme="dark"] .sidebar button { color: #cfe0e5; }
html[data-theme="dark"] .sidebar button:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .sidebar button.active { background: var(--accent); color: #04222a; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .sidebar button.active:hover { background: #56cede; color: #04222a; }
html[data-theme="dark"] .sidebar button.nav-locked:hover { background: transparent; }

html[data-theme="dark"] .ctx-block { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .2); color: #e6f1f4; }
html[data-theme="dark"] .ctx-block .muted { color: #9dc0c9; }
html[data-theme="dark"] .ctx-block .btn { background: rgba(255, 255, 255, .12); color: #eaf6fa; border-color: rgba(255, 255, 255, .32); }
html[data-theme="dark"] .ctx-block .btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Tarjetas y títulos */
html[data-theme="dark"] .card {
  background: var(--dk-surface);
  border-color: var(--dk-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 26px rgba(0, 0, 0, .22);
}
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .modal-head h3,
html[data-theme="dark"] .p-head h2,
html[data-theme="dark"] .p-head h3,
html[data-theme="dark"] .kpi .chip b,
html[data-theme="dark"] .p-status b,
html[data-theme="dark"] .stat .num,
html[data-theme="dark"] .pending-item .body b,
html[data-theme="dark"] .unit-card .head b,
html[data-theme="dark"] .tl .what b,
html[data-theme="dark"] .foda-step-head h3,
html[data-theme="dark"] .foda-resumen-title,
html[data-theme="dark"] .foda-vista-body h4 { color: var(--dk-accent); }

/* Formularios */
html[data-theme="dark"] label { color: var(--dk-muted); }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--dk-input);
  color: var(--dk-text);
  border-color: var(--dk-border-strong);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--dk-placeholder); opacity: 1; }
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(63, 196, 214, .35);
  outline-offset: 1px;
}
html[data-theme="dark"] option { background: var(--dk-surface-2); color: var(--dk-text); }
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] { accent-color: var(--accent); }

html[data-theme="dark"] input[readonly],
html[data-theme="dark"] textarea[readonly] {
  background: var(--dk-readonly) !important;
  color: #c9d8dc !important;
}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] textarea:disabled,
html[data-theme="dark"] select:disabled { background: var(--dk-readonly); color: #c9d8dc; }
html[data-theme="dark"] input[readonly].rel-auto,
html[data-theme="dark"] input[data-f="relacion"] { background: #1f333a !important; color: var(--dk-text); }

html[data-theme="dark"] .field-invalid,
html[data-theme="dark"] input.field-invalid,
html[data-theme="dark"] select.field-invalid,
html[data-theme="dark"] textarea.field-invalid {
  background: #331b1e !important;
  border-color: var(--dk-danger-text) !important;
  box-shadow: 0 0 0 1px rgba(255, 157, 157, .25);
}
html[data-theme="dark"] .guide-month { background: #14324a !important; color: #cfe8ff; }

/* Botones */
html[data-theme="dark"] .btn { background: var(--teal); color: #fff; }
html[data-theme="dark"] .btn:hover { background: #22616c; }
html[data-theme="dark"] .btn.secondary { background: #3d555e; color: #fff; }
html[data-theme="dark"] .btn.secondary:hover { background: #4a6873; }
html[data-theme="dark"] .btn.ghost { background: transparent; color: var(--dk-accent); border-color: #4f95a2; }
html[data-theme="dark"] .btn.ghost:hover { background: rgba(63, 196, 214, .12); color: #bff2f8; }
html[data-theme="dark"] .panel .btn.ghost { background: transparent; border-color: var(--accent); color: var(--dk-accent); }
html[data-theme="dark"] .panel .btn.ghost:hover { background: rgba(63, 196, 214, .12); }

/* Badges y estados */
html[data-theme="dark"] .st-no_iniciado { background: var(--dk-neutral-bg); color: var(--dk-neutral-text); }
html[data-theme="dark"] .st-en_elaboracion { background: var(--dk-warn-bg); color: var(--dk-warn-text); }
html[data-theme="dark"] .st-enviado { background: var(--dk-info-bg); color: var(--dk-info-text); }
html[data-theme="dark"] .st-revisado { background: rgba(45, 212, 191, 0.16); color: #5eead4; }
html[data-theme="dark"] .st-devuelto { background: var(--dk-danger-bg); color: var(--dk-danger-text); }
html[data-theme="dark"] .st-aprobado { background: var(--dk-ok-bg); color: var(--dk-ok-text); }

html[data-theme="dark"] .save-status[data-state="saving"] { background: var(--dk-warn-bg); color: var(--dk-warn-text); }
html[data-theme="dark"] .save-status[data-state="saved"] { background: var(--dk-ok-bg); color: var(--dk-ok-text); }
html[data-theme="dark"] .save-status[data-state="error"] { background: var(--dk-danger-bg); color: var(--dk-danger-text); }

/* Tablas */
html[data-theme="dark"] .table-wrap { background: var(--dk-surface); border-color: var(--dk-border-strong); }
html[data-theme="dark"] table.data { background: var(--dk-surface); }
html[data-theme="dark"] table.data th { background: #1c3f47; color: #eaf4f6; }
html[data-theme="dark"] table.data td { border-top-color: var(--dk-border); }
html[data-theme="dark"] table.data tr:nth-child(even) td { background: #182a30; }
html[data-theme="dark"] table.data input,
html[data-theme="dark"] table.data select,
html[data-theme="dark"] table.data textarea { background: var(--dk-input); color: var(--dk-text); border-color: var(--dk-border); }
html[data-theme="dark"] .u-tipo { background: #12262c; border-color: var(--dk-border); color: #9fc0c7; }
html[data-theme="dark"] table.data.unidades tr.u-grupo td { background: #1b333a; }
html[data-theme="dark"] table.data.unidades tr.u-hija td { background: #142329; }
html[data-theme="dark"] .u-toggle:hover .u-nombre { color: var(--dk-accent); }
html[data-theme="dark"] .table-sticky thead th { box-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
html[data-theme="dark"] .foda-table select.cat-select { background: var(--dk-input); color: var(--dk-text); }

/* Login */
html[data-theme="dark"] .login-wrap {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(23, 162, 184, .18), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(32, 88, 100, .28), transparent 45%),
    linear-gradient(160deg, #0a1418, #102329);
}
html[data-theme="dark"] .login-card {
  background: var(--dk-surface);
  border-color: var(--dk-border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .login-card img { background: #fff; border-radius: 6px; padding: 2px 4px; }
html[data-theme="dark"] .hint { color: var(--dk-muted); }
html[data-theme="dark"] .login-theme .theme-toggle { background: rgba(22, 38, 43, .92); border-color: var(--dk-border-strong); color: var(--dk-text); }
html[data-theme="dark"] .login-theme .theme-toggle:hover { background: var(--dk-surface-2); }
html[data-theme="dark"] .login-theme .theme-toggle:focus-visible { outline-color: var(--accent); }

/* Avisos y notificaciones */
html[data-theme="dark"] .aviso { background: var(--dk-warn-bg); border-color: var(--dk-warn-border); color: var(--dk-warn-text); }
html[data-theme="dark"] .aviso-ok { background: var(--dk-ok-bg); border-color: var(--dk-ok-border); color: var(--dk-ok-text); }
html[data-theme="dark"] .aviso-info { background: var(--dk-info-bg); border-color: var(--dk-info-border); color: var(--dk-info-text); }
html[data-theme="dark"] .toast { background: var(--dk-surface-3); color: #eaf4f6; border: 1px solid var(--dk-border-strong); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
html[data-theme="dark"] .notif-panel { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .notif-head { border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .notif-item { background: var(--dk-surface); color: var(--dk-text); border-bottom-color: #22373e; }
html[data-theme="dark"] .notif-item:hover { background: var(--dk-surface-2); }
html[data-theme="dark"] .notif-meta { color: var(--dk-muted); }

/* KPIs, chips y tarjetas de estadística */
html[data-theme="dark"] .kpi .chip { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .kpi .chip.accent { background: var(--dk-info-bg); border-color: var(--dk-info-border); }
html[data-theme="dark"] .kpi .chip.warn { background: var(--dk-warn-bg); border-color: var(--dk-warn-border); }
html[data-theme="dark"] .kpi .chip.danger { background: var(--dk-danger-bg); border-color: var(--dk-danger-border); }
html[data-theme="dark"] .stat { background: var(--dk-surface); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .stat .ico { background: var(--dk-surface-3); }
html[data-theme="dark"] .stat.accent { background: linear-gradient(165deg, #133247, #16262b); }
html[data-theme="dark"] .stat.accent .ico { background: #1c4664; }
html[data-theme="dark"] .stat.warn { background: linear-gradient(165deg, #3a2d0d, #16262b); }
html[data-theme="dark"] .stat.warn .ico { background: #5a4512; }
html[data-theme="dark"] .stat.danger { background: linear-gradient(165deg, #3a1618, #16262b); }
html[data-theme="dark"] .stat.danger .ico { background: #5e2427; }
html[data-theme="dark"] .stat.ok { background: linear-gradient(165deg, #123528, #16262b); }
html[data-theme="dark"] .stat.ok .ico { background: #1d5138; }

/* Flujo, pasos y estados de guardado */
html[data-theme="dark"] .flow-progress { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .flow-progress-head { color: var(--dk-muted); }
html[data-theme="dark"] .flow-bar { background: #2b434b; }
html[data-theme="dark"] .flow-bar-fill { background: var(--accent); }
html[data-theme="dark"] .flow-step { background: var(--dk-neutral-bg); color: var(--dk-neutral-text); }
html[data-theme="dark"] .flow-step.done { background: var(--dk-ok-bg); color: var(--dk-ok-text); }
html[data-theme="dark"] .flow-step.sent { background: var(--dk-info-bg); color: var(--dk-info-text); }
html[data-theme="dark"] .flow-step.returned { background: var(--dk-danger-bg); color: var(--dk-danger-text); }
html[data-theme="dark"] .flow-step.draft { background: var(--dk-warn-bg); color: var(--dk-warn-text); }
html[data-theme="dark"] .steps-bar { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .steps-bar .flow-step { background: var(--dk-neutral-bg); color: var(--dk-neutral-text); }
html[data-theme="dark"] .steps-bar .flow-step:hover { background: var(--dk-surface-3); }
html[data-theme="dark"] .steps-bar .flow-step.current { background: var(--dk-surface-2); outline-color: var(--accent); }
html[data-theme="dark"] .steps-bar .flow-step.locked { background: #1c2b30; color: #9db2b9; opacity: 1; }
html[data-theme="dark"] .steps-bar .flow-step.done { background: var(--dk-ok-bg); color: var(--dk-ok-text); }
html[data-theme="dark"] .steps-bar .flow-step.sent { background: var(--dk-info-bg); color: var(--dk-info-text); }
html[data-theme="dark"] .steps-bar .flow-step.returned { background: var(--dk-danger-bg); color: var(--dk-danger-text); }
html[data-theme="dark"] .steps-bar .flow-step.draft { background: var(--dk-warn-bg); color: var(--dk-warn-text); }

html[data-theme="dark"] .p-steps::before { background: #2b434b; }
html[data-theme="dark"] .p-step .n { background: var(--dk-surface-3); color: var(--dk-neutral-text); border-color: var(--dk-surface); box-shadow: 0 0 0 1px #2b434b; }
html[data-theme="dark"] .p-step .nm { color: #c6d6db; }
html[data-theme="dark"] .p-step .st { color: var(--dk-muted); }

html[data-theme="dark"] .p-status { background: var(--dk-surface-2); border-left-color: var(--accent); }
html[data-theme="dark"] .p-status.ok { background: var(--dk-ok-bg); border-color: #38a86a; }
html[data-theme="dark"] .p-status.sent { background: var(--dk-info-bg); border-color: #3c78b4; }
html[data-theme="dark"] .p-status.dev { background: var(--dk-danger-bg); border-color: #c05252; }
html[data-theme="dark"] .p-status.draft { background: var(--dk-warn-bg); border-color: #b8860b; }

/* Modales */
html[data-theme="dark"] .modal-overlay { background: rgba(3, 10, 12, .72); }
html[data-theme="dark"] .modal-card { background: var(--dk-surface); color: var(--dk-text); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .modal-head { border-bottom-color: var(--dk-border); }
html[data-theme="dark"] .modal-actions { border-top-color: var(--dk-border); }
html[data-theme="dark"] .modal-close { color: var(--dk-muted); }
html[data-theme="dark"] .modal-close:hover { color: var(--dk-text); }
html[data-theme="dark"] .modal-pdf iframe { background: #fff; border: 1px solid var(--dk-border); }

/* FODA: stepper, cuadrantes y matriz */
html[data-theme="dark"] .foda-stepper { background: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .foda-step { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .foda-step small { color: var(--dk-muted); }
html[data-theme="dark"] .foda-step-num { background: var(--dk-surface-3); color: #c9d8dc; }
html[data-theme="dark"] .foda-step.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63, 196, 214, .2); }
html[data-theme="dark"] .foda-step.active .foda-step-num { background: var(--accent); color: #04222a; }
html[data-theme="dark"] .foda-step.done .foda-step-num { background: #1a7a4c; color: #fff; }

html[data-theme="dark"] .foda-badge { background: var(--dk-surface); border-color: var(--dk-border-strong); box-shadow: 0 2px 10px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .foda-badge .c-f,
html[data-theme="dark"] .foda-c-f { color: #7ee2a8; }
html[data-theme="dark"] .foda-badge .c-o,
html[data-theme="dark"] .foda-c-o { color: #8ec5ff; }
html[data-theme="dark"] .foda-badge .c-d,
html[data-theme="dark"] .foda-c-d { color: #ffbd80; }
html[data-theme="dark"] .foda-badge .c-a,
html[data-theme="dark"] .foda-c-a { color: #ff9d9d; }

html[data-theme="dark"] .foda-q { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .foda-q-head { color: var(--dk-text); }
html[data-theme="dark"] .foda-q-f .foda-q-head { background: var(--dk-ok-bg); color: var(--dk-ok-text); }
html[data-theme="dark"] .foda-q-o .foda-q-head { background: var(--dk-info-bg); color: var(--dk-info-text); }
html[data-theme="dark"] .foda-q-d .foda-q-head { background: #3a2410; color: #ffbd80; }
html[data-theme="dark"] .foda-q-a .foda-q-head { background: var(--dk-danger-bg); color: var(--dk-danger-text); }
html[data-theme="dark"] .foda-q-head .muted { color: inherit; opacity: .78; }
html[data-theme="dark"] .foda-count { background: rgba(255, 255, 255, .14); color: inherit; }

html[data-theme="dark"] .imp-f-alto,
html[data-theme="dark"] .imp-o-alto { background: var(--dk-ok-bg); color: var(--dk-ok-text); }
html[data-theme="dark"] .imp-a-alto { background: var(--dk-danger-bg); color: var(--dk-danger-text); }
html[data-theme="dark"] .imp-medio { background: var(--dk-warn-bg); color: var(--dk-warn-text); }
html[data-theme="dark"] .imp-bajo { background: var(--dk-neutral-bg); color: var(--dk-neutral-text); }
html[data-theme="dark"] select.foda-impacto.imp-alto { background: var(--dk-danger-bg); color: var(--dk-danger-text); }
html[data-theme="dark"] select.foda-impacto.imp-medio { background: var(--dk-warn-bg); color: var(--dk-warn-text); }
html[data-theme="dark"] select.foda-impacto.imp-bajo { background: var(--dk-neutral-bg); color: var(--dk-neutral-text); }

/* FODA: resumen y modal de vista */
html[data-theme="dark"] .foda-resumen { background: var(--dk-surface); border-color: var(--accent); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
html[data-theme="dark"] .foda-resumen-body b { color: var(--dk-text); }
html[data-theme="dark"] .foda-resumen-body span:not(.foda-resumen-ico) { color: var(--dk-muted); }
html[data-theme="dark"] .foda-resumen-card.f { background: var(--dk-ok-bg); }
html[data-theme="dark"] .foda-resumen-card.o { background: var(--dk-info-bg); }
html[data-theme="dark"] .foda-resumen-card.d { background: #3a2410; }
html[data-theme="dark"] .foda-resumen-card.a { background: var(--dk-danger-bg); }
html[data-theme="dark"] .foda-resumen-card.f .foda-resumen-label,
html[data-theme="dark"] .foda-resumen-card.f .foda-resumen-ico { color: var(--dk-ok-text); }
html[data-theme="dark"] .foda-resumen-card.o .foda-resumen-label,
html[data-theme="dark"] .foda-resumen-card.o .foda-resumen-ico { color: var(--dk-info-text); }
html[data-theme="dark"] .foda-resumen-card.d .foda-resumen-label,
html[data-theme="dark"] .foda-resumen-card.d .foda-resumen-ico { color: #ffbd80; }
html[data-theme="dark"] .foda-resumen-card.a .foda-resumen-label,
html[data-theme="dark"] .foda-resumen-card.a .foda-resumen-ico { color: var(--dk-danger-text); }

html[data-theme="dark"] .foda-layout-opt { background: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .foda-layout-opt.selected { background: #133247; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63, 196, 214, .2); }
html[data-theme="dark"] .foda-layout-opt small { color: var(--dk-muted); }
html[data-theme="dark"] .foda-layout-ico i { background: #5d7c86; }
html[data-theme="dark"] .foda-layout-opt.selected .foda-layout-ico i { background: var(--accent); }
html[data-theme="dark"] .foda-vista-actions { border-top-color: var(--dk-border); }
html[data-theme="dark"] .foda-toggle-ui { background: #3c5a63; }
html[data-theme="dark"] .foda-toggle-ui::after { background: #e7eff1; }
html[data-theme="dark"] .foda-toggle input:checked + .foda-toggle-ui { background: var(--accent); }
html[data-theme="dark"] .foda-toggle input:checked + .foda-toggle-ui::after { background: #04222a; }
html[data-theme="dark"] .foda-vista-check input { accent-color: var(--accent); }
html[data-theme="dark"] .foda-footer-actions { border-top-color: var(--dk-border); }

/* Notas y observaciones */
html[data-theme="dark"] .notas-panel { background: #211b10; border-color: var(--dk-warn-border); }
html[data-theme="dark"] .notas-panel-head h3 { color: var(--dk-warn-text); }
html[data-theme="dark"] .nota { background: #1d1a12; border-color: #5a4a1c; }
html[data-theme="dark"] .nota-cab { background: #2a2414; color: #f0d79a; }
html[data-theme="dark"] .nota-cab:hover { background: #332b18; }
html[data-theme="dark"] .nota-chevron { color: #e0b64a; }
html[data-theme="dark"] .nota-preview { color: #e8d39b; }
html[data-theme="dark"] .nota-meta-mini { color: #c2ab7d; }
html[data-theme="dark"] .nota-cuerpo { border-top-color: #5a4a1c; }
html[data-theme="dark"] .nota-texto { color: var(--dk-text); }
html[data-theme="dark"] .nota-autor { color: var(--dk-muted); }
html[data-theme="dark"] .nota-composer textarea { background: var(--dk-input); color: var(--dk-text); border-color: var(--dk-border-strong); }
html[data-theme="dark"] .nota-tag { background: #b8860b; color: #1a1405; }

/* Paneles varios */
html[data-theme="dark"] .doc-meta { background: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .ro { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-text); }
html[data-theme="dark"] .chipm { background: var(--dk-surface-3); color: #c6d6db; }
html[data-theme="dark"] .pill { background: var(--dk-surface-3); color: var(--dk-neutral-text); }
html[data-theme="dark"] .pill.seccion { background: #2c2240; color: #d5b8ff; }
html[data-theme="dark"] .pill.resuelta { background: var(--dk-ok-bg); color: var(--dk-ok-text); }
html[data-theme="dark"] .timeline::before { background: #2b434b; }
html[data-theme="dark"] .tl::before { background: #5b747d; border-color: var(--dk-surface); box-shadow: 0 0 0 1px #2b434b; }
html[data-theme="dark"] .nota-item { background: var(--dk-surface-2); border-left-color: var(--accent); }
html[data-theme="dark"] .empty { color: var(--dk-muted); }

html[data-theme="dark"] .validation-panel { background: #331b1e; border-color: var(--dk-danger-border); color: #ffb3b3; }
html[data-theme="dark"] .validation-count { color: var(--dk-danger-text); }

html[data-theme="dark"] .pending-item { background: var(--dk-surface); box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
html[data-theme="dark"] .pending-item.sent { background: #12242f; }
html[data-theme="dark"] .unit-card { background: var(--dk-surface); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
html[data-theme="dark"] .unit-card:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .42); }
html[data-theme="dark"] .unit-card .pend { color: var(--dk-danger-text); }
html[data-theme="dark"] .progress { background: #2b434b; }
html[data-theme="dark"] .eff-card { background: var(--dk-surface); box-shadow: 0 5px 16px rgba(0, 0, 0, .28); }

/* Barra superior compacta en pantallas pequeñas */
@media (max-width: 980px) {
  .topbar { gap: .6rem; }
  .topbar .meta { display: none; }
}
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    gap: .5rem .6rem;
    padding: .6rem .75rem;
  }
  .topbar img { height: 34px; }
  .topbar h1 { font-size: .95rem; line-height: 1.2; }
  .topbar .meta,
  .topbar .userbox { display: none; }
  .topbar .spacer { flex: 1 1 0; }
  .topbar .btn { padding: .4rem .65rem; }
  .theme-toggle { min-width: 2rem; min-height: 2rem; padding: .3rem; }
  .notif-panel { top: 108px; }
  .content { padding: .75rem; }
  .sidebar { padding: .75rem; }
}

/* ============================================================
   Configuración de prompts
   ============================================================ */
.config-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.config-title h2 { margin: 0 0 .2rem; }
.config-note { margin: .9rem 0 1rem; }

.config-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
@media (max-width: 980px) {
  .config-groups { grid-template-columns: 1fr; }
}
.config-group {
  border: 1px solid #d5e0e4;
  border-radius: 10px;
  background: #f7fafb;
  padding: .85rem;
}
.config-group-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .65rem;
}
.config-group-head h3 { margin: 0 0 .15rem; font-size: 1rem; color: var(--teal-dark); }
.config-group-head p { margin: 0; font-size: .78rem; }
.prompt-list { display: grid; gap: .55rem; }
.prompt-card {
  display: grid;
  gap: .45rem;
  background: #fff;
  border: 1px solid #cfdadf;
  border-radius: 8px;
  padding: .65rem .7rem;
}
.prompt-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(23, 162, 184, .16);
}
.prompt-card-main {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 0;
  cursor: pointer;
  color: inherit;
}
.prompt-card-main input { width: auto; margin-top: .15rem; accent-color: var(--accent); }
.prompt-card-body { display: grid; gap: .2rem; min-width: 0; }
.prompt-card-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.prompt-card-title b { font-size: .86rem; color: var(--teal-dark); }
.prompt-card-desc { font-size: .77rem; color: var(--muted); line-height: 1.35; }
.prompt-card-vars { font-size: .68rem; color: var(--muted); }
.prompt-card .btn { justify-self: start; }

.mode-badge { font-size: .66rem; letter-spacing: .01em; }
.mode-pensar { background: #e8f2fb; color: #134a86; }
.mode-autocompletar { background: #fff4d6; color: #7a5a00; }

.config-actions {
  border-top: 1px solid #d5e0e4;
  padding-top: .8rem;
  margin-top: 1rem;
}

/* Vista previa de prompt (solo lectura) */
.prompt-preview-card { max-width: 820px; }
.prompt-preview-body {
  padding: .25rem 1rem 1rem;
  overflow: auto;
  max-height: min(72vh, 680px);
}
.prompt-preview-body h4 { margin: 1rem 0 .4rem; font-size: .82rem; color: #1a3a4a; }
.prompt-pre {
  margin: 0;
  padding: .65rem .75rem;
  border: 1px solid #d5e0e4;
  border-radius: 6px;
  background: #f4f8f9;
  color: #122;
  font-size: .74rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.prompt-vars { font-size: .74rem; margin-top: .7rem; }

/* Factores insuficientes */
.problemas-card { max-width: 680px; }
.problemas-body {
  padding: .25rem 1rem 1rem;
  overflow: auto;
  max-height: min(70vh, 620px);
}
.problemas-list {
  list-style: none;
  padding: 0;
  margin: .7rem 0;
  display: grid;
  gap: .5rem;
}
.problemas-list li {
  border: 1px solid #e0a0a0;
  background: #fff5f5;
  border-radius: 8px;
  padding: .55rem .7rem;
}
.problema-code {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  background: #f6c9c9;
  color: #8a2020;
  border-radius: 999px;
  padding: .1rem .45rem;
  margin-right: .35rem;
}
.problema-texto { font-size: .8rem; color: #6b2020; font-style: italic; }
.problema-motivo { margin: .35rem 0 0; font-size: .78rem; color: #8a2020; }
.problemas-ejemplo {
  margin: .8rem 0 0;
  padding-top: .65rem;
  border-top: 1px solid #e0a0a0;
  font-size: .76rem;
  color: var(--muted);
}

html[data-theme="dark"] .problemas-list li {
  background: var(--dk-danger-bg);
  border-color: var(--dk-danger-border);
}
html[data-theme="dark"] .problema-code { background: #5e2427; color: var(--dk-danger-text); }
html[data-theme="dark"] .problema-texto,
html[data-theme="dark"] .problema-motivo { color: var(--dk-danger-text); }
html[data-theme="dark"] .problemas-ejemplo { border-top-color: var(--dk-danger-border); color: var(--dk-muted); }

/* Panel de sugerencias para pensar */
.guia-card { max-width: 780px; }
.guia-body {
  padding: .25rem 1rem 1rem;
  overflow: auto;
  max-height: min(70vh, 640px);
}
.guia-item {
  border: 1px solid #d5e0e4;
  border-radius: 8px;
  background: #f7fafb;
  padding: .6rem .75rem;
  margin-bottom: .55rem;
}
.guia-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.guia-factor { font-size: .72rem; color: var(--muted); }
.guia-pregunta { margin: .15rem 0 .25rem; font-size: .92rem; font-weight: 600; }
.guia-ejemplo, .guia-pista { margin: .2rem 0 0; font-size: .78rem; color: var(--muted); }
.guia-pista { font-style: italic; }

/* Confirmación de propuesta autocompletada */
.propuesta-card { max-width: 860px; }
.propuesta-body {
  padding: .25rem 1rem 1rem;
  overflow: auto;
  max-height: min(70vh, 660px);
}
.prop-warnings { margin-bottom: .8rem; font-size: .8rem; }
.prop-warnings ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.prop-warnings li { margin-bottom: .2rem; }
.prop-group { margin-bottom: .8rem; }
.prop-group h4 { margin: 0 0 .4rem; font-size: .84rem; color: #1a3a4a; }
.prop-item {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  border: 1px solid #d5e0e4;
  border-radius: 7px;
  background: #f7fafb;
  padding: .5rem .6rem;
  margin-bottom: .4rem;
  cursor: pointer;
}
.prop-item.has-current { border-color: #e0c36a; }
.prop-item.unchecked { opacity: .58; }
.prop-item input { width: auto; margin-top: .2rem; accent-color: var(--accent); }
.prop-text { display: flex; gap: .45rem; align-items: flex-start; flex-wrap: wrap; font-size: .8rem; }
.prop-code {
  font-size: .68rem;
  font-weight: 800;
  background: #e4eef1;
  color: #345;
  border-radius: 999px;
  padding: .1rem .4rem;
  white-space: nowrap;
}
.prop-current { flex-basis: 100%; font-size: .71rem; color: #8a5a00; }
.prop-origin { flex-basis: 100%; font-size: .71rem; color: var(--muted); }
.prop-origin b { color: var(--teal-dark); }
.prop-replace {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .8rem;
  font-size: .82rem;
  color: #122;
  cursor: pointer;
}
.prop-replace input { width: auto; accent-color: var(--accent); }

/* Modo oscuro de la configuración */
html[data-theme="dark"] .config-group { background: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .config-group-head h3 { color: var(--dk-accent); }
html[data-theme="dark"] .prompt-card { background: var(--dk-surface); border-color: var(--dk-border); }
html[data-theme="dark"] .prompt-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63, 196, 214, .2); }
html[data-theme="dark"] .prompt-card-title b { color: var(--dk-accent); }
html[data-theme="dark"] .prompt-card-desc,
html[data-theme="dark"] .prompt-card-vars { color: var(--dk-muted); }
html[data-theme="dark"] .mode-pensar { background: var(--dk-info-bg); color: var(--dk-info-text); }
html[data-theme="dark"] .mode-autocompletar { background: var(--dk-warn-bg); color: var(--dk-warn-text); }
html[data-theme="dark"] .config-actions { border-top-color: var(--dk-border); }
html[data-theme="dark"] .prompt-preview-body h4 { color: var(--dk-accent); }
html[data-theme="dark"] .prompt-pre { background: var(--dk-input); border-color: var(--dk-border-strong); color: var(--dk-text); }

html[data-theme="dark"] .guia-item { background: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .guia-pregunta { color: var(--dk-text); }
html[data-theme="dark"] .guia-ejemplo,
html[data-theme="dark"] .guia-pista,
html[data-theme="dark"] .guia-factor { color: var(--dk-muted); }

html[data-theme="dark"] .prop-group h4 { color: var(--dk-accent); }
html[data-theme="dark"] .prop-item { background: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .prop-item.has-current { border-color: var(--dk-warn-border); }
html[data-theme="dark"] .prop-text { color: var(--dk-text); }
html[data-theme="dark"] .prop-code { background: var(--dk-surface-3); color: var(--dk-neutral-text); }
html[data-theme="dark"] .prop-current { color: var(--dk-warn-text); }
html[data-theme="dark"] .prop-replace { color: var(--dk-text); }
html[data-theme="dark"] .propuesta-body,
html[data-theme="dark"] .guia-body,
html[data-theme="dark"] .prompt-preview-body { color: var(--dk-text); }

/* Errores del arranque (index.html) */
html[data-theme="dark"] .boot [style*="color:#b00020"],
html[data-theme="dark"] .boot [style*="color:#c00"] { color: var(--dk-danger-text) !important; }
html[data-theme="dark"] .boot [style*="color:#0a7"] { color: var(--dk-ok-text) !important; }

/* —— Laboratorio del superadministrador —— */
.lab-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.lab-head h2 { margin: 0 0 .35rem; }
.lab-head p { max-width: 780px; margin: 0; }
.lab-eyebrow { font-size: .68rem; letter-spacing: .12em; font-weight: 700; color: var(--teal); text-transform: uppercase; margin-bottom: .2rem; }
.lab-badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; border: 1px solid #9ec7cf; background: #e8f6f8; color: var(--teal-dark); font-size: .7rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.lab-badge.large { padding: .4rem .8rem; font-size: .78rem; }
.lab-create-row { display: flex; gap: .6rem; align-items: center; }
.lab-create-row input { flex: 1; }
.lab-list-head { display: flex; justify-content: space-between; align-items: baseline; margin: 1rem 0 .6rem; }
.lab-list-head h3 { margin: 0; }
.lab-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .9rem; }
.lab-card { background: var(--card); border: 1px solid #c8d2d6; border-left: 4px solid var(--accent); border-radius: 8px; padding: 1rem; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
.lab-card-head { display: flex; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.lab-card-head h3 { margin: 0; color: var(--teal-dark); }
.lab-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .8rem 0; }
.lab-chip { font-size: .68rem; padding: .2rem .45rem; border-radius: 999px; border: 1px solid #cbd6da; background: #f4f7f8; color: #52656d; }
.lab-chip.st-aprobado { background: #e6f4eb; border-color: #9ecfb0; color: #1b6b3a; }
.lab-chip.st-enviado { background: #e8f1fb; border-color: #a7c6e6; color: #1a5f9e; }
.lab-chip.st-revisado { background: #e3f5f4; border-color: #9fd4d0; color: #0f5f5c; }
.lab-chip.st-devuelto { background: #fbecec; border-color: #e0b0b0; color: #8e2c2c; }
.lab-chip.st-en_elaboracion { background: #fff7df; border-color: #e2cf92; color: #7a5b00; }
.lab-actions { margin-bottom: .45rem; }
.lab-copy { border-top: 1px dashed #ccd7db; padding-top: .55rem; }
.lab-copy summary { cursor: pointer; font-size: .8rem; color: var(--teal); font-weight: 600; }
.lab-copy-body { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .55rem; }
.lab-copy-body select { flex: 1; min-width: 190px; }
.lab-check { display: flex; align-items: center; gap: .35rem; margin: 0; font-size: .75rem; }
.lab-check input { width: auto; }
.lab-run-banner { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; background: #fff8e8; border: 1px solid #e2cf92; border-radius: 6px; padding: .55rem .75rem; margin-bottom: .65rem; font-size: .82rem; }
.lab-run-banner > span:first-child { font-weight: 800; letter-spacing: .08em; color: #7a5b00; font-size: .7rem; }
.lab-toolbar { align-items: center; justify-content: space-between; }
.lab-status-control { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--muted); font-size: .78rem; }
.lab-status-control select { width: auto; min-width: 190px; }
.ctx-block.ctx-lab { border-color: #e2cf92; background: #fff8e8; }
.lab-empty { text-align: center; }

html[data-theme="dark"] .lab-card { background: var(--dk-surface); border-color: var(--dk-border); border-left-color: var(--accent); }
html[data-theme="dark"] .lab-card-head h3 { color: var(--dk-accent); }
html[data-theme="dark"] .lab-chip { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-muted); }
html[data-theme="dark"] .lab-badge { background: var(--dk-info-bg); border-color: var(--dk-border-strong); color: var(--dk-info-text); }
html[data-theme="dark"] .lab-copy { border-top-color: var(--dk-border); }
html[data-theme="dark"] .lab-copy summary { color: var(--dk-accent); }
html[data-theme="dark"] .lab-run-banner { background: var(--dk-warn-bg); border-color: var(--dk-warn-border); color: var(--dk-warn-text); }
html[data-theme="dark"] .lab-run-banner > span:first-child { color: var(--dk-warn-text); }
html[data-theme="dark"] .ctx-block.ctx-lab { background: var(--dk-warn-bg); border-color: var(--dk-warn-border); }

@media (max-width: 720px) {
  .lab-head { flex-direction: column; }
  .lab-create-row { flex-direction: column; align-items: stretch; }
  .lab-list { grid-template-columns: 1fr; }
}

/* —— Panel: etapas clicables, EFF por trimestre y formatos anteriores —— */
.p-step-link {
  cursor: pointer;
  border-radius: 12px;
  transition: background .15s ease, transform .15s ease;
}
.p-step-link:hover {
  background: rgba(23, 162, 184, .1);
  transform: translateY(-1px);
}
.p-step-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.p-step-link .step-open {
  display: inline-block;
  margin-top: .1rem;
  font-size: .58rem;
  color: var(--accent-dark);
  font-weight: 700;
  opacity: .85;
}
.p-step-link:hover .step-open { text-decoration: underline; }
.steps-hint {
  margin: .3rem 0 0;
  font-size: .68rem;
  color: var(--muted);
}

.eff-actions {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin-top: .55rem;
}
.eff-actions .btn {
  padding: .22rem .52rem;
  font-size: .7rem;
}
.eff-date {
  display: block;
  margin-top: .3rem;
  font-size: .64rem;
  color: var(--muted);
}
.eff-pending {
  display: block;
  margin-top: .55rem;
  font-size: .66rem;
  color: var(--muted);
  font-style: italic;
}

.fmt-card .fmt-note {
  margin: .25rem 0 .65rem;
  padding: .48rem .65rem;
  border-radius: 9px;
  background: #f3f9fa;
  color: #4c6a72;
  font-size: .75rem;
  border: 1px solid #dce9ec;
}
.fmt-card details { margin: 0; }
.fmt-card summary { list-style: none; cursor: pointer; }
.fmt-card summary::-webkit-details-marker { display: none; }
.fmt-card summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.fmt-year { border-top: 1px solid #e1eaed; }
.fmt-year:first-of-type { border-top: 0; }
.fmt-year > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .68rem .2rem;
}
.fmt-year > summary:hover { background: #f7fbfc; }
.fmt-year-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--teal-dark);
  letter-spacing: .01em;
}
.fmt-count {
  margin-left: auto;
  background: #edf4f6;
  color: #56717a;
  border-radius: 999px;
  padding: .14rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}
.chev {
  display: inline-grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent-dark);
  font-size: .92rem;
  line-height: 1;
  transition: transform .15s ease;
  flex-shrink: 0;
}
details[open] > summary > .chev { transform: rotate(90deg); }
.fmt-year-body { padding: 0 0 .4rem .15rem; }

.fmt-proc {
  margin: .2rem 0 .45rem;
  border-left: 3px solid #d6e5e8;
  border-radius: 0 10px 10px 0;
}
.fmt-proc > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  padding: .52rem .65rem;
  background: #f7fafb;
  border-radius: 0 10px 10px 0;
}
.fmt-proc > summary:hover { background: #eef6f8; }
.fmt-proc[open] > summary { background: #eaf4f7; }
.fmt-proc-name { font-weight: 800; color: var(--teal-dark); font-size: .85rem; }
.fmt-proc-meta { font-size: .7rem; color: var(--muted); }
.fmt-proc-body { padding: .1rem .45rem .15rem 1rem; }

.fmt-doc { border-top: 1px dashed #dfe9ec; }
.fmt-doc:first-child { border-top: 0; }
.fmt-doc > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .54rem .25rem;
}
.fmt-doc > summary:hover { background: #fbfdfe; }
.fmt-doc-title { font-weight: 700; color: #294e57; font-size: .84rem; }
.fmt-doc-count {
  font-size: .66rem;
  color: #59747c;
  background: #eef4f6;
  border-radius: 999px;
  padding: .1rem .45rem;
  font-weight: 700;
}
.fmt-doc-state { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

.fmt-versions {
  display: grid;
  gap: .4rem;
  padding: 0 .25rem .6rem 1.45rem;
}
.fmt-version {
  border: 1px solid #e2eaed;
  background: #fcfefe;
  border-radius: 10px;
  padding: .45rem .6rem;
}
.fmt-version.is-current { border-color: #a9d8e1; background: #f3fbfc; }
.fmt-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  flex-wrap: wrap;
}
.fmt-version .info {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .76rem;
  min-width: 220px;
}
.fmt-v {
  font-weight: 800;
  color: var(--teal-dark);
  background: #e8f4f7;
  padding: .07rem .42rem;
  border-radius: 5px;
  font-size: .7rem;
}
.fmt-date { color: var(--muted); font-size: .7rem; }
.fmt-actions { display: flex; gap: .3rem; flex-wrap: wrap; }
.fmt-actions .btn {
  padding: .23rem .52rem;
  font-size: .69rem;
}
.fmt-actions .btn.ghost { background: #fff; }

.fmt-quarters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
  padding: .5rem 0 0;
}
.fmt-quarter {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid #e0eaed;
  background: #fcfefe;
  border-radius: 10px;
  padding: .5rem .55rem;
}
.fmt-quarter .q-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .3rem;
}
.fmt-quarter .q-head b { color: var(--teal-dark); font-size: .82rem; }
.fmt-quarter .q-meta { color: var(--muted); font-size: .65rem; }
.fmt-quarter .fmt-actions { margin-top: auto; }
.fmt-quarter .badge { font-size: .62rem; padding: .13rem .4rem; }

.fmt-empty {
  margin: .1rem .2rem .5rem .35rem;
  padding: .55rem .65rem;
  border: 1px dashed #d9e5e8;
  border-radius: 9px;
  color: var(--muted);
  font-size: .73rem;
  background: #fbfdfe;
}

html[data-theme="dark"] .p-step-link:hover { background: rgba(23, 162, 184, .16); }
html[data-theme="dark"] .p-step-link .step-open { color: var(--dk-accent); }
html[data-theme="dark"] .fmt-card .fmt-note {
  background: var(--dk-surface-2);
  border-color: var(--dk-border);
  color: var(--dk-muted);
}
html[data-theme="dark"] .fmt-year { border-top-color: var(--dk-border); }
html[data-theme="dark"] .fmt-year > summary:hover { background: var(--dk-surface-2); }
html[data-theme="dark"] .fmt-year-title { color: var(--dk-accent); }
html[data-theme="dark"] .fmt-count { background: var(--dk-surface-3); color: var(--dk-muted); }
html[data-theme="dark"] .chev { color: var(--dk-accent); }
html[data-theme="dark"] .fmt-proc { border-left-color: var(--dk-border); }
html[data-theme="dark"] .fmt-proc > summary { background: var(--dk-surface-2); }
html[data-theme="dark"] .fmt-proc > summary:hover { background: var(--dk-surface-3); }
html[data-theme="dark"] .fmt-proc[open] > summary { background: #1b3a42; }
html[data-theme="dark"] .fmt-proc-name { color: var(--dk-accent); }
html[data-theme="dark"] .fmt-doc { border-top-color: var(--dk-border); }
html[data-theme="dark"] .fmt-doc > summary:hover { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .fmt-doc-title { color: #cfe4e8; }
html[data-theme="dark"] .fmt-doc-count { background: var(--dk-surface-3); color: var(--dk-muted); }
html[data-theme="dark"] .fmt-version,
html[data-theme="dark"] .fmt-quarter { background: var(--dk-surface-2); border-color: var(--dk-border); }
html[data-theme="dark"] .fmt-version.is-current { background: #17343b; border-color: #2e6672; }
html[data-theme="dark"] .fmt-v { background: #1c414a; color: var(--dk-accent); }
html[data-theme="dark"] .fmt-quarter .q-head b { color: var(--dk-accent); }
html[data-theme="dark"] .fmt-empty { background: var(--dk-surface-2); border-color: var(--dk-border); color: var(--dk-muted); }
html[data-theme="dark"] .eff-actions .btn.ghost,
html[data-theme="dark"] .fmt-actions .btn.ghost { background: var(--dk-surface); }

@media (max-width: 980px) {
  .fmt-quarters { grid-template-columns: 1fr 1fr; }
  .fmt-doc-state { margin-left: 0; }
}
@media (max-width: 640px) {
  .fmt-quarters { grid-template-columns: 1fr; }
  .fmt-version-row { align-items: flex-start; }
  .fmt-actions { width: 100%; }
}