/* Utility classes used by the shell and dynamic templates to replace
   inline style="" attributes. Required for the CSP to drop
   'unsafe-inline' from style-src. */

/* visibility / layout */
.is-hidden { display: none !important; }
.flex-grow-1 { flex: 1; min-width: 0; }

/* typography */
.text-xxs { font-size: 10px; }
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-md { font-size: 13px; }
.text-lg { font-size: 20px; }
.text-muted { color: var(--text2); }
.text-muted-3 { color: var(--text3); }
.text-strong { font-weight: 500; }
.text-uppercase-xs {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.text-wrap-normal { white-space: normal; }

/* combined patterns */
.cell-muted-sm { font-size: 12px; color: var(--text2); }
.cell-muted-strong { color: var(--text2); font-weight: 500; }
.cell-note-xs { font-size: 11px; color: var(--text2); }
.cell-note-xs-strong { font-size: 11px; color: var(--text2); margin-top: 4px; }
.cell-note-xs-top { font-size: 11px; color: var(--text2); margin-top: 3px; }

/* card-style summary patterns */
.cc-stat-label {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cc-stat-label-capex { color: var(--capex); }
.cc-stat-label-opex { color: var(--opex); }
.cc-stat-label-red { color: var(--red); }
.cc-stat-label-teal { color: var(--teal); }
.cc-stat-value-big {
  font-size: 20px;
  font-weight: 600;
  font-family: var(--font-display);
}

/* form / filter sizing — el max-width móvil lo gobierna el media query de filters.css */
.field-search { flex: 1 1 200px; min-width: 200px; max-width: 240px; }
.field-search-wide { flex: 1 1 220px; min-width: 220px; max-width: 260px; }
.field-date { min-width: 150px; }

@media (max-width: 640px) {
  .field-search,
  .field-search-wide,
  .field-date { max-width: none; min-width: 0; flex: 0 0 auto; }
}

/* spacing helpers */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 24px; }
.ml-1 { margin-left: 6px; }

/* cc-label color variants */
.cc-label-green { color: var(--green); }
.cc-label-red { color: var(--red); }
.cc-label-amber { color: var(--warning); }
.cc-label-teal { color: var(--teal); }

/* table wraps */
.table-wrap-spaced { margin-bottom: 1rem; }

/* colgroup widths */
.col-w-90 { width: 90px; }
.col-w-110 { width: 110px; }
.col-w-120 { width: 120px; }
.col-w-130 { width: 130px; }
.col-w-140 { width: 140px; }
.col-w-180 { width: 180px; min-width: 180px; }
.col-w-190 { width: 190px; }

/* multiline justification cell */
.cell-iaact-justification {
  color: var(--text2);
  font-size: 12px;
  max-width: 320px;
}

/* iaact justification small */
.cell-iaact-justification-xs {
  font-size: 11px;
  color: var(--text2);
  white-space: normal;
}

/* info-row removes default bottom border */
.info-row-no-border { border-bottom: none; }

/* flex right alignment + spacing */
.flex-end-mt-3 {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* colgroup min-width */
.col-mw-180 { min-width: 180px; }

/* svg icon sizes */
.icon-13 { width: 13px; height: 13px; }
.icon-14 { width: 14px; height: 14px; }

/* dashboard variants */
.dashboard-grid-single { grid-template-columns: 1fr; }
.summary-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 640px) {
  .summary-grid-4 { grid-template-columns: 1fr; }
}

/* chart heights */
.chart-h-280 { height: 280px; }
.chart-h-300 { height: 300px; }

/* modal widths */
.modal-w-560 { max-width: 560px; }
.modal-w-640 { max-width: 640px; }
.modal-w-720 { max-width: 720px; }

/* empty state padding */
.empty-state-pad { padding: 32px 20px; }
.empty-state-row { grid-column: 1 / -1; }

/* detail edit description button */
.detail-edit-desc-compact { font-size: 12px; padding: 7px 14px; }

/* iaact / detail metric variants — bounded color sets driven by JS */
.iaact-card-variant-green {
  background: var(--green-soft);
  border: 1px solid color-mix(in srgb, var(--green) 20%, transparent);
}
.iaact-card-variant-amber {
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
}
.iaact-card-variant-red {
  background: var(--red-soft);
  border: 1px solid color-mix(in srgb, var(--red) 20%, transparent);
}
.iaact-card-variant-blue {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.iaact-level-26 { font-size: 26px; }
.iaact-level-24 { font-size: 24px; }
.iaact-level-color-green { color: var(--green); }
.iaact-level-color-amber { color: var(--warning); }
.iaact-level-color-red { color: var(--red); }
.iaact-level-color-blue { color: var(--accent); }
.iaact-level-color-teal { color: var(--teal); }

/* kpi % cell color buckets */
.kpi-pct-cell-muted { color: var(--text2); }
.kpi-pct-cell-green { color: var(--green); }
.kpi-pct-cell-amber { color: var(--warning); }
.kpi-pct-cell-red { color: var(--red); }

/* tables.js late real date variant */
.cell-date-late { color: var(--red); }
.cell-date-ontime { color: var(--text2); }

/* dynamic badges/progress driven by CSS custom properties.
   JS sets element.style.setProperty('--bd-color', ...) post-render. */
.badge-dynamic {
  background: color-mix(in srgb, var(--bd-color) 13%, transparent);
  color: color-mix(in srgb, var(--bd-color) 65%, var(--text));
  border: 1px solid color-mix(in srgb, var(--bd-color) 27%, transparent);
}

/* Cohesión de producto: superficies y controles comparten la misma curva.
   Conservamos 50% únicamente para avatares, indicadores y otros elementos
   cuyo significado sea explícitamente circular. */
body button,
body input:not([type="checkbox"]):not([type="radio"]),
body select,
body textarea,
body .badge,
body .card,
body .stat-card,
body .table-wrap,
body .filter-panel,
body .empty-icon,
body .data-quality-note,
body .phase-status-item,
body .modal-content,
body .user-dropdown,
body .theme-menu,
body .imp-filter-menu,
body .portia-panel {
  border-radius: var(--radius-sm);
}
.progress-fill-dynamic {
  width: var(--pf-width, 0%);
  background: var(--pf-color, var(--accent));
}

/* iaact-card variants by estadoVisual().cls */
.iaact-card.c-value  { background: var(--green-soft);  border: 1px solid color-mix(in srgb, var(--green) 20%, transparent); }
.iaact-card.c-warning  { background: var(--warning-soft);  border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent); }
.iaact-card.c-risk    { background: var(--red-soft);    border: 1px solid color-mix(in srgb, var(--red) 20%, transparent); }
.iaact-card.c-delivery   { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }

.iaact-card.c-compliance   { background: var(--teal-soft);   border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); }

.iaact-level.c-value { color: var(--green); }
.iaact-level.c-warning { color: var(--warning); }
.iaact-level.c-risk   { color: var(--red); }
.iaact-level.c-delivery  { color: var(--accent); }
.iaact-level.c-compliance  { color: var(--teal); }

/* Row-level flash applied tras un save correcto. Comunica "esta es la fila
   que acaba de cambiar" sin necesidad de un toast extra. Se aplica a una
   <tr> tras re-render; las celdas heredan el fondo por animación, no por
   transition, para no pisar el hover. */
@keyframes flashChanged {
  0%   { background: var(--accent-soft); }
  100% { background: transparent; }
}

.is-flash-changed > td {
  animation: flashChanged 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .is-flash-changed > td { animation: none; }
}

/* displayFechaFinReal binary variants */
.badge-real-late {
  background: var(--red-soft);
  color: var(--red);
  border: 1px solid currentColor;
}
.badge-real-ontime {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid currentColor;
}