/* Tervo — pages · Navy + Teal (v2). Structure unchanged; adds the login
   brand lockup tweak so the wordmark sits beside the app-icon. */

.login-title { margin: 0 0 8px; font-size: 1.72rem; font-weight: 700; }
.login-brand .login-title { margin: 0; }
.login-copy { margin: 0 0 24px; color: var(--color-muted); }

.input-action-wrap {
  position: relative;
}

.input-action-wrap input {
  width: 100%;
  padding-right: 44px;
}

.input-action-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-muted);
  background: transparent;
}

.input-action-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-muted);
}

.input-action-btn svg {
  width: 20px;
  height: 20px;
}

.login-back-link {
  justify-self: center;
  margin-top: 2px;
}

.field-hint {
  margin: 6px 0 0;
  color: var(--color-muted);
  font-size: 0.82rem;
}

/* Tarjeta de login usada fuera del grid del workspace (p. ej. cambiar
   contraseña): sin este limite, .login-panel se estira a todo el viewport. */
.login-panel-narrow {
  max-width: 440px;
}

.login-form {
  gap: 18px;
}

.login-form[hidden] {
  display: none;
}

.login-submit {
  width: 100%;
  min-height: 44px;
  margin-top: 2px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inline-action {
  padding: 0;
  border: 0;
  cursor: pointer;
  color: var(--color-primary);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 700;
}

.inline-action:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-form-intro {
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--teal-50);
}

.login-form-intro h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.login-form-intro p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.section-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
  gap: 20px;
  align-items: start;
}

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr); gap: 20px; }
.home-grid > .card:last-child { grid-column: 1 / -1; }

.quick-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

.workflow-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: workflow;
}
.workflow-list li {
  position: relative;
  min-height: 76px;
  padding: 14px 14px 14px 46px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-muted);
}
.workflow-list li::before {
  position: absolute;
  top: 16px;
  left: 16px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: var(--color-primary);
  border-radius: 50%;
  content: counter(workflow);
  counter-increment: workflow;
  font-size: 0.85rem;
  font-weight: 700;
}

.filters-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }

/* ---- Status banner (v3 · sobre navy, ver docs/dashboard-1b-tendencia.md) ---- */
.operational-pulse {
  margin-bottom: 20px;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-brand);
  box-shadow: var(--shadow-card);
}

.operational-pulse-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
}

.operational-pulse-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-on-brand);
}

