/* La marca del proyecto: se carga después del CSS común (/static/base/css/main.css y ui.css) y
   cambia sus variables. Cada proyecto pone aquí sus colores; el logo va en /static/img/logo.svg.
   Guía: frontend/app/templates/ui/README.md (decisión 0016).

   También se pueden cambiar, dentro de :root:
     --font-body, --font-heading         las fuentes (archivo propio en /static/fonts/)
     --ui-confirm-bg, --ui-confirm-bg-hover, --ui-confirm-text, --ui-confirm-shadow,
     --ui-confirm-shadow-hover
                                         los botones que aceptan una confirmación
                                         (por omisión, el primario)
     --ui-delete-bg, --ui-delete-bg-hover, --ui-delete-text, --ui-delete-shadow
                                         borrar (por omisión, --color-danger)
   Por ejemplo, confirmaciones celestes con texto blanco que cumple el contraste AA (4,5:1):
     --ui-confirm-bg: #0369A1; --ui-confirm-bg-hover: #075985; --ui-confirm-text: #FFF;
     --ui-confirm-shadow: 0 1px 3px rgba(3, 105, 161, 0.25);
     --ui-confirm-shadow-hover: 0 2px 6px rgba(3, 105, 161, 0.3);
   Al cambiar un fondo, revisa el contraste del texto. */
:root {
  --color-primary: #1B3A5C;
  --color-primary-light: #EBF0F7;
  --color-primary-dark: #0F2440;
  --color-primary-hover: #264D73;
  --color-accent: #0EA5A0;
  --color-accent-light: #E6F7F7;
  --color-accent-hover: #0C8C88;
  /* Chips del Dashboard de cumplimiento (07 §11): el texto sobre su fondo cumple AA (4,5:1). */
  --sgo-on-time-bg: #ECFDF3;
  --sgo-on-time-text: #05603A;
  --sgo-overdue-bg: #FEF2F2;
  --sgo-overdue-text: #B42318;
  --sgo-closed-on-time-bg: #EBF0F7;
  --sgo-closed-on-time-text: #1B3A5C;
  --sgo-closed-overdue-bg: #FFEDD5;
  --sgo-closed-overdue-text: #9A3412;
  --sgo-no-due-bg: #F2F4F7;
  --sgo-no-due-text: #475467;
}

/* Componentes propios del SGO (templates/ui/). Es la única hoja del proyecto que carga el
   paquete, así que van aquí, con los tokens del CSS común. */

/* Encabezado que ordena la tabla en el servidor (ui/tables.html). */
.th-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover, .th-sort:focus-visible { color: var(--color-primary); text-decoration: underline; }
.th-sort .fa { margin-left: 4px; color: var(--color-text-muted); }
.th-sort[aria-sort="ascending"] .fa, .th-sort[aria-sort="descending"] .fa { color: var(--color-primary); }

/* Tarjeta de estado de Gestión Oficios: un enlace que filtra la grilla. */
.stat-card { display: block; color: inherit; text-decoration: none; padding: var(--space-md); }
.stat-card:hover, .stat-card:focus-visible { border-color: var(--color-primary); text-decoration: none; }
.stat-card--active { border-color: var(--color-primary); box-shadow: inset 0 -3px 0 var(--color-primary); }

/* Ficha del detalle: etiqueta y valor en dos columnas. */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-md); margin: 0; }
.facts dt { font-weight: 600; color: var(--color-text-secondary); }
.facts dd { margin: 0; }

/* Opciones en línea de Ingreso Manual (Ordinario / Reservado, No / Sí). */
fieldset.form-group { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.radio-group { display: flex; gap: var(--space-lg); padding-block: var(--space-xs); }
.radio-group input[type="radio"] { accent-color: var(--color-primary); width: 16px; height: 16px; }

/* Búsqueda Oficios: los doce estados en columnas. */
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-xs) var(--space-md); padding-block: var(--space-xs); }

/* Feriados: los 12 meses en calendarios chicos y, al lado, la lista del año. */
.holidays-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.mini-calendars { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-md); }
.mini-calendar { border-collapse: collapse; width: 100%; font-size: 0.8rem; text-align: center; }
.mini-calendar caption { font-weight: 600; padding-bottom: var(--space-xs); }
.mini-calendar th { color: var(--color-text-muted); font-weight: 600; }
.mini-calendar td, .mini-calendar th { padding: 2px; }
.mini-calendar-holiday { background: var(--color-danger); color: #FFF; border-radius: 50%; font-weight: 600; }
@media (max-width: 900px) { .holidays-layout { grid-template-columns: 1fr; } }

/* Modal ancho (ui/maintainers.html, form_dialog con wide=true). */
.modal-dialog--wide { width: min(1040px, calc(100% - 2 * var(--space-lg))); }

/* Plantillas de correo: el editor con las variables al lado y la vista previa aislada. */
.template-editor { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
.template-body { font-family: var(--font-mono, monospace); font-size: 0.85rem; }
.template-variables { max-height: 28rem; overflow-y: auto; font-size: 0.8rem; }
.template-variables dl { margin: 0; }
.template-variables dt { margin-top: var(--space-xs); }
.template-variables dd { margin: 0; color: var(--color-text-secondary); }
.template-preview { margin-top: var(--space-md); }
.mail-preview { width: 100%; min-height: 16rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #FFF; }
@media (max-width: 900px) { .template-editor { grid-template-columns: 1fr; } }

/* Dashboard de cumplimiento: cada conteo en un chip, con el número en texto. */
.count-chip { display: inline-block; min-width: 2.5rem; padding: 2px var(--space-sm); border-radius: 999px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.count-chip--on-time { background: var(--sgo-on-time-bg); color: var(--sgo-on-time-text); }
.count-chip--overdue { background: var(--sgo-overdue-bg); color: var(--sgo-overdue-text); }
.count-chip--closed-on-time { background: var(--sgo-closed-on-time-bg); color: var(--sgo-closed-on-time-text); }
.count-chip--closed-overdue { background: var(--sgo-closed-overdue-bg); color: var(--sgo-closed-overdue-text); }
.count-chip--no-due { background: var(--sgo-no-due-bg); color: var(--sgo-no-due-text); }
.table-total th, .table-total td { font-weight: 600; border-top: 2px solid var(--color-border); }