/* ==========================================================================
   Driswil · hoja de estilos única
   Orden de la cascada (no reordenar sin comparar capturas):
     1. Base y estructura heredadas (antes app.css)
     2. Módulo de trazabilidad (antes trazabilidad.css)
     3. Tema ejecutivo: tokens y apariencia (antes executive.css)
     4. Sistema de diseño: componentes ui-* (antes ui.css) — ver docs/SISTEMA_DE_DISENO.md
   Los tokens de color viven en la sección 3 (:root). Componentes nuevos: sección 4, prefijo ui-.
   ========================================================================== */


/* ==========================================================================
   1. Base y estructura
   ========================================================================== */
* { box-sizing:border-box; }
body { font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
a { text-decoration:none; }
.app-shell { display:flex; min-height:100vh; }
.sidebar { width:250px; flex:0 0 250px; background:#fff; border-right:1px solid var(--line); padding:22px 15px; position:sticky; top:0; height:100vh; overflow:auto; z-index:20; }
.brand { display:flex; gap:11px; align-items:center; color:var(--ink); padding:4px 10px 30px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:var(--green); color:#fff; font-size:20px; }
.brand strong { display:block; font-size:19px; letter-spacing:-.04em; }
.brand small { display:block; color:var(--muted); font-size:11px; }
.nav-label { font-size:10px; font-weight:800; letter-spacing:.12em; color:#9aa99e; padding:22px 12px 8px; }
.side-link { display:flex; gap:12px; align-items:center; padding:10px 12px; color:#52655a; font-size:13px; border-radius:9px; transition:.15s; }
.side-link:hover { background:var(--green-soft); color:var(--green); }
.side-link i { font-size:16px; }
.main-wrap { flex:1; min-width:0; }
.topbar { height:68px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 30px; gap:12px; }
.topbar-title { font-weight:700; font-size:13px; color:#57695e; }
.user-chip { font-size:13px; color:#52675a; }
.user-chip i { font-size:18px; vertical-align:middle; margin-right:5px; }
.content { max-width:1550px; padding:34px; margin:auto; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:26px; }
.page-heading h1 { font-size:30px; line-height:1.2; font-weight:750; letter-spacing:-.045em; margin:0 0 6px; }
.page-heading p { margin-bottom:0; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.15em; color:var(--green); margin-bottom:6px!important; }
.date-pill { padding:8px 15px; background:#fff; border:1px solid var(--line); border-radius:30px; color:var(--muted); font-size:12px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:14px; padding:24px; box-shadow:0 5px 20px rgba(27,67,41,.025); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.panel-heading h2 { font-size:17px; font-weight:700; margin:0; }
.panel-heading a { color:var(--green); font-size:13px; }
.metric-card { position:relative; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:14px; padding:23px; min-height:120px; }
.metric-card span { display:block; color:var(--muted); font-size:13px; }
.metric-card strong { display:block; font-size:34px; line-height:1.5; font-weight:750; letter-spacing:-.04em; }
.metric-card i { position:absolute; right:21px; bottom:15px; font-size:36px; color:#d2ead9; }
.format-link { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:10px; padding:15px 17px; color:var(--ink); font-size:13px; }
.format-link:hover { border-color:#9ac8a8; background:#f8fcf9; color:var(--green); }
.format-link strong { color:var(--green); font-size:18px; }
.activity-row { display:flex; gap:11px; align-items:flex-start; border-top:1px solid var(--line); padding:13px 0; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:#6baf7e; margin-top:7px; flex:none; }
.activity-row strong { display:block; font-size:13px; }
.activity-row small { display:block; font-size:11px; color:var(--muted); }
.activity-row time { margin-left:auto; color:#94a49a; font-size:11px; white-space:nowrap; }
.form-control, .form-select { border-color:#d9e4db; border-radius:8px; font-size:13px; min-height:39px; }
.form-control:focus, .form-select:focus { border-color:#5ca976; box-shadow:0 0 0 .2rem #d7efdf; }
.form-label { font-size:12px; font-weight:700; margin-bottom:5px; }
.btn { border-radius:8px; font-size:13px; font-weight:600; padding:8px 14px; }
.btn-success { background:var(--green); border-color:var(--green); }
.btn-success:hover { background:var(--green-dark); border-color:var(--green-dark); }
.table { font-size:12px; margin:0; }
.table th { background:#f8faf8; color:#627467; font-size:11px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--line); padding:13px 10px; }
.table td { padding:13px 10px; border-color:#eef2ef; }
.record-form { max-width:1050px; }
.record-form hr { border-color:var(--line); margin:27px 0; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); margin-top:30px; padding-top:20px; }
.signature-canvas { display:block; width:100%; max-width:700px; height:180px; border:1px dashed #9eb6a3; border-radius:9px; touch-action:none; background:#fff; margin:10px 0; }
.signature-existing { display:block; max-width:260px; max-height:110px; object-fit:contain; margin:7px 0; }
.declaration { font-style:italic; padding:15px 0; }
.paper-acta { background:#fff; max-width:820px; margin:auto; padding:45px 52px; border:1px solid var(--line); box-shadow:0 8px 30px #dbe3da; }
.paper-acta h1 { font-size:25px; font-weight:750; }
.paper-acta h2 { text-align:center; font-size:16px; font-weight:700; margin:25px 0 13px; }
.paper-acta p { line-height:1.75; }
.login-page { display:grid; place-items:center; min-height:100vh; background:radial-gradient(circle at top left,#d5ebd9,transparent 40%),#f4f8f4; padding:20px; }
.login-card { width:min(100%,420px); padding:42px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 60px #d8e5da; }
.login-card h1 { font-size:27px; font-weight:750; letter-spacing:-.04em; }
.login-card p.text-muted { font-size:13px; }
.login-foot { display:block; text-align:center; color:#96a69b; margin-top:30px; }
@media(max-width:991px) {
  .sidebar { position:fixed; left:-270px; transition:left .2s; box-shadow:10px 0 30px #0001; }
  .sidebar.open { left:0; }
  .content { padding:24px; }
  .topbar { padding:0 18px; }
}
@media(max-width:600px) {
  .content { padding:18px; }
  .page-heading { align-items:flex-start; flex-direction:column; }
  .page-heading h1 { font-size:25px; }
  .panel { padding:16px; }
  .topbar-title { display:none; }
  .user-chip { font-size:11px; }
}
@media print {
  body { background:#fff; }
  .sidebar, .topbar, .no-print, .btn { display:none!important; }
  .content { padding:0; max-width:none; }
  .main-wrap { width:100%; }
  .panel, .paper-acta { box-shadow:none; border:0; padding:0; }
  .paper-acta { max-width:none; }
  .page-heading { margin-bottom:12px; }
  @page { size:A4; margin:16mm; }
}

/* ==========================================================================
   2. Trazabilidad
   ========================================================================== */
/* Trazabilidad: menú, etapas, línea de tiempo y evidencias */
.side-group { margin: 1px 0; }
.side-group summary { display: flex; gap: 12px; align-items: center; padding: 9px 12px; color: #52655a; font-size: 13px; border-radius: 9px; cursor: pointer; list-style: none; }
.side-group summary::-webkit-details-marker { display: none; }
.side-group summary::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: 10px; margin-left: auto; transition: transform .15s; }
.side-group summary .badge { margin-left: auto; }
.side-group summary .badge + ::after { margin-left: 6px; }
.side-group[open] summary::after { transform: rotate(180deg); }
.side-group summary:hover { background: var(--green-soft); color: var(--green); }
.side-group summary i { font-size: 16px; }
.side-group a { display: block; padding: 6px 12px 6px 40px; font-size: 12.5px; color: #647a6c; border-radius: 8px; }
.side-group a:hover { background: var(--green-soft); color: var(--green); }

.section-title { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #8a9b90; text-transform: uppercase; margin: 0 0 12px; }
.panel h2 { font-size: 17px; font-weight: 700; }
.kv { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.kv dt { color: #6f8177; font-weight: 600; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.readonly-clock { background: #f3f6f4 !important; font-variant-numeric: tabular-nums; }
.lock-note { font-size: 12px; color: #6b7a71; }
.lock-note i { color: var(--green); }

.stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.step { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #fff; min-width: 0; }
.step .step-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #eef2ef; color: #8a9b90; margin-bottom: 8px; }
.step strong { display: block; font-size: 13px; }
.step small { display: block; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.step.done .step-icon { background: var(--green); color: #fff; }
.step.current { border-color: #e0a800; box-shadow: 0 0 0 3px #fff3cd; }
.step.current .step-icon { background: #ffc107; color: #3d2f00; }
.step.na { opacity: .55; }
@media (max-width: 991px) { .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kv { grid-template-columns: 1fr; } .kv dt { margin-top: 6px; } }

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 16px 28px; }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: -6px; width: 2px; background: var(--line); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: 2px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #9ac8a8; border: 2px solid #fff; box-shadow: 0 0 0 1px #9ac8a8; }
.timeline li.t-alerta::after, .timeline li.t-diferencia::after, .timeline li.t-retraso::after { background: #dc3545; box-shadow: 0 0 0 1px #dc3545; }
.timeline li.t-correccion::after { background: #6f42c1; box-shadow: 0 0 0 1px #6f42c1; }
.timeline time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline .t-title { font-weight: 650; font-size: 13px; }
.timeline .t-body { font-size: 12.5px; color: #4f6357; overflow-wrap: anywhere; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.gallery a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: var(--ink); background: #fafcfa; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gallery span { display: block; padding: 5px 7px; font-size: 10.5px; line-height: 1.3; color: #5b6e62; }

.metric-card.compact { min-height: 0; padding: 14px 16px; }
.metric-card.compact strong { font-size: 26px; line-height: 1.2; }
.metric-card.warn strong { color: #b35c00; }
.metric-card.bad strong { color: #b02a37; }
.metric-card.good strong { color: var(--green); }
.metric-card a { color: inherit; }
.nav-pills-sm .nav-link { font-size: 12.5px; padding: 6px 12px; color: #52655a; }
.nav-pills-sm .nav-link.active { background: var(--green); color: #fff; }
.row-late { background: #fff5f5; }
.checklist-row { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fff; }
.checklist-row.diff { border-color: #f1aeb5; background: #fff8f8; }
.checklist-row.ok { border-color: #a3cfbb; }
.note { border-left: 3px solid #cfe3d5; padding: 6px 10px; margin-bottom: 10px; background: #fbfdfb; }
.note.pendiente { border-left-color: #ffc107; }
.note.observacion { border-left-color: #0d6efd; }
.table-sm td, .table-sm th { padding: 8px 8px; }
.filters .form-label { font-size: 11px; }
.sentence { font-size: 14px; background: var(--green-soft); border-radius: 10px; padding: 12px 14px; }
@media print { .stepper { grid-template-columns: repeat(6, 1fr); } .gallery { display: none; } details { display: none; } }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 14px; font-size: 13px; }
.checkbox-grid .form-check-input { margin-top: .2em; }


/* ==========================================================================
   3. Tema ejecutivo y tokens
   ========================================================================== */
/* ==========================================================================
   Driswil · Tema ejecutivo
   Capa visual corporativa cargada después de app.css y trazabilidad.css.
   Paleta basada en los colores corporativos de Driscoll's (sin logotipo ni marca).
   Para volver al tema anterior basta con quitar este archivo de base.html.
   ========================================================================== */

:root {
  --green: #4a773c;
  --green-dark: #325a26;
  --green-soft: #eef4ea;
  --yellow: #fdc41f;
  --cream: #fbf6ea;
  --ink: #231d18;
  --ink-2: #4a423b;
  --muted: #776c63;
  --line: #e8e3da;
  --line-strong: #dad3c6;
  --bg: #f7f5f0;
  --surface: #ffffff;
  --navy: #213d18;
  --navy-2: #152b0f;
  --berry: #a01308;
  --gold: #4a773c;
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(35, 29, 24, .05), 0 1px 1px rgba(35, 29, 24, .03);
  --shadow-md: 0 1px 2px rgba(35, 29, 24, .05), 0 8px 24px -12px rgba(35, 29, 24, .16);

  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--bg);
  --bs-link-color: var(--green);
  --bs-link-color-rgb: 74, 119, 60;
  --bs-link-hover-color: var(--green-dark);
  --bs-link-hover-color-rgb: 50, 90, 38;
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
}

body {
  font-family: var(--bs-body-font-family);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
}
a { color: var(--green); }
a:hover { color: var(--green-dark); }
.text-muted { color: var(--muted) !important; }
.metric-card strong, .table td, .date-pill, time { font-variant-numeric: tabular-nums; }

/* ---------- Barra lateral ---------- */
.sidebar {
  width: 264px; flex-basis: 264px;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  border-right: 0;
  padding: 0 14px 28px;
  color: #d5dfcf;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.brand {
  color: #fff;
  padding: 22px 10px 20px;
  margin: 0 -14px 6px;
  padding-left: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.brand:hover { color: #fff; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(145deg, #5a8a4a, #325a26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 18px;
}
.brand strong { font-size: 17px; font-weight: 650; letter-spacing: -.01em; color: #fff; }
.brand small { color: #9fb294; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

.nav-label {
  color: #7f9673; font-size: 10px; font-weight: 600; letter-spacing: .14em;
  padding: 22px 12px 8px;
}
.side-link, .side-group summary {
  color: #d5dfcf; font-size: 13px; font-weight: 450;
  padding: 8px 12px; border-radius: 7px; gap: 11px;
  position: relative;
}
.side-link i, .side-group summary i { font-size: 15px; color: #9fb294; transition: color .15s; }
.side-link:hover, .side-group summary:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.side-link:hover i, .side-group summary:hover i { color: #fff; }
.side-group summary::after { color: #7f9673; }
.side-group[open] > summary { color: #fff; }
.side-group[open] > summary i { color: #fff; }
.side-group a {
  color: #b7c6ae; font-size: 12.5px; padding: 6px 12px 6px 38px; margin: 1px 0;
  border-radius: 6px; position: relative;
}
.side-group a::before {
  content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, .09);
}
.side-group a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.side-link.active, .side-group a.active {
  background: rgba(255, 255, 255, .09); color: #fff; font-weight: 550;
}
.side-link.active::before {
  content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--yellow);
}
.side-link.active i { color: var(--yellow); }
.side-group a.active::before { background: var(--yellow); width: 2px; }
.sidebar .badge { font-weight: 600; font-size: 10px; }

/* ---------- Barra superior ---------- */
.topbar {
  height: 60px; padding: 0 32px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 15;
}
.topbar-title { font-weight: 500; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.topbar-title .crumb-org { color: var(--ink); font-weight: 600; }
.topbar-title .crumb-sep { color: var(--line-strong); }
.user-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--green-soft); color: var(--green); font-size: 12px; font-weight: 650;
  text-transform: uppercase; box-shadow: inset 0 0 0 1px #d3e2ca;
}
.topbar .btn-outline-secondary { border-color: var(--line-strong); color: var(--ink-2); background: #fff; }
.topbar .btn-outline-secondary:hover { background: var(--bg); color: var(--ink); border-color: var(--line-strong); }
.topbar .btn-outline-danger { border-color: #f0c3bc; color: var(--berry); background: #fdf3f1; }
.topbar .btn-outline-danger:hover { background: var(--berry); border-color: var(--berry); color: #fff; }

/* ---------- Contenido ---------- */
.content { padding: 32px 36px 56px; max-width: 1480px; }
.page-heading {
  margin-bottom: 28px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  align-items: flex-end;
}
.page-heading h1 { font-size: 26px; font-weight: 650; letter-spacing: -.025em; color: var(--ink); margin-bottom: 4px; }
.page-heading p.text-muted { font-size: 14px; }
.eyebrow {
  color: var(--gold) !important; font-size: 10.5px; font-weight: 650; letter-spacing: .16em;
  margin-bottom: 8px !important; text-transform: uppercase;
}
.date-pill {
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink-2); font-size: 12px; font-weight: 500; padding: 7px 12px;
  box-shadow: var(--shadow-sm); white-space: nowrap;
}
.date-pill::before { content: "\F1E8"; font-family: "bootstrap-icons"; margin-right: 7px; color: var(--muted); }

.section-title {
  color: var(--muted); font-size: 10.5px; font-weight: 650; letter-spacing: .14em;
  display: flex; align-items: center; gap: 12px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Paneles ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 22px 24px;
}
.panel-heading { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.panel-heading h2, .panel h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.panel-heading a { font-size: 12.5px; font-weight: 550; color: var(--green); }
.panel-heading a:hover { color: var(--green-dark); }

/* ---------- KPIs ---------- */
.metric-card, a.metric-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 18px 20px; min-height: 108px;
  color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.metric-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent;
  transition: background .15s;
}
a.metric-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); color: var(--ink); }
a.metric-card:hover::before { background: var(--green); }
.metric-card span {
  color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35; padding-right: 36px;
}
.metric-card strong { font-size: 32px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; margin-top: 10px; color: var(--ink); }
.metric-card i {
  top: 16px; right: 16px; bottom: auto; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; font-size: 16px;
  background: var(--green-soft); color: var(--green);
}
.metric-card.compact { padding: 14px 16px; min-height: 86px; }
.metric-card.compact span { font-size: 10.5px; padding-right: 0; }
.metric-card.compact strong { font-size: 24px; margin-top: 8px; }
.metric-card.good strong { color: var(--green); }
.metric-card.warn strong { color: #a2600a; }
.metric-card.bad strong { color: var(--berry); }
.metric-card.warn::before { background: #d9a03c; }
.metric-card.bad::before { background: var(--berry); }
.metric-card small, .metric-card .small { color: var(--muted); }

/* Accesos a formatos */
.format-link {
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  padding: 13px 16px; font-size: 13px; font-weight: 500; transition: all .15s;
}
.format-link:hover { border-color: #c3d4b9; background: #f9fbf6; color: var(--green-dark); box-shadow: var(--shadow-sm); }
.format-link strong {
  color: var(--ink); font-size: 14px; font-weight: 650; min-width: 36px; text-align: center;
  background: var(--bg); border-radius: 6px; padding: 2px 8px;
}

/* Actividad */
.activity-feed { max-height: 452px; overflow: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.activity-row { padding: 11px 0; border-top-color: var(--line); }
.activity-row:first-child { border-top: 0; }
.activity-dot { width: 7px; height: 7px; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.activity-row strong { font-weight: 550; color: var(--ink); }
.activity-row time { color: var(--muted); }

/* ---------- Tablas ---------- */
.table { font-size: 13px; --bs-table-bg: #fff; --bs-table-color: var(--ink); --bs-table-hover-bg: #faf8f3; color: var(--ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--line); }
.table th, .table thead th {
  background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 650;
  letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px;
  border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 12px; vertical-align: middle; }
.table tbody tr { transition: background .1s; }
.table tbody tr:hover > * { background: #faf8f3; }
.table td a:first-child { font-weight: 600; }
.table td:first-child > a { white-space: nowrap; }
.table-sm td, .table-sm th { padding: 8px 10px; }
.row-late > * { background: #fdf3f1 !important; }

/* ---------- Estados (badges) ---------- */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 5px; padding: .38em .62em; }
.text-bg-warning { background: #fbf0d9 !important; color: #8a5300 !important; box-shadow: inset 0 0 0 1px #f0dcb0; }
.text-bg-success { background: #e7f0e2 !important; color: #2f5524 !important; box-shadow: inset 0 0 0 1px #cbdcc1; }
.text-bg-danger { background: #fbe7e4 !important; color: var(--berry) !important; box-shadow: inset 0 0 0 1px #f0c3bc; }
.text-bg-info { background: #e3eef6 !important; color: #1d4f72 !important; box-shadow: inset 0 0 0 1px #c8dceb; }
.text-bg-primary { background: #e4e9f5 !important; color: #263f78 !important; box-shadow: inset 0 0 0 1px #cbd5ec; }
.text-bg-secondary { background: #eceeed !important; color: #46524c !important; box-shadow: inset 0 0 0 1px #dadfdc; }
.text-bg-dark { background: #26332d !important; color: #fff !important; }
.text-bg-light { background: #f3f5f4 !important; color: var(--ink-2) !important; box-shadow: inset 0 0 0 1px var(--line); }
.sidebar .badge.text-bg-danger { background: var(--berry) !important; color: #fff !important; box-shadow: none; }

/* ---------- Alertas ---------- */
.alert { border-radius: 8px; border-width: 1px; font-size: 13.5px; padding: 12px 16px; }
.alert-danger { background: #fdf1ef; border-color: #f0c3bc; color: #7a1208; }
.alert-warning { background: #fdf7ea; border-color: #f0dcb0; color: #6d4504; }
.alert a { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Botones ---------- */
.btn { border-radius: 7px; font-size: 13px; font-weight: 550; padding: 7px 14px; letter-spacing: .005em; }
.btn-sm { padding: 5px 11px; font-size: 12.5px; }
.btn-success { background: var(--green); border-color: var(--green); box-shadow: 0 1px 2px rgba(16, 32, 24, .15); }
.btn-success:hover, .btn-success:focus { background: var(--green-dark); border-color: var(--green-dark); }
.btn-outline-success { color: var(--green); border-color: #bccfb2; background: #fff; }
.btn-outline-success:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line-strong); background: #fff; }
.btn-outline-secondary:hover { background: var(--bg); color: var(--ink); border-color: #c3ccc6; }
.btn-outline-danger { color: var(--berry); border-color: #ecbcb4; background: #fff; }
.btn-outline-danger:hover { background: var(--berry); border-color: var(--berry); color: #fff; }
.btn-danger { background: var(--berry); border-color: var(--berry); }
.btn-danger:hover { background: #7a0f06; border-color: #7a0f06; }
.btn-light { background: #fff; border-color: var(--line-strong); }

/* ---------- Formularios ---------- */
.form-label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }
.form-control, .form-select {
  border-color: var(--line-strong); border-radius: 7px; font-size: 13px; min-height: 38px; color: var(--ink);
}
.form-control:focus, .form-select:focus { border-color: #7a9f6c; box-shadow: 0 0 0 3px rgba(74, 119, 60, .16); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-text { color: var(--muted); font-size: 12px; }
.nav-pills-sm .nav-link.active, .nav-pills .nav-link.active { background: var(--green); }
.nav-pills .nav-link { color: var(--ink-2); }

/* ---------- Trazabilidad ---------- */
.step { border-radius: 9px; box-shadow: var(--shadow-sm); }
.step.done { border-color: #cbdcc1; }
.step.current { border-color: #d9a03c; box-shadow: 0 0 0 3px #fbf0d9; }
.step.current .step-icon { background: #d9a03c; color: #fff; }
.kv dt { color: var(--muted); font-weight: 550; }
.sentence { background: #f4f8f1; border: 1px solid #d9e6d1; }
.timeline li::after { background: var(--green); box-shadow: 0 0 0 1px var(--green); }
.timeline li.t-alerta::after, .timeline li.t-diferencia::after, .timeline li.t-retraso::after { background: var(--berry); box-shadow: 0 0 0 1px var(--berry); }
.checklist-row { border-radius: 9px; }
.paper-acta { border-radius: 4px; box-shadow: var(--shadow-md); }

/* ---------- Acceso ---------- */
.login-page {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh;
  padding: 0; background: #fff; place-items: stretch;
}
.login-aside {
  position: relative; overflow: hidden; color: #e5ede8;
  background:
    radial-gradient(1200px 600px at -10% 110%, rgba(253, 196, 31, .10), transparent 60%),
    radial-gradient(700px 500px at 110% -10%, rgba(74, 119, 60, .35), transparent 60%),
    linear-gradient(160deg, #233f1a 0%, #13270d 100%);
  padding: 56px 64px; display: flex; flex-direction: column; justify-content: space-between;
}
.login-aside::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.login-aside > * { position: relative; z-index: 1; }
.login-aside .brand { border: 0; margin: 0; padding: 0; }
.login-aside h2 { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: #fff; max-width: 480px; margin: 0 0 16px; }
.login-aside p { color: #b7c6ae; font-size: 15px; max-width: 460px; line-height: 1.6; }
.login-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.login-points li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: #d3dfd8; }
.login-points i {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: rgba(255, 255, 255, .07); color: var(--yellow); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.login-aside footer { font-size: 12px; color: #7f9673; }
.login-main { display: grid; place-items: center; padding: 40px 24px; background: var(--bg); }
.login-card {
  width: min(100%, 400px); padding: 40px; border-radius: 12px; border: 1px solid var(--line);
  box-shadow: var(--shadow-md); background: #fff;
}
.login-card h1 { font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.login-card .btn { padding: 10px 14px; font-size: 14px; }
.login-foot { color: var(--muted); font-size: 11.5px; margin-top: 26px; display: flex; gap: 6px; justify-content: center; align-items: center; }

/* ---------- Responsivo ---------- */
.sidebar-backdrop { display: none; }
@media (max-width: 991px) {
  .sidebar { left: -280px; box-shadow: 20px 0 40px rgba(0, 0, 0, .25); }
  .sidebar.open { left: 0; }
  .sidebar.open + .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(21, 43, 15, .45); z-index: 19; }
  .content { padding: 24px 20px 40px; }
  .topbar { padding: 0 16px; }
  .login-page { grid-template-columns: 1fr; }
  .login-aside { padding: 32px 28px; }
  .login-aside h2 { font-size: 24px; }
  .login-aside p, .login-points, .login-aside footer { display: none; }
}
@media (max-width: 600px) {
  .content { padding: 18px 16px 36px; }
  .page-heading { padding-bottom: 16px; margin-bottom: 20px; }
  .page-heading h1 { font-size: 22px; }
  .metric-card strong { font-size: 26px; }
  .user-chip .uname, .topbar-title .crumb-org, .topbar-title .crumb-sep { display: none; }
  .login-card { padding: 28px 22px; }
}
@media print {
  body { background: #fff; }
  .page-heading { border-bottom: 1px solid #ccc; }
  .metric-card, .panel { box-shadow: none; }
}

/* ---------- Acta informativa (vista de impresión) ---------- */
.paper-acta { position: relative; max-width: 840px; padding: 0 56px 48px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.paper-acta .acta-band { height: 7px; margin: 0 -56px; background: linear-gradient(90deg, var(--yellow) 0 120px, var(--green-dark) 120px); }
.acta-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 14px 0 10px; border-bottom: 1px solid var(--line-strong); margin-bottom: 30px; }
.acta-top strong { color: var(--navy); letter-spacing: .04em; margin-right: 6px; }
.acta-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 26px; }
.acta-eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .14em; color: var(--green); margin: 0 0 4px; }
.paper-acta h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.acta-sub { color: var(--muted); margin: 0; line-height: 1.4 !important; }
.acta-folio { flex: none; width: 190px; margin: 0; background: var(--cream); border: 1px solid var(--line-strong); border-top: 3px solid var(--yellow); padding: 10px 14px; }
.acta-folio dt { font-size: 9.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.acta-folio dd { margin: 0 0 8px; font-size: 14px; }
.acta-folio dd:last-child { margin-bottom: 0; }
.acta-folio dd.strong { font-weight: 650; font-size: 15px; }
.paper-acta h2.acta-section { text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--green-dark); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; margin: 26px 0 14px; }
.acta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-bottom: 14px; font-size: 14px; }
.acta-grid .span-2 { grid-column: span 2; }
.acta-grid small { display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.acta-box { background: #fdfbf5; border: 1px solid var(--line); border-left: 3px solid var(--green); padding: 12px 16px; line-height: 1.7; text-align: justify; font-size: 14px; }
.acta-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 48px; margin-top: 34px; break-inside: avoid; page-break-inside: avoid; }
.acta-signatures .declaration { grid-column: span 2; text-align: center; color: var(--ink-2); margin: 0 0 10px; }
.sig { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; min-height: 120px; }
.sig-wide { grid-column: span 2; width: 50%; margin: 0 auto; }
.sig img { max-height: 70px; max-width: 220px; object-fit: contain; margin-bottom: 4px; }
.sig-line { display: block; width: 85%; border-top: 1px solid var(--ink-2); margin-bottom: 6px; }
.sig strong { font-size: 13px; font-weight: 600; }
.sig small { font-size: 9.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- Encabezado de impresión (todas las páginas impresas desde el navegador) ---------- */
.print-header { display: none; }
@media print {
  .print-header { display: flex; justify-content: space-between; align-items: baseline; border-top: 4px solid var(--green-dark); padding-top: 8px; margin-bottom: 14px; font-size: 10px; color: var(--muted); border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; }
  .print-header strong { color: var(--navy); letter-spacing: .04em; margin-right: 6px; }
  .paper-acta .print-header, body:has(.paper-acta) .print-header { display: none; }
  .paper-acta { border: 0; padding: 0; overflow: visible; }
  .paper-acta .acta-band { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .acta-folio, .acta-box, .table th, .badge, .metric-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .content { padding: 0 !important; }
  .page-heading { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; }
  .panel { break-inside: avoid; }
  .acta-section { break-after: avoid; page-break-after: avoid; }
  .acta-grid > div, .acta-box { break-inside: avoid; }
}
@media (max-width: 600px) {
  .paper-acta { padding: 0 18px 28px; }
  .paper-acta .acta-band { margin: 0 -18px; }
  .acta-heading { flex-direction: column; }
  .acta-grid, .acta-signatures { grid-template-columns: 1fr; }
  .acta-grid .span-2, .acta-signatures .declaration, .sig-wide { grid-column: auto; width: auto; }
}


/* ==========================================================================
   4. Sistema de diseño (componentes ui-*)
   ========================================================================== */
/* ==========================================================================
   Driswil · Sistema de diseño (componentes)
   Se carga después de executive.css y usa sus tokens (--green, --ink, --line…).
   Prefijo `ui-` para todo componente nuevo; ver docs/SISTEMA_DE_DISENO.md.
   ========================================================================== */

:root {
  --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px; --ui-space-5: 24px; --ui-space-6: 32px;
  --ui-touch: 44px;                       /* objetivo táctil mínimo (WCAG 2.5.5) */
  --ui-focus: 0 0 0 3px rgba(74, 119, 60, .35);
  --ui-ok-bg: #e7f0e2;   --ui-ok-fg: #2f5524;
  --ui-warn-bg: #fbf0d9; --ui-warn-fg: #7a4a00;
  --ui-bad-bg: #fbe7e4;  --ui-bad-fg: #8f1107;
  --ui-info-bg: #e3eef6; --ui-info-fg: #1d4f72;
  --ui-neutral-bg: #eeece7; --ui-neutral-fg: #4a423b;
}

/* ---------- Accesibilidad base ---------- */
.ui-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 600; transition: top .15s; }
.ui-skip:focus { top: 12px; color: #fff; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 0; box-shadow: var(--ui-focus); border-radius: 6px; }
.btn:focus-visible { box-shadow: var(--ui-focus); }
.sidebar :where(a, summary):focus-visible { box-shadow: 0 0 0 2px var(--yellow); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Encabezado de página ---------- */
.ui-title-icon { color: var(--green); font-size: .85em; margin-right: 10px; vertical-align: -1px; }
.ui-backlink { display: flex; gap: 8px; align-items: center; font-size: 13px; margin: -12px 0 10px; color: var(--muted); }
.ui-backlink a { color: var(--muted); font-weight: 500; }
.ui-backlink a:hover { color: var(--green); }
.ui-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* ---------- Botones ---------- */
.ui-btn-touch { min-height: var(--ui-touch); padding-inline: 18px; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.btn i + * , .btn > i { line-height: 1; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .75; }
.ui-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: ui-spin .7s linear infinite; vertical-align: -2px; }
@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ---------- Barra de herramientas ---------- */
.ui-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.ui-toolbar form { margin: 0; }
.ui-toolbar__spacer { flex: 1; }

/* ---------- Pestañas de estado ---------- */
.ui-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.ui-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: var(--ui-touch); color: var(--ink-2); font-weight: 550; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ui-tab:hover { color: var(--green-dark); }
.ui-tab.is-active { color: var(--green-dark); border-bottom-color: var(--green); }
.ui-tab__count { background: var(--ui-neutral-bg); color: var(--ink-2); border-radius: 20px; padding: 1px 8px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ui-tab.is-active .ui-tab__count { background: var(--green); color: #fff; }

/* ---------- Barra de filtros ---------- */
.ui-filterbar { margin-bottom: 20px; padding: 16px 18px; }
.ui-filterbar__main { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-filterbar__advanced { margin-top: 12px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.ui-search { position: relative; flex: 1 1 260px; }
.ui-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ui-search .form-control { padding-left: 36px; min-height: 40px; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 12.5px; }
.ui-chips__label { color: var(--muted); margin-right: 2px; }
.ui-chip { display: inline-flex; gap: 4px; align-items: center; background: var(--green-soft); color: var(--green-dark); border: 1px solid #cddcc3; border-radius: 20px; padding: 3px 6px 3px 10px; font-weight: 550; }
.ui-chip span { font-weight: 450; color: var(--ink-2); }
.ui-chip:hover { background: #e1ecda; color: var(--green-dark); }
.ui-chips__clear { margin-left: 4px; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Estado (badges) ---------- */
.ui-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; border-radius: 20px; padding: 3px 10px; white-space: nowrap; line-height: 1.4; }
.ui-badge i { font-size: .8em; }
.ui-badge--ok { background: var(--ui-ok-bg); color: var(--ui-ok-fg); }
.ui-badge--ok i.bi-circle-fill { font-size: 7px; }
.ui-badge--warn { background: var(--ui-warn-bg); color: var(--ui-warn-fg); }
.ui-badge--bad { background: var(--ui-bad-bg); color: var(--ui-bad-fg); }
.ui-badge--info { background: var(--ui-info-bg); color: var(--ui-info-fg); }
.ui-badge--neutral { background: var(--ui-neutral-bg); color: var(--ui-neutral-fg); }

/* ---------- Tablas ---------- */
.ui-table-stack th[scope="row"] { font-weight: 600; }
.ui-table-stack th[scope="row"] a { color: var(--ink); }
.ui-table-stack th[scope="row"] a:hover { color: var(--green); }
.ui-row-actions { text-align: right; white-space: nowrap; }
.ui-row-actions form { display: inline; margin: 0; }
.ui-row-actions .btn + .btn, .ui-row-actions form + .btn { margin-left: 4px; }
.row-attention > * { background: #fffaf0 !important; }
.ui-export { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ui-export > span { font-size: 12px; color: var(--muted); margin-right: 2px; }
@media (max-width: 767.98px) {
  .ui-table-stack thead { display: none; }
  .ui-table-stack, .ui-table-stack tbody, .ui-table-stack tr, .ui-table-stack th, .ui-table-stack td { display: block; width: 100%; }
  .ui-table-stack tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 10px 12px; background: #fff; }
  .ui-table-stack > :not(caption) > * > * { border: 0; padding: 3px 0; background: transparent !important; }
  .ui-table-stack td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 96px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
  .ui-table-stack th[scope="row"] { font-size: 15px; padding-bottom: 6px !important; }
  .ui-table-stack .ui-row-actions { text-align: left; padding-top: 8px !important; display: flex; gap: 6px; flex-wrap: wrap; }
  .ui-table-stack .ui-row-actions .btn { min-height: var(--ui-touch); display: inline-flex; align-items: center; gap: 6px; }
  .table-responsive:has(> .ui-table-stack) { overflow: visible; }
}

/* ---------- Paginación ---------- */
.ui-pagination { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding-top: 14px; font-size: 13px; color: var(--muted); }
.ui-pagination__links { display: flex; gap: 6px; }

/* ---------- Estado vacío ---------- */
.ui-empty { text-align: center; padding: 44px 16px; color: var(--muted); display: grid; justify-items: center; gap: 6px; }
.ui-empty > i { font-size: 34px; color: #b8b0a3; }
.ui-empty strong { color: var(--ink); font-size: 15px; font-weight: 600; }
.ui-empty p { margin: 0 0 8px; max-width: 420px; }

/* ---------- Formularios ---------- */
.ui-form .ui-section { margin-bottom: 16px; }
.ui-section__title { display: flex; align-items: center; gap: 10px; font-size: 15px !important; font-weight: 600; margin: 0 0 16px !important; }
.ui-section__title i { color: var(--green); }
.ui-section__hint { margin-left: auto; font-size: 12px; font-weight: 450; color: var(--muted); }
.ui-section.is-highlighted { border-color: #cddcc3; box-shadow: 0 0 0 3px var(--green-soft), var(--shadow-sm); }
.ui-field .form-label { display: flex; gap: 4px; align-items: baseline; font-size: 12.5px; }
.ui-req { color: var(--berry); font-weight: 700; }
.ui-optional { margin-left: auto; font-weight: 450; font-size: 11px; color: var(--muted); }
.ui-field .form-control, .ui-field .form-select { min-height: 42px; font-size: 14px; }
.ui-field textarea.form-control { min-height: 96px; }
.ui-field-error { color: var(--ui-bad-fg); font-size: 12.5px; margin-top: 5px; font-weight: 500; }
.ui-field .is-invalid { border-color: #d98378; }
.ui-field-link { display: inline-flex; gap: 4px; margin-top: 6px; font-size: 12.5px; font-weight: 550; }
.ui-input-now { display: flex; gap: 6px; }
.ui-input-now .form-control { flex: 1; min-width: 0; }
.ui-input-now .btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding-inline: 10px; font-size: 12px; }
@media (max-width: 420px) { .ui-input-now .btn span { display: none; } }
.ui-error-summary { background: #fdf1ef; border: 1px solid #f0c3bc; border-left: 4px solid var(--berry); border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; color: #7a1208; }
.ui-error-summary ul { margin: 8px 0 0; padding-left: 20px; }
.ui-error-summary a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ui-repeat__row { padding: 10px 0; border-bottom: 1px dashed var(--line); }
.ui-repeat__row:first-child { padding-top: 0; }

/* Barra de acciones fija al final del formulario */
.ui-actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; margin: 8px 0 0; background: rgba(247, 245, 240, .94); backdrop-filter: blur(6px); border-top: 1px solid var(--line); }
@media (max-width: 600px) { .ui-actionbar { margin-inline: -16px; padding-inline: 16px; } .ui-actionbar .btn { flex: 1; min-height: var(--ui-touch); } }

/* ---------- Firmas ---------- */
.ui-signatures { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ui-signature { margin: 0; }
.ui-signature__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; }
.ui-signature__head strong { font-size: 13px; font-weight: 600; }
.ui-signature__state { font-size: 11.5px; color: var(--muted); }
.ui-signature__state.is-signed { color: var(--ui-ok-fg); font-weight: 600; }
.ui-signature .signature-canvas { width: 100%; height: auto; aspect-ratio: 700 / 180; display: block; background: #fff; border: 1.5px dashed var(--line-strong); border-radius: 8px; touch-action: none; cursor: crosshair; margin-bottom: 6px; }
.ui-signature .signature-canvas.is-signed { border-style: solid; border-color: #b9cfae; }
.ui-signature .signature-existing { max-height: 90px; max-width: 100%; display: block; margin-bottom: 4px; }
.ui-signature--view { border: 1px solid var(--line); border-radius: 8px; padding: 12px; text-align: center; }
.ui-signature--view .signature-existing { margin: 0 auto 6px; }
.ui-signature--view figcaption { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }
.ui-signature__missing { color: var(--muted); font-size: 12.5px; padding: 26px 0; }

/* ---------- Lista de definición (detalle) ---------- */
.ui-detail .ui-section { margin-bottom: 16px; }
.ui-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 24px; margin: 0; }
.ui-dl__item--wide { grid-column: 1 / -1; }
.ui-dl dt { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.ui-dl dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.ui-dl dd.is-empty { color: var(--muted); }

/* ---------- Línea de tiempo ---------- */
.ui-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.ui-timeline__item { position: relative; padding: 0 0 20px 16px; }
.ui-timeline__item::before { content: ""; position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--green); }
.ui-timeline__item--archive::before { border-color: var(--berry); }
.ui-timeline__item--restore::before { border-color: #d9a03c; }
.ui-timeline__head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.ui-timeline__head span { color: var(--muted); font-size: 13px; }
.ui-timeline__head time { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.ui-changes { margin: 8px 0 0; display: grid; gap: 4px; font-size: 13px; }
.ui-changes > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 10px; padding: 6px 10px; background: #faf8f3; border-radius: 6px; }
.ui-changes dt { font-weight: 600; color: var(--ink-2); }
.ui-changes dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ui-changes__before { color: var(--muted); text-decoration: line-through; text-decoration-color: #cfc7ba; }
.ui-changes i { color: var(--muted); font-size: 11px; }
@media (max-width: 600px) { .ui-changes > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Mensajes ---------- */
.ui-messages { display: grid; gap: 8px; margin-bottom: 18px; }
.ui-alert { display: flex; gap: 10px; align-items: flex-start; border-radius: 8px; border: 1px solid; padding: 11px 12px 11px 14px; font-size: 13.5px; margin-bottom: 16px; }
.ui-messages .ui-alert { margin-bottom: 0; }
.ui-alert > i { margin-top: 1px; }
.ui-alert > div { flex: 1; }
.ui-alert--success { background: #eff5eb; border-color: #cbdcc1; color: #2a4a20; }
.ui-alert--danger { background: #fdf1ef; border-color: #f0c3bc; color: #7a1208; }
.ui-alert--warning { background: #fdf7ea; border-color: #f0dcb0; color: #6d4504; }
.ui-alert--info { background: #eff5fa; border-color: #c8dceb; color: #1d4f72; }
.ui-alert__close { border: 0; background: transparent; color: inherit; opacity: .6; padding: 0 4px; line-height: 1; }
.ui-alert__close:hover { opacity: 1; }

/* ---------- Diálogo de confirmación ---------- */
.ui-dialog { border: 0; border-radius: 12px; padding: 0; max-width: 440px; width: calc(100% - 32px); box-shadow: 0 20px 50px -12px rgba(35, 29, 24, .35); color: var(--ink); }
.ui-dialog::backdrop { background: rgba(21, 43, 15, .45); }
.ui-dialog__body { padding: 22px 22px 8px; display: flex; gap: 14px; }
.ui-dialog__body > i { font-size: 22px; color: var(--berry); }
.ui-dialog__body p { margin: 0; font-size: 14px; line-height: 1.5; }
.ui-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 18px; }

/* ---------- Menú lateral: grupo de formatos ---------- */

/* ---------- Dashboard: tarjetas enlazadas ---------- */
a.metric-card { display: block; color: var(--ink); }
a.metric-card:focus-visible { box-shadow: var(--ui-focus); }
.metric-card .metric-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.metric-card.warn .metric-hint { color: var(--ui-warn-fg); font-weight: 550; }

@media print {
  .ui-actionbar, .ui-toolbar, .ui-tabs, .ui-filterbar, .ui-backlink, .ui-row-actions { display: none !important; }
  .ui-section { break-inside: avoid; }
}
main.content:focus { box-shadow: none; }
.metric-card .metric-hint i { position: static; display: inline; width: auto; height: auto; background: none; color: inherit; font-size: inherit; border-radius: 0; }
.metric-card .metric-hint { padding-right: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }
.ui-table-stack tbody th[scope="row"] { text-transform: none; letter-spacing: normal; font-size: 13.5px; color: var(--ink); background: inherit; border-bottom-color: var(--line); padding: 12px; vertical-align: middle; }

/* ---------- Correcciones responsive globales ---------- */
@media (max-width: 991.98px) {
  /* El menú cerrado no proyecta sombra ni recibe foco de teclado */
  .sidebar { box-shadow: none; visibility: hidden; transition: left .2s, visibility 0s .2s; }
  .sidebar.open { box-shadow: 20px 0 40px rgba(0, 0, 0, .25); visibility: visible; transition: left .2s; }
}
@media (max-width: 600px) {
  .page-heading { align-items: flex-start; }
  .page-heading > .btn, .page-heading > a.btn { align-self: stretch; }
  .panel-heading { flex-wrap: wrap; }
  .ui-table-stack tbody th[scope="row"] { padding: 0 0 6px !important; }
  .ui-toolbar > .btn, .ui-toolbar > form { flex: 1 1 auto; }
  .ui-toolbar > form .btn { width: 100%; }
  .ui-toolbar__spacer { display: none; }
}
.ui-toolbar .btn { min-height: var(--ui-touch); display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Tarjetas de reporte ---------- */
.ui-report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ui-report-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 8px; background: #fff; }
.ui-report-card header { display: flex; gap: 10px; align-items: center; }
.ui-report-card header i { color: var(--green); font-size: 18px; }
.ui-report-card h3 { font-size: 14px; font-weight: 600; margin: 0; }
.ui-report-card p { margin: 0; font-size: 13px; color: var(--muted); }
.ui-report-card p strong { font-size: 20px; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.ui-report-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Pestañas de Bootstrap (nav-pills) con el aspecto de .ui-tabs ---------- */
.nav.nav-pills.nav-pills-sm { gap: 4px !important; border-bottom: 1px solid var(--line); margin-bottom: 14px !important; }
.nav.nav-pills.nav-pills-sm .nav-link { border-radius: 0; background: none; color: var(--ink-2); font-weight: 550; font-size: 13.5px; padding: 10px 12px; min-height: var(--ui-touch); display: inline-flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.nav.nav-pills.nav-pills-sm .nav-link:hover { color: var(--green-dark); }
.nav.nav-pills.nav-pills-sm .nav-link.active { background: none; color: var(--green-dark); border-bottom-color: var(--green); }
@media (max-width: 767.98px) { .nav.nav-pills.nav-pills-sm { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .nav.nav-pills.nav-pills-sm .nav-link { white-space: nowrap; } }
.ui-table-stack td[colspan] { text-align: center; }
fieldset > legend.form-label { float: none; width: auto; margin-bottom: 6px; font-size: 12.5px; }
.ui-route { min-width: 180px; }
.ui-route span { display: block; }
.ui-route i { color: var(--muted); font-size: 11px; display: block; margin: 1px 0; }
@media (max-width: 767.98px) { .ui-route span, .ui-route i { display: inline; } .ui-route i { margin: 0 4px; } }
.ui-filterbar .filters .ui-filterbar__advanced { margin-top: 12px; }
.ui-signature__missing.is-error { color: var(--ui-bad-fg); }