.operational-pulse-kicker {
  color: var(--color-on-brand-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.operational-pulse-copy h2 { margin: 2px 0 4px; font-size: 0.95rem; color: var(--color-on-brand); }
.operational-pulse-copy p { margin: 0; color: var(--color-on-brand-muted); font-size: 0.85rem; }
.operational-pulse .btn-sm {
  border: 0;
  background: var(--teal-bright);
  color: var(--navy-900);
  font-weight: 700;
}
.operational-pulse-critical .operational-pulse-icon { background: rgba(180, 35, 24, 0.22); color: var(--on-brand-danger); }
.operational-pulse-critical .operational-pulse-copy h2 { color: var(--color-on-brand); }
.operational-pulse-warning .operational-pulse-icon { background: rgba(243, 201, 105, 0.22); color: #f3c969; }
.operational-pulse-warning .operational-pulse-copy h2 { color: var(--color-on-brand); }
.operational-pulse-stable .operational-pulse-icon { background: rgba(111, 211, 156, 0.2); color: #6fd39c; }
.operational-pulse-stable .operational-pulse-copy h2 { color: var(--color-on-brand); }
.operational-pulse-loading .operational-pulse-icon svg { animation: pulse-spin 1.2s linear infinite; }

.operational-pulse-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 20px 16px;
  border-top: 1px solid var(--brand-hairline);
}

.operational-pulse-signal {
  display: inline-flex;
  gap: 5px;
  align-items: baseline;
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-on-brand-muted);
  font-size: 0.8rem;
}
.operational-pulse-signal strong { color: var(--color-on-brand); }
.operational-pulse-signal.signal-critical { background: rgba(180, 35, 24, 0.22); color: var(--on-brand-danger); }
.operational-pulse-signal.signal-critical strong { color: var(--on-brand-danger); }
.operational-pulse-signal.signal-warning { background: rgba(243, 201, 105, 0.18); color: #f3c969; }
.operational-pulse-signal.signal-warning strong { color: #f3c969; }

.operational-queue { margin-top: 20px; }
.priority-work-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.priority-work-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.priority-work-list li[data-status="vencido"] { border-left-color: var(--color-danger); }
.priority-work-rank {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-muted);
  color: var(--color-muted);
  font-weight: 800;
}
.priority-work-copy { display: grid; gap: 3px; min-width: 0; }
.priority-work-copy > span { color: var(--color-muted); font-size: 0.82rem; }
.priority-work-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }

@keyframes pulse-spin { to { transform: rotate(360deg); } }

.status-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  margin-bottom: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: background-color 300ms ease, border-color 300ms ease;
}

.status-banner-icon {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
}
.status-banner-icon svg { width: 20px; height: 20px; }

.status-banner-body { flex: 1; min-width: 0; }
.status-banner-body h2 { margin: 0 0 4px; font-size: 1.15rem; }
.status-banner-body p { margin: 0; color: var(--slate-700); font-size: 0.92rem; line-height: 1.45; }

.status-banner .btn-sm {
  flex: none;
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.status-loading { border-color: var(--slate-300); }
.status-loading .status-banner-icon { background: var(--slate-200); }
.status-loading .status-banner-icon::after { content: "···"; color: var(--slate-500); }

.status-critical { border-color: var(--red-border); background: var(--red-50); }
.status-critical .status-banner-icon { color: var(--color-danger); background: var(--red-100); }
.status-critical h2 { color: var(--color-danger); }
.status-critical .btn-sm { color: #fff; background: var(--color-danger); border: none; }

.status-warning { border-color: #e8d5a0; background: var(--amber-100); }
.status-warning .status-banner-icon { color: var(--color-warning); background: #f5e6b8; }
.status-warning h2 { color: var(--color-warning); }
.status-warning .btn-sm { color: #fff; background: var(--color-warning); border: none; }

.status-stable { border-color: var(--green-border); background: var(--green-100); }
.status-stable .status-banner-icon { color: var(--color-success); background: #c8ecd4; }
.status-stable h2 { color: var(--color-success); }

/* ---- Selector de rango (segmented control, v3) ---- */
.range-switch {
  display: flex;
  flex: none;
  gap: 6px;
  padding: 4px;
  border-radius: 10px;
  background: var(--slate-200);
}
.range-switch button {
  padding: 7px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.range-switch button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.range-switch button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 2px;
}

/* ---- Gráfico de cumplimiento diario (v3) ---- */
.chart-legend {
  display: flex;
  gap: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
}
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }

.compliance-chart-card .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.compliance-chart-card .card-head h2 { margin: 0; }
.compliance-chart-card .card-sub { margin: 0 0 18px; color: var(--color-muted); font-size: 0.84rem; }
.compliance-chart { display: block; width: 100%; height: 200px; }
.compliance-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--slate-400);
  font-family: var(--font-mono);
  font-size: 0.69rem;
}

/* ---- Dashboard section anchor nav ---- */
.dashboard-compact-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.dashboard-compact-header .dashboard-section-nav { flex: 1 1 auto; margin: 0; }
.dashboard-sede-filter { flex: 0 0 min(240px, 35vw); }
.dashboard-sede-filter select { width: 100%; }
.dashboard-section-nav {
  display: flex;
  gap: 8px;
  margin: 4px 0 18px;
}
.dashboard-section-pill {
  padding: 6px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.dashboard-section-pill:hover { background: var(--color-surface-muted); color: var(--color-text); }
.dashboard-section-pill[aria-selected="true"] {
  color: var(--color-primary);
  background: var(--teal-50);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.dashboard-section-pill:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 2px;
}

.dashboard-panel-error {
  min-height: 220px;
  margin-bottom: 22px;
  justify-content: center;
}

/* ---- Dashboard V2: tabs desbordan con scroll horizontal en pantallas pequeñas ---- */
.dashboard-section-nav-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.dashboard-section-nav-scroll .dashboard-section-pill { flex: 0 0 auto; }

@media (max-width: 720px) {
  .dashboard-compact-header { align-items: stretch; flex-direction: column; gap: 10px; }
  .dashboard-sede-filter { flex-basis: auto; width: 100%; }
}

/* ---- Tablero V2: visor ---- */
.dashboard-shell { background: var(--surface-sunken); }
.tablero-viewer { display: flex; flex-direction: column; gap: 18px; }
.tablero-viewer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}

.tablero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.tablero-tile {
  position: relative;
  grid-column: span 1;
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 160px;
  box-shadow: var(--shadow-card);
  font-variant-numeric: tabular-nums;
}
.tablero-tile-s { grid-column: span 1; }
.tablero-tile-m,
.tablero-tile-l { grid-column: span 1; }
@media (min-width: 720px) {
  .tablero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero-tile-m,
  .tablero-tile-l { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .tablero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tablero-tile-m { grid-column: span 2; }
  .tablero-tile-l { grid-column: span 4; }
}

.tablero-tile-header { min-height: 20px; }
.tablero-tile-header h3 {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}
.tablero-visual-valor .tablero-tile-header { padding-right: 62px; }
.tablero-visual-valor .tablero-tile-valor-delta {
  position: absolute;
  top: 20px;
  right: 20px;
}
.tablero-tile-has-trend { min-height: 220px; }
.tablero-visual-valor .trend-sparkline-wrap { display: block; width: 100%; overflow: hidden; }
.tablero-visual-valor .trend-sparkline {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 44px;
  color: var(--series-primary);
}

.tablero-tile-valor,
.tablero-tile-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  justify-content: space-between;
}
.tablero-tile-valor-number {
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.tablero-tile-value-warning { color: var(--color-warning); }
.tablero-tile-value-critical { color: var(--color-danger); }
.tablero-tile-value-ok { color: var(--color-text); }

.delta-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.delta-good { background: var(--teal-100); color: var(--color-primary); }
.delta-bad { background: var(--red-100); color: var(--color-danger); }
.delta-neutral { background: var(--slate-200); color: var(--slate-700); }
.tablero-tile-valor-delta { font-variant-numeric: tabular-nums; }

.tablero-tile-tendencia { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.tablero-tile-tendencia .trend-sparkline-wrap { display: block; width: 100%; overflow: hidden; }
.tablero-tile-tendencia .trend-sparkline {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 44px;
  color: var(--series-primary);
}
.tablero-custom-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tablero-custom-period .field { min-width: 150px; }
.tablero-custom-period-error { margin: -10px 0 0; }
.tablero-tile-tendencia-kpis { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.tablero-tile-tendencia-kpis span { display: flex; flex-direction: column; gap: 3px; color: var(--color-muted); font-size: 0.75rem; }
.tablero-tile-tendencia-kpis strong { color: var(--color-text); font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tablero-tile-tendencia-axis { display: flex; justify-content: space-between; color: var(--slate-400); font-family: var(--font-mono); font-size: 0.69rem; }
.tablero-tile-tendencia-summary { padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 0.78rem; color: var(--color-muted); }
.tablero-tile-tendencia-compact { justify-content: space-between; }
.tablero-tile-compact-value-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tablero-tile-kpi-foot { color: var(--color-muted); font-size: 0.78rem; }
.tablero-chart-legend { display: flex; justify-content: flex-end; gap: 16px; color: var(--color-muted); font-size: 0.75rem; font-weight: 600; }
.tablero-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tablero-chart-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.tablero-chart-legend .series-current { background: var(--series-primary); }
.tablero-chart-legend .series-previous { background: var(--series-muted); }
.tablero-uplot { width: 100%; min-width: 0; min-height: 210px; overflow: hidden; }
.tablero-uplot .uplot { font-family: var(--font-family-base); }
.tablero-uplot .u-legend { display: none; }

.tablero-tile-pie { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; align-items: center; gap: 18px; }
.tablero-tile-pie svg { display: block; width: 100%; max-height: 210px; }
.tablero-pie-track { fill: none; stroke: var(--hairline); stroke-width: 18; }
.tablero-pie-segment { fill: none; stroke-width: 18; transform: rotate(-90deg); transform-origin: 50% 50%; }
.tablero-pie-total { fill: var(--color-text); font-size: 12px; font-weight: 800; }
.tablero-pie-caption { fill: var(--color-muted); font-size: 6px; }
.tablero-pie-legend { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tablero-pie-legend > div { display: grid; grid-template-columns: 10px minmax(80px, 1fr) auto; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); font-size: 0.82rem; }
.tablero-pie-legend > div:last-child { padding-bottom: 0; border-bottom: 0; }
.tablero-pie-legend strong { font-variant-numeric: tabular-nums; text-align: right; }
.tablero-pie-dot { width: 9px; height: 9px; border-radius: 50%; }
.tablero-pie-segment.pie-1 { stroke: var(--color-primary); }
.tablero-pie-segment.pie-2 { stroke: var(--color-warning); }
.tablero-pie-segment.pie-3 { stroke: var(--color-danger); }
.tablero-pie-segment.pie-4 { stroke: var(--color-success); }
.tablero-pie-segment.pie-5 { stroke: var(--navy-600); }
.tablero-pie-segment.pie-6 { stroke: var(--color-muted); }
.tablero-pie-dot.pie-1 { background: var(--color-primary); }
.tablero-pie-dot.pie-2 { background: var(--color-warning); }
.tablero-pie-dot.pie-3 { background: var(--color-danger); }
.tablero-pie-dot.pie-4 { background: var(--color-success); }
.tablero-pie-dot.pie-5 { background: var(--navy-600); }
.tablero-pie-dot.pie-6 { background: var(--color-muted); }

.tablero-histograma { display: flex; flex-direction: column; gap: 8px; min-height: 190px; }
.tablero-histograma-summary { display: flex; align-items: baseline; gap: 8px; }
.tablero-histograma-summary strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tablero-histograma-summary span { color: var(--color-muted); font-size: 0.78rem; }
.tablero-histograma-plot {
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: 120px;
  padding: 6px 2px 0;
  border-bottom: 1px solid var(--slate-300);
  background-image: repeating-linear-gradient(
    to top,
    var(--hairline) 0,
    var(--hairline) 1px,
    transparent 1px,
    transparent 33.33%
  );
  background-size: 100% 100%;
}
.tablero-histograma-column { flex: 1 1 0; display: flex; align-items: flex-end; min-width: 3px; height: 100%; }
.tablero-histograma-bar {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--series-primary);
  opacity: 0.72;
  transition: opacity var(--transition);
}
.tablero-histograma-column:last-child .tablero-histograma-bar { opacity: 1; }
.tablero-histograma-column:hover .tablero-histograma-bar { opacity: 1; }

.tablero-tile .metric-bars { gap: 16px; }
.tablero-tile .metric-bar-head { font-size: 0.82rem; font-weight: 600; }
.tablero-tile .metric-bar-head span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.tablero-tile .metric-bar-track { height: 10px; }
.tablero-tile .metric-bar-track > span { background: var(--series-primary); }

@media (max-width: 640px) {
  .tablero-tile-pie { grid-template-columns: 1fr; }
  .tablero-tile-pie svg { max-height: 180px; }
  .tablero-tile { min-height: 150px; }
  .tablero-tile-valor-number { font-size: 1.85rem; }
}

.tablero-tile-error { min-height: 100px; justify-content: center; }
.tablero-tile-detail-link { align-self: flex-start; font-size: 0.8rem; margin-top: 4px; }

.table-scroll { overflow-x: auto; }

/* ---- Dashboard summary tiles (v3 · ver docs/dashboard-1b-tendencia.md) ---- */
.dashboard-summary {
  gap: 18px;
  margin-bottom: 20px;
}

.dashboard-summary .summary-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
  min-height: 168px;
  padding: 20px;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dashboard-summary .summary-item::after {
  content: none;
}

.dashboard-summary .summary-item strong {
  margin-bottom: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
}

.dashboard-summary .summary-item span {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dashboard-summary-link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}
.dashboard-summary-link:hover {
  box-shadow: var(--shadow-card), 0 0 0 1px var(--color-primary);
  transform: translateY(-2px);
}
.dashboard-summary-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  outline-offset: 2px;
}

.summary-detail {
  margin-top: -4px;
  color: var(--color-muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: 1em;
}

.summary-open span { color: var(--color-primary); }
.summary-risk span { color: var(--color-danger); }
.summary-done span { color: var(--color-success); }
.summary-maintenance span { color: var(--navy-600); }
.summary-risk .summary-detail { color: var(--color-danger); }

.summary-risk-active {
  box-shadow: var(--shadow-card), 0 0 0 1px var(--red-border);
}

.summary-item .trend-sparkline-wrap {
  order: 3;
  display: block;
  width: 100%;
  height: 44px;
  margin-top: auto;
}

.summary-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.summary-item-head strong { margin: 0; }

.kpi-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  order: 3;
  height: 44px;
  margin-top: auto;
}
.kpi-bars span {
  flex: 1;
  min-height: 3px;
  border-radius: 2px;
  background: var(--series-done);
}
.kpi-bars span[data-today="true"] { background: var(--series-done-strong); }

.kpi-foot {
  order: 4;
  margin-top: -6px;
  color: var(--color-muted);
  font-size: 0.78rem;
}

.trend-sparkline {
  display: block;
  width: 100%;
  height: 100%;
}
.trend-risk { color: var(--color-danger); }
.trend-done { color: var(--color-success); }
.trend-open { color: var(--color-primary); }
.trend-maintenance { color: var(--navy-600); }

/* ---- Card header with action link ---- */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-header-row h2 { margin: 0; }
.card-header-link {
  flex: none;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}
.card-header-link:hover { text-decoration: underline; }

/* ---- Metric legend ---- */
.metric-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 4px 0 14px;
}
.metric-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 600;
}
.metric-legend-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}
.legend-risk { background: var(--color-danger); }
.legend-progress { background: var(--navy-600); }
.legend-maintenance { background: var(--navy-600); }
.legend-assigned { background: var(--color-primary); }
.legend-unassigned { background: var(--slate-400); }
.legend-review { background: var(--color-warning); }

/* ---- Dashboard lower grid ---- */
.dashboard-distribution {
  grid-column: 1 / -1;
}

.metric-bars {
  display: grid;
  gap: 14px;
}

.metric-bar {
  display: grid;
  gap: 8px;
}

.metric-bar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--slate-700);
  font-size: 0.92rem;
  font-weight: 700;
}

.metric-bar-track {
  display: flex;
  height: 10px;
  overflow: hidden;
  background: var(--slate-200);
  border-radius: var(--radius-pill);
}

.metric-bar-track span,
.bar-segment {
  display: block;
  height: 100%;
}

.metric-bar-track > span:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.metric-bar-track > span:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.metric-bar-track > span:only-child { border-radius: var(--radius-pill); }

.metric-bar-open .metric-bar-track > span { background: var(--color-primary); }
.metric-bar-risk .metric-bar-track > span { background: var(--color-danger); }
.metric-bar-maintenance .metric-bar-track > span { background: var(--navy-600); }
.metric-bar-review .metric-bar-track > span { background: var(--color-warning); }
.metric-bar-done .metric-bar-track > span { background: var(--color-success); }

.bar-seg-risk { background: var(--color-danger); }
.bar-seg-progress { background: var(--navy-600); }
.bar-seg-assigned { background: var(--color-primary); }
.bar-seg-unassigned { background: var(--slate-400); }

@media (min-width: 1200px) {
  .dashboard-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr); }
}

