/* Calidad Easywood — misma base visual que Ingeniería (proyectos.easywood.cl),
   con acento verde para distinguir las dos apps a primera vista. */
:root {
  color-scheme: light;
  --bg: #f5f3ef;
  --panel: #ffffff;
  --panel-2: #faf8f5;
  --line: #e4dfd7;
  --text: #25221e;
  --muted: #7a7268;
  --accent: #2f6b55;
  --accent-2: #6aa58c;
  --accent-wash: #e6f0eb;
  --ok: #2f7d4f;
  --warn: #c98a12;
  --alert: #c0392b;
  --info: #3b6ea8;
  --shadow: 0 1px 2px rgba(40, 30, 20, .06), 0 2px 8px rgba(40, 30, 20, .05);
  --radius: 10px;

  /* Datos (paleta validada de la guía de visualización) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --st-good: #0ca30c;
  --st-warning: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --chart-surface: #fcfcfb;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--alert); min-height: 1em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
h2 { font-size: 17px; margin: 0 0 4px; }
h3 { font-size: 14px; margin: 0 0 8px; }

.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.btn:hover { border-color: var(--accent-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #23523f; }
.btn.danger { color: var(--alert); }
.btn.ghost { background: transparent; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }

.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: .01em; }
.brand-mark { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Ingreso */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.login-card label { display: grid; gap: 6px; font-weight: 550; }
.login-card input { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; }
.help { font-size: 13px; color: var(--muted); margin: 0; }

/* Barra superior */
.topbar { display: flex; align-items: center; gap: 18px; padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.tabs { display: flex; gap: 2px; overflow-x: auto; max-width: 100%; }
.tabs button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 550; white-space: nowrap; }
.tabs button.active { background: var(--bg); color: var(--text); }
.tab-n:empty { display: none; }
.tab-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.me { display: flex; align-items: center; gap: 6px; font-weight: 550; background: none; border: 0; cursor: pointer; padding: 2px; }

.filters { display: flex; gap: 8px; padding: 12px 18px 10px; align-items: center; flex-wrap: wrap; }
.view-title { font-size: 18px; margin: 0; font-weight: 650; }
.view-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.view-tools input[type=search], .view-tools select, .view-tools input[type=date] { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.view-tools input[type=search] { width: 200px; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); white-space: nowrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.seg button { border: 0; background: transparent; padding: 5px 10px; cursor: pointer; color: var(--muted); }
.seg button.active { background: var(--accent); color: #fff; }

main { padding: 0 18px 32px; }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--radius); }

/* Avatares */
.av { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 10.5px; font-weight: 700; color: #fff; flex: none; background: #8b8378; }
.av.lg { width: 30px; height: 30px; font-size: 12px; }
.av.none { background: transparent; border: 1.5px dashed var(--muted); color: var(--muted); }

/* Tablero */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.col { background: #ece8e1; border-radius: var(--radius); padding: 8px; min-height: 160px; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 6px 10px; font-weight: 650; }
.col-head .count { color: var(--muted); font-weight: 500; }
.col-note { font-size: 11px; color: var(--muted); padding: 0 6px 8px; margin-top: -6px; }
.cards { display: grid; gap: 8px; }
.card { background: var(--panel); border-radius: 8px; padding: 10px 11px; box-shadow: var(--shadow); cursor: pointer; border: 1px solid transparent; display: grid; gap: 6px; text-align: left; width: 100%; }
.card:hover, .card:focus-visible { border-color: var(--accent-2); outline: none; }
.card-top { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--muted); }
.card-top { flex-wrap: wrap; }
.card-top .code { font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.card-title { font-weight: 600; line-height: 1.25; }
.card-sub { color: var(--muted); font-size: 12px; }
.card-foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.card-foot .spacer { flex: 1; }
.more-btn { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 11px; padding: 1px 7px; border-radius: 10px; background: #efe9e0; color: #5c5044; white-space: nowrap; }
.badge { white-space: nowrap; font-size: 11px; font-weight: 650; padding: 1px 6px; border-radius: 6px; background: #eeeae4; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.badge.ok { background: #dcefe3; color: var(--ok); }
.badge.warn { background: #fbefd5; color: #8a5d05; }
.badge.alert { background: #f8dcd8; color: var(--alert); }
.badge.info { background: #dde8f5; color: var(--info); }
.badge.accent { background: var(--accent-wash); color: var(--accent); }

/* Gravedad: color + forma + texto, nunca solo color */
.sev { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.sev::before { content: ""; width: 9px; height: 9px; flex: none; }
.sev.leve::before { background: var(--st-warning); border-radius: 50%; }
.sev.moderada::before { background: var(--st-serious); border-radius: 2px; }
.sev.critica::before { background: var(--st-critical); clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; height: 10px; }

/* Listas tipo tabla */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
table.list { width: 100%; border-collapse: collapse; font-size: 13px; }
table.list th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap; }
table.list td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: var(--panel-2); }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list .desc { max-width: 420px; }
tr.inactive td { opacity: .55; }

/* Secciones y grillas */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.panel + .panel, .section-gap { margin-top: 14px; }
.grid-2 > .panel, .grid-3 > .panel, .stack > .panel { margin-top: 0; }
table.list td b { white-space: nowrap; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.panel-head h3 { margin: 0; }
.stack { display: grid; gap: 14px; }

/* Tarjetas de cifras */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 2px; }
.kpi .k-label { font-size: 12px; color: var(--muted); }
.kpi .k-value { font-size: 24px; font-weight: 650; line-height: 1.15; }
.kpi .k-delta { font-size: 12px; color: var(--muted); }
.kpi .k-delta.up-bad { color: var(--alert); }
.kpi .k-delta.down-good { color: #006300; }
.kpi.hero .k-value { font-size: 34px; }

/* Barras horizontales (una serie) */
.bars { display: grid; gap: 7px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-row .b-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bar-track { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-fill { height: 14px; background: var(--series-1); border-radius: 0 4px 4px 0; min-width: 2px; }
.bar-val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-row:hover .bar-fill { filter: brightness(.9); }

/* Columnas (apiladas) */
.cols-chart { position: relative; padding-left: 30px; }
.cols-plot { position: relative; height: 170px; border-bottom: 1px solid var(--axis); display: flex; align-items: flex-end; justify-content: space-around; gap: 4px; background: var(--chart-surface); }
.gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--grid); pointer-events: none; }
.gridline span { position: absolute; left: -30px; top: -8px; width: 24px; text-align: right; font-size: 10.5px; color: #898781; font-variant-numeric: tabular-nums; }
.col-slot { position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; z-index: 1; }
.col-stack { width: 24px; max-width: 70%; display: flex; flex-direction: column-reverse; gap: 2px; }
.col-total { white-space: nowrap; }
.col-seg { width: 100%; }
.col-stack .col-seg:last-child { border-radius: 4px 4px 0 0; }
.col-total { font-size: 11px; color: var(--muted); margin-bottom: 3px; font-variant-numeric: tabular-nums; min-height: 14px; }
.col-slot:hover .col-stack { filter: brightness(.92); }
.cols-x { display: flex; justify-content: space-around; gap: 4px; margin-top: 5px; }
.cols-x span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: visible; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--text); margin-bottom: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
details.data-table { margin-top: 8px; font-size: 12px; }
details.data-table summary { color: var(--muted); cursor: pointer; }
details.data-table table { margin-top: 6px; }

.tip { position: fixed; z-index: 90; pointer-events: none; background: #25221e; color: #fff; font-size: 12px; padding: 6px 9px; border-radius: 6px; max-width: 260px; line-height: 1.35; box-shadow: var(--shadow); }

/* Panel lateral (detalle) */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100%); background: var(--bg); z-index: 50; box-shadow: -4px 0 24px rgba(0,0,0,.12); overflow-y: auto; }
.drawer-inner { padding: 0 0 40px; }
.backdrop { position: fixed; inset: 0; background: rgba(30, 25, 20, .28); z-index: 40; }
.d-head { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--line); padding: 14px 18px 12px; display: grid; gap: 8px; }
.d-head-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-head h2 { font-size: 18px; margin: 0; line-height: 1.25; }
.d-close { margin-left: auto; }
.d-body { padding: 14px 18px; display: grid; gap: 14px; }
.d-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.steps { display: flex; gap: 0; font-size: 11.5px; overflow-x: auto; }
.steps span { padding: 4px 10px 4px 14px; background: #ece8e1; color: var(--muted); white-space: nowrap; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%); margin-right: -4px; }
.steps span:first-child { clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); padding-left: 10px; border-radius: 4px 0 0 4px; }
.steps span.done { background: var(--accent-wash); color: var(--accent); }
.steps span.now { background: var(--accent); color: #fff; font-weight: 650; }

.sec { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.sec > summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 8px; font-weight: 650; }
.sec > summary::-webkit-details-marker { display: none; }
.sec > summary::before { content: "▸"; color: var(--muted); font-size: 12px; transition: transform .15s; }
.sec[open] > summary::before { transform: rotate(90deg); }
.sec > summary .s-note { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--muted); }
.sec-body { padding: 0 14px 14px; display: grid; gap: 12px; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; }
.kv div { display: grid; gap: 2px; min-width: 0; }
.kv dt, .kv .k { font-size: 11.5px; color: var(--muted); }
.kv dd, .kv .v { margin: 0; overflow-wrap: anywhere; }
.prose { white-space: pre-wrap; line-height: 1.45; overflow-wrap: anywhere; }

.callout { border-radius: 8px; padding: 10px 12px; background: var(--accent-wash); border: 1px solid #cfe1d8; display: grid; gap: 6px; }
.callout.warn { background: #fdf5e4; border-color: #f0dcae; }
.callout.alert { background: #fbeae7; border-color: #f0c7c0; }

/* Formularios */
.form { display: grid; gap: 10px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field > span { font-size: 12px; color: var(--muted); font-weight: 550; }
.field input, .field select, .field textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.field textarea { min-height: 70px; resize: vertical; line-height: 1.4; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-2); outline-offset: -1px; border-color: var(--accent-2); }
.field.req > span::after { content: " *"; color: var(--alert); }
.form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.paso-panel { border: 1.5px solid var(--accent-2); background: #f6faf8; border-radius: var(--radius); padding: 14px; }
.tipo-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.tipo-pick label { border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; background: var(--panel); }
.tipo-pick label:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.tipo-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-pick b { font-size: 13.5px; }
.tipo-pick small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.whys { display: grid; gap: 6px; counter-reset: why; }
.whys label { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.whys input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 13px; }
.money { font-variant-numeric: tabular-nums; }
.total-line { display: flex; justify-content: space-between; font-weight: 650; border-top: 1px solid var(--line); padding-top: 8px; }

/* Historial */
.timeline { display: grid; gap: 0; }
.ev { display: grid; grid-template-columns: 26px 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ev-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; margin-top: 2px; }
.ev.ev-comentario .ev-text { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; }

.files { display: flex; flex-wrap: wrap; gap: 8px; }
.file { display: grid; gap: 4px; width: 120px; font-size: 11.5px; text-decoration: none; color: var(--text); }
.file .thumb { width: 120px; height: 86px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2) center / cover no-repeat; display: grid; place-items: center; color: var(--muted); font-weight: 650; }
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Acciones del plan */
.acciones { display: grid; gap: 8px; }
.accion { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; display: grid; gap: 6px; background: var(--panel); }
.accion.anulada { opacity: .55; }
.accion.anulada .a-desc { text-decoration: line-through; }
.accion-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.a-desc { font-weight: 550; line-height: 1.35; }
.accion-ops { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.accion-ops select { padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; }

/* Bitácora */
.bit-form { margin-bottom: 14px; }
.bit-form > summary { font-weight: 650; }
.day-nav { display: inline-flex; gap: 4px; align-items: center; }

/* Equipo */
.team-table input, .team-table select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; width: 100%; min-width: 120px; background: var(--panel); }
.team-table input[type=checkbox] { width: auto; min-width: 0; padding: 0; }
.role-checks { display: grid; gap: 2px; font-size: 12px; }
.role-checks label { display: flex; gap: 5px; align-items: center; white-space: nowrap; }
.team-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.pw-show { font-family: ui-monospace, Consolas, monospace; font-size: 20px; letter-spacing: .06em; background: var(--panel-2); border: 1px dashed var(--accent-2); border-radius: 8px; padding: 10px 12px; text-align: center; user-select: all; }
.token-show { font-family: ui-monospace, Consolas, monospace; font-size: 13px; word-break: break-all; background: var(--panel-2); border: 1px dashed var(--accent-2); border-radius: 8px; padding: 10px 12px; user-select: all; }
code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: #efe9e0; padding: 1px 5px; border-radius: 4px; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #25221e; color: #fff; padding: 10px 16px; border-radius: 10px; z-index: 100; box-shadow: var(--shadow); max-width: calc(100% - 32px); }
.toast.err { background: var(--alert); }

.print-head { display: none; }

/* Hoja imprimible tipo tablero: una página A4 apaisada (281 × 194 mm útiles con
   márgenes de 8 mm). Alto fijo y overflow oculto: pase lo que pase, no salta a
   una segunda hoja. La arma app.js en beforeprint. */
#print-sheet { display: none; }
#print-sheet {
  width: 281mm; height: 192mm; overflow: hidden; background: #fff; color: var(--text);
  grid-template-rows: auto auto minmax(0, 1fr) minmax(0, 1fr) auto; gap: 3mm;
  font-size: 7.6pt; line-height: 1.3;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.hp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; border-bottom: 1.5px solid var(--accent); padding-bottom: 2mm; }
.hp-marca { display: flex; align-items: center; gap: 5px; font-weight: 650; font-size: 7.6pt; color: var(--accent); letter-spacing: .02em; }
.hp-marca .brand-mark { width: 10px; height: 10px; border-radius: 3px; }
.hp-head h1 { font-size: 15pt; margin: 1mm 0 0; line-height: 1.15; }
.hp-periodo { font-size: 9pt; color: var(--muted); margin-top: .5mm; }
.hp-meta { text-align: right; font-size: 7pt; color: var(--muted); white-space: nowrap; }
.hp-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2mm; }
.hp-kpi { border: 1px solid var(--line); border-radius: 6px; padding: 1.6mm 2.4mm; display: grid; gap: .4mm; min-width: 0; align-content: start; }
.hp-kl { font-size: 6.8pt; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-kv { font-size: 16pt; font-weight: 650; line-height: 1.1; }
.hp-kd { font-size: 6.4pt; color: var(--muted); }
.hp-kd.up-bad { color: var(--alert); }
.hp-kd.down-good { color: #006300; }
.hp-medio { display: grid; grid-template-columns: 62% minmax(0, 1fr); gap: 3mm; min-height: 0; }
.hp-col { display: grid; grid-auto-rows: minmax(0, auto); align-content: start; gap: 3mm; min-height: 0; }
.hp-bajo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3mm; min-height: 0; }
.hp-panel { border: 1px solid var(--line); border-radius: 6px; padding: 2mm 2.6mm; overflow: hidden; min-height: 0; min-width: 0; }
.hp-panel h3 { font-size: 8.4pt; margin: 0 0 1.8mm; display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.hp-panel h3 span { font-weight: 500; color: var(--muted); font-size: 7pt; white-space: nowrap; }
#print-sheet details.data-table { display: none; }
#print-sheet .bars { gap: 1.3mm; }
#print-sheet .bar-row { font-size: 7pt; grid-template-columns: minmax(0, 42%) 1fr; gap: 2mm; }
#print-sheet .bar-fill { height: 8px; }
#print-sheet .bar-val { font-size: 6.8pt; }
#print-sheet .legend { font-size: 7pt; margin-bottom: 1.2mm; gap: 3mm; }
#print-sheet .legend i { width: 8px; height: 8px; }
#print-sheet .cols-chart { padding-left: 26px; }
#print-sheet .gridline span { font-size: 6.4pt; left: -26px; width: 21px; }
#print-sheet .cols-x span, #print-sheet .col-total { font-size: 6.4pt; }
#print-sheet .cols-plot { background: #fff; }
#print-sheet .sev { font-size: 6.8pt; }
.hp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3mm; }
.hp-lista li { border-bottom: 1px solid var(--line); padding-bottom: 1.1mm; min-width: 0; }
.hp-lista li:last-child { border-bottom: 0; }
.hp-li-top { display: flex; gap: 1.6mm; align-items: baseline; white-space: nowrap; overflow: hidden; }
.hp-li-top span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.hp-li-desc { color: #4a443c; font-size: 7pt; }
.hp-mas, .hp-vacio { font-size: 6.8pt; color: var(--muted); margin-top: 1mm; }
.hp-pie { font-size: 6.6pt; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1.2mm; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Para medir la hoja antes de imprimir: visible con su tamaño real, fuera de la vista. */
#print-sheet.midiendo { display: grid !important; position: absolute; left: -10000px; top: 0; }
/* Vista previa en pantalla (solo para revisar la hoja sin imprimir). */
body.hoja-preview { background: #fff; }
body.hoja-preview > *:not(#print-sheet) { display: none !important; }
body.hoja-preview #print-sheet { display: grid; margin: 8mm; }

@media (max-width: 720px) {
  .topbar { gap: 8px; padding: 8px 12px; }
  .topbar-right { margin-left: 0; width: 100%; justify-content: flex-end; }
  .filters { padding: 10px 12px; }
  main { padding: 0 12px 28px; }
  .view-tools { margin-left: 0; justify-content: flex-start; }
  .view-tools input[type=search] { width: 100%; }
  .board { grid-auto-columns: minmax(240px, 86%); }
  .d-head, .d-body { padding-left: 12px; padding-right: 12px; }
  .bar-row { grid-template-columns: minmax(80px, 42%) 1fr; }
  /* En el celular cada fila de tabla pasa a ser una tarjeta */
  .table-wrap > table.list:not(.team-table) thead { display: none; }
  .table-wrap > table.list:not(.team-table) tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .table-wrap > table.list:not(.team-table) tr:last-child { border-bottom: 0; }
  .table-wrap > table.list:not(.team-table) td { padding: 0; border: 0; }
  .table-wrap > table.list:not(.team-table) td:empty { display: none; }
  .table-wrap > table.list:not(.team-table) td:nth-child(2), .table-wrap > table.list td.desc { flex-basis: 100%; max-width: none; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 11.5px; }
  body.hoja-activa > *:not(#print-sheet) { display: none !important; }
  body.hoja-activa #print-sheet { display: grid; }
  .topbar, .view-tools, .drawer, .backdrop, .toast, .tip, .no-print { display: none !important; }
  .filters { padding: 0 0 6px; }
  main { padding: 0; }
  .panel, .kpi, .table-wrap { break-inside: avoid; box-shadow: none; }
  .print-head { display: block; }
  details.data-table { display: none; }
}