@media (max-width: 900px) {
  .section-grid { grid-template-columns: 1fr; }
  .operational-pulse-main { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .operational-pulse-main .btn { grid-column: 1 / -1; width: 100%; }
  .operational-pulse-signals { padding: 10px 14px; }
  .priority-work-list li { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .priority-work-state { grid-column: 1 / -1; justify-content: flex-start; padding-left: 42px; }
  .status-banner { flex-direction: column; align-items: flex-start; }
  .status-banner .btn-sm { align-self: flex-start; }
  .home-grid { grid-template-columns: 1fr; }
  .workflow-list { grid-template-columns: 1fr; }
  .filters-grid { grid-template-columns: 1fr; }
  .dashboard-compact-header { flex-wrap: wrap; }
  .range-switch { justify-content: space-between; width: 100%; }
  .range-switch button { flex: 1; min-height: 44px; }
}

@media (max-width: 560px) {
  .dashboard-summary .summary-item span { font-size: 2.4rem; }
}

/* ---- Incidentes: tablero de despacho ---- */
.incident-board {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

.incident-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.incident-column-title .badge-neutral {
  min-height: 20px;
  padding: 0 8px;
  font-size: 0.75rem;
}

.incident-cards {
  display: grid;
  gap: 12px;
}

.incident-card {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

.incident-card:hover { box-shadow: var(--shadow); }

.incident-card-bar { align-self: stretch; border-radius: var(--radius-pill); background: var(--slate-300); }
.incident-card[data-estado="abierto"] .incident-card-bar,
.incident-card[data-estado="despachado"] .incident-card-bar { background: var(--color-danger); }
.incident-card[data-estado="en_sitio"] .incident-card-bar { background: var(--color-warning); }
.incident-card[data-estado="controlado"] .incident-card-bar { background: var(--color-success); }

.incident-card-main { min-width: 0; }
.incident-card-open {
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.incident-card-open:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

.incident-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.incident-card-tipo {
  font-size: 1rem;
  font-weight: 700;
  text-transform: capitalize;
}

.incident-card-elapsed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
}

.incident-card[data-urgent="true"] .incident-card-elapsed { color: var(--color-danger); }

.incident-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 8px;
  color: var(--color-muted);
  font-size: 0.88rem;
}

.incident-card-steps {
  display: flex;
  align-items: center;
  gap: 4px;
}

.incident-step {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--slate-300);
}

.incident-step[data-done="true"] { background: var(--color-primary); }
.incident-step[data-current="true"] { background: var(--color-danger); box-shadow: 0 0 0 3px var(--red-100); }

.incident-card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}

.incident-empty-column {
  padding: 20px;
  color: var(--color-muted);
  font-size: 0.9rem;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}

.incident-closed-list {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
}

.incident-closed-item {
  width: 100%;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  color: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  cursor: pointer;
  font-size: 0.85rem;
  text-align: left;
}

.incident-closed-item:hover { border-color: var(--color-border-strong); }
.incident-closed-item:focus-visible { box-shadow: var(--focus-ring); }
.incident-closed-item strong { font-size: 0.9rem; text-transform: capitalize; }
.incident-closed-item span { color: var(--color-muted); }

.incident-workspace {
  display: grid;
  gap: 18px;
}

.incident-workspace-hero,
.incident-workspace-section {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.incident-workspace-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, var(--color-surface-muted), var(--color-surface));
}

.incident-workspace-hero h3,
.incident-workspace-section h3 {
  margin: 4px 0;
}

.incident-workspace-hero p,
.incident-section-heading p {
  margin: 4px 0 0;
  color: var(--color-muted);
}

.incident-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.incident-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.incident-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.incident-timeline li:not(:last-child)::after {
  position: absolute;
  top: 8px;
  right: 0;
  left: 9px;
  z-index: 0;
  height: 2px;
  background: var(--color-border);
  content: "";
}

.incident-timeline-marker {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 3px solid var(--color-surface);
  border-radius: 50%;
  background: var(--slate-300);
  box-shadow: 0 0 0 1px var(--color-border);
}

.incident-timeline li[data-complete="true"] .incident-timeline-marker {
  background: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.incident-timeline li > div {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  padding-right: 10px;
  background: var(--color-surface);
}

.incident-timeline strong { font-size: 0.84rem; }
.incident-timeline span:not(.incident-timeline-marker) {
  color: var(--color-muted);
  font-size: 0.78rem;
}

.incident-location-link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--color-primary);
  font-weight: 700;
}

.incident-resource-list,
.incident-evidence-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.incident-resource-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
}

.incident-resource-list li > div { display: grid; gap: 2px; }
.incident-resource-list span,
.incident-evidence-list span {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.incident-inline-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.incident-section-empty {
  margin: 0 0 14px;
  color: var(--color-muted);
}

.incident-log {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}

.incident-log li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 16px;
}

.incident-log-marker {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--teal-100);
}

.incident-log p { margin: 0 0 4px; }
.incident-log li div > span { color: var(--color-muted); font-size: 0.8rem; }
.incident-note-form { display: grid; gap: 10px; }
.incident-note-form .btn { justify-self: start; }

.incident-evidence-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.incident-evidence-list button {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 12px;
  color: inherit;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

.incident-evidence-list button:hover { border-color: var(--color-primary); }
.incident-evidence-upload {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 900px) {
  .incident-board { grid-template-columns: 1fr; }
  .incident-card { grid-template-columns: 4px 1fr; }
  .incident-card-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .incident-timeline { grid-template-columns: 1fr; gap: 10px; }
  .incident-timeline li:not(:last-child)::after {
    top: 16px;
    bottom: -10px;
    left: 7px;
    width: 2px;
    height: auto;
  }
  .incident-timeline li > div { padding: 0 0 8px; }
  .incident-inline-form { grid-template-columns: 1fr 1fr; }
  .incident-inline-form .btn { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .incident-workspace-hero,
  .incident-section-heading,
  .incident-evidence-upload {
    align-items: stretch;
    flex-direction: column;
  }
  .incident-inline-form,
  .incident-evidence-list { grid-template-columns: 1fr; }
  .incident-inline-form .btn { grid-column: auto; }
}

/* ---- Reporte de evento (impresion / PDF) ---- */
.report-body { background: var(--color-bg, #f6f7f9); }
.report-shell { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.report-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.report-document {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 32px;
}
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
.report-header h1 { margin: 0 0 4px; font-size: 24px; }
.report-subtitle { margin: 0; color: var(--color-text-muted, #647386); }
.report-brand { text-align: right; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.report-brand strong { font-size: 17px; }
.report-section { margin-bottom: 22px; }
.report-section h2 { font-size: 16px; margin: 0 0 10px; }
.report-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 0; }
.report-meta-row dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #647386); }
.report-meta-row dd { margin: 2px 0 0; }
.report-alert-list { margin: 0; padding-left: 18px; }
.report-alert-list li { margin-bottom: 4px; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th, .report-table td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; font-size: 14px; }
.report-table th { background: var(--color-surface-muted, #fbfcfd); }
.report-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.report-evidence-item { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px; break-inside: avoid; }
.report-evidence-item img { width: 100%; height: auto; border-radius: 4px; }
.report-evidence-item figcaption { margin-top: 8px; font-size: 12px; color: var(--color-text-muted, #647386); word-break: break-all; }
.report-signature img { background: #fff; }
.report-footer { border-top: 1px solid var(--color-border); padding-top: 12px; font-size: 12px; color: var(--color-text-muted, #647386); }

@media (max-width: 640px) {
  .report-meta { grid-template-columns: 1fr; }
  .report-evidence-grid { grid-template-columns: 1fr; }
}

@media print {
  .no-print, .toast-container, #messageArea { display: none !important; }
  .report-body { background: #fff; }
  .report-shell { padding: 0; max-width: none; }
  .report-document { border: none; padding: 0; }
}
.service-hours-summary {
  margin-bottom: 20px;
}

.service-hours-summary .summary-item span {
  display: block;
  color: var(--color-text);
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1;
}

/* ---- Admin Tableros: constructor ---- */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 16px;
}

.field-fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: 12px 16px;
  margin: 0;
}
.field-fieldset legend {
  padding: 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-muted);
}

.form-grid-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.measure-preview {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.measure-preview-result {
  background: var(--color-surface-muted);
  border-radius: var(--radius-md, 8px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.measure-preview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--color-muted);
  font-size: 0.8rem;
}
.measure-preview-scalar,
.measure-preview-series {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.measure-preview-scalar strong,
.measure-preview-series strong {
  color: var(--color-text);
  font-size: 1.75rem;
  font-variant-numeric: tabular-nums;
}
.measure-preview-scalar span,
.measure-preview-series span {
  color: var(--color-muted);
  font-size: 0.85rem;
}
.measure-preview-table {
  margin: 0;
}

.admin-dashboard-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  padding: 14px 16px;
}
.admin-dashboard-item-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-dashboard-item-title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}
.admin-dashboard-tiles {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tile-row { grid-template-columns: auto 1fr auto; }
.tile-row-copy { display: flex; flex-direction: column; gap: 2px; }
.tile-row-copy .stack-meta { display: flex; align-items: center; gap: 8px; }