/* =====================================================================
   Sistema de diseño: Material Design 3 (Google) aplicado sobre la base de
   Bootstrap 5. Se implementa el lenguaje visual M3 completo — roles de
   color con esquema claro y oscuro, escala tipográfica, elevación por
   tono de superficie, capas de estado (hover/focus/pressed) e iconografía
   Material Symbols oficial — vía CSS, en vez de la librería de
   componentes Web Components de Google (Material Web).

   Por qué CSS y no Material Web Components: esta aplicación es PHP
   renderizado en servidor con formularios HTML nativos (POST simple, sin
   JavaScript de por medio) en ~30 páginas ya construidas. Los componentes
   <md-outlined-text-field>, <md-filled-button>, etc. son Web Components
   que no participan de un <form> nativo de la misma manera y hubieran
   obligado a reescribir cada formulario con JS adicional solo para que
   los valores lleguen al POST. Implementar la especificación M3 (que es
   un lenguaje de diseño, no una librería obligatoria) directamente en CSS
   logra la misma fidelidad visual sin ese riesgo.

   Paleta: primario = verde institucional CATIE, secundario = verde salvia
   apagado, terciario = ámbar. Cuando se defina la paleta exacta del logo,
   solo hay que ajustar los valores hexadecimales de este archivo — el
   resto del CSS y de las páginas PHP consumen los tokens, nunca colores
   sueltos.
   ===================================================================== */

:root {
  /* ---- Roles de color M3 (esquema claro) ---- */
  --md-primary: #2E6B4A;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #B0F1C2;
  --md-on-primary-container: #00210E;

  --md-secondary: #52634F;
  --md-on-secondary: #FFFFFF;
  --md-secondary-container: #D5E8CF;
  --md-on-secondary-container: #101F0F;

  --md-tertiary: #8A5300;
  --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFDDB3;
  --md-on-tertiary-container: #2C1600;

  --md-error: #BA1A1A;
  --md-on-error: #FFFFFF;
  --md-error-container: #FFDAD6;
  --md-on-error-container: #410002;

  --md-surface: #FBFDF8;
  --md-surface-dim: #DBE4DC;
  --md-surface-bright: #FBFDF8;
  --md-surface-container-lowest: #FFFFFF;
  --md-surface-container-low: #F3F5EF;
  --md-surface-container: #EDF0E8;
  --md-surface-container-high: #E7EAE2;
  --md-surface-container-highest: #E1E4DC;
  --md-on-surface: #1A1C19;
  --md-surface-variant: #DEE5DA;
  --md-on-surface-variant: #424940;
  --md-outline: #72796F;
  --md-outline-variant: #C2C9BE;
  --md-background: var(--md-surface);
  --md-on-background: var(--md-on-surface);

  /* Barra superior: se mantiene siempre verde institucional oscuro con texto
     blanco en ambos temas (no se re-tonaliza como --md-primary, que en oscuro
     se vuelve claro para servir de texto/ícono sobre superficies oscuras —
     usarlo como fondo de una barra grande la volvería una barra clara en
     medio de una página oscura). */
  --md-app-bar-bg: #2E6B4A;
  --md-app-bar-fg: #FFFFFF;

  /* Bootstrap define sus propios componentes con estas variables internas;
     remapearlas acá evita tener que igualar la especificidad de cada
     selector de Bootstrap (ej. las celdas de tabla) uno por uno. */
  --bs-body-color: var(--md-on-surface);
  --bs-body-bg: var(--md-background);
  --bs-emphasis-color: var(--md-on-surface);
  --bs-secondary-color: var(--md-on-surface-variant);
  --bs-tertiary-color: var(--md-on-surface-variant);
  --bs-heading-color: var(--md-on-surface);
  --bs-link-color: var(--md-primary);
  --bs-link-hover-color: var(--md-primary);
  --bs-border-color: var(--md-outline-variant);
  --bs-border-color-translucent: var(--md-outline-variant);
  --bs-secondary-bg: var(--md-surface-variant);
  --bs-tertiary-bg: var(--md-surface-container);

  /* opacidades estándar de "state layer" M3: hover 8%, focus/drag 12%, pressed 12% */
  --md-state-hover: 0.08;
  --md-state-focus: 0.12;
  --md-state-pressed: 0.12;

  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-pill: 999px;

  /* elevación: sombras M3 (mucho más sutiles que M2) — el tono de superficie
     (surface-container-*) hace la mayor parte del trabajo de "elevar" */
  --md-elevation-1: 0 1px 2px rgba(0,0,0,0.10), 0 1px 3px 1px rgba(0,0,0,0.08);
  --md-elevation-2: 0 1px 2px rgba(0,0,0,0.12), 0 2px 6px 2px rgba(0,0,0,0.10);
  --md-elevation-3: 0 1px 3px rgba(0,0,0,0.14), 0 4px 8px 3px rgba(0,0,0,0.10);
  --md-elevation-4: 0 2px 3px rgba(0,0,0,0.16), 0 6px 10px 4px rgba(0,0,0,0.10);

  /* Alias retrocompatibles: varias páginas PHP usan estos nombres directo
     (ej. style="background-color: var(--catie-verde)"). */
  --catie-verde: var(--md-primary);
  --catie-verde-claro: var(--md-secondary);
  --catie-ambar: var(--md-tertiary);
  --catie-rojo: var(--md-error);
}

/* ---- Esquema oscuro: automático por preferencia del sistema, o forzado
   con data-theme (botón de la barra superior, persistido en localStorage) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --md-scheme-is-dark: 1; }
}
:root[data-theme="dark"] { --md-scheme-is-dark: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #94D5A8; --md-on-primary: #00391A; --md-primary-container: #0E5233; --md-on-primary-container: #B0F1C2;
    --md-secondary: #BACCB5; --md-on-secondary: #253423; --md-secondary-container: #3B4B38; --md-on-secondary-container: #D5E8CF;
    --md-tertiary: #FFB959; --md-on-tertiary: #4A2900; --md-tertiary-container: #6B3D00; --md-on-tertiary-container: #FFDDB3;
    --md-error: #FFB4AB; --md-on-error: #690005; --md-error-container: #93000A; --md-on-error-container: #FFDAD6;
    --md-surface: #12140F; --md-surface-dim: #12140F; --md-surface-bright: #383A34;
    --md-surface-container-lowest: #0C0E09; --md-surface-container-low: #1A1C18;
    --md-surface-container: #1E211C; --md-surface-container-high: #282B25; --md-surface-container-highest: #33362F;
    --md-on-surface: #E2E3DC; --md-surface-variant: #424940; --md-on-surface-variant: #C2C9BE;
    --md-outline: #8C9388; --md-outline-variant: #424940;
  }
}
:root[data-theme="dark"] {
  --md-primary: #94D5A8; --md-on-primary: #00391A; --md-primary-container: #0E5233; --md-on-primary-container: #B0F1C2;
  --md-secondary: #BACCB5; --md-on-secondary: #253423; --md-secondary-container: #3B4B38; --md-on-secondary-container: #D5E8CF;
  --md-tertiary: #FFB959; --md-on-tertiary: #4A2900; --md-tertiary-container: #6B3D00; --md-on-tertiary-container: #FFDDB3;
  --md-error: #FFB4AB; --md-on-error: #690005; --md-error-container: #93000A; --md-on-error-container: #FFDAD6;
  --md-surface: #12140F; --md-surface-dim: #12140F; --md-surface-bright: #383A34;
  --md-surface-container-lowest: #0C0E09; --md-surface-container-low: #1A1C18;
  --md-surface-container: #1E211C; --md-surface-container-high: #282B25; --md-surface-container-highest: #33362F;
  --md-on-surface: #E2E3DC; --md-surface-variant: #424940; --md-on-surface-variant: #C2C9BE;
  --md-outline: #8C9388; --md-outline-variant: #424940;
}

/* --- Tipografía (escala M3, aplicada a los encabezados de Bootstrap ya
   usados en las páginas sin tener que tocar cada archivo) --------------- */
body {
  background-color: var(--md-background);
  color: var(--md-on-surface);
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  transition: background-color 150ms ease, color 150ms ease;
}

h1, .h1 { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; }
h2, .h2 { font-size: 1.375rem; font-weight: 500; }
h3, .h3 { font-size: 1.125rem; font-weight: 500; }
h4, .h4 { font-size: 1.0625rem; font-weight: 500; }
h5, .h5, h6, .h6 { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Roboto', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--md-on-surface);
}

a { color: var(--md-primary); }

/* Iconos Material Symbols (ver icono() en helpers.php) */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 1.125em;
  vertical-align: -0.22em;
  line-height: 1;
  user-select: none;
}
.md-icon { margin-right: 0.3em; }
.md-icon-solo { margin-right: 0; }

/* --- Botón de alternancia de tema -------------------------------------- */
.md-boton-tema {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.92);
  border-radius: var(--md-radius-pill);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.md-boton-tema .material-symbols-outlined { margin: 0; font-size: 1.35rem; vertical-align: middle; }
.md-boton-tema:hover::before { opacity: var(--md-state-hover); }
.md-boton-tema::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-color: #fff; opacity: 0; transition: opacity 100ms ease;
}
[data-theme="dark"] .md-boton-tema .icono-oscuro,
:root:not([data-theme="light"]) .md-boton-tema .icono-oscuro { display: none; }
[data-theme="dark"] .md-boton-tema .icono-claro,
:root:not([data-theme="light"]) .md-boton-tema .icono-claro { display: inline; }
.md-boton-tema .icono-claro { display: none; }
@media not all and (prefers-color-scheme: dark) {
  :root[data-theme="light"] .md-boton-tema .icono-claro,
  :root:not([data-theme]) .md-boton-tema .icono-claro { display: none; }
  :root[data-theme="light"] .md-boton-tema .icono-oscuro,
  :root:not([data-theme]) .md-boton-tema .icono-oscuro { display: inline; }
}

/* --- Barra superior (Material Top App Bar) ------------------------------ */
.navbar-catie {
  background-color: var(--md-app-bar-bg);
  box-shadow: var(--md-elevation-2);
}

.navbar-catie .navbar-brand,
.navbar-catie .nav-link {
  color: var(--md-app-bar-fg) !important;
  font-weight: 500;
  border-radius: var(--md-radius-sm);
  position: relative;
}

.navbar-catie .nav-link::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-color: currentColor; opacity: 0; transition: opacity 100ms ease;
}
.navbar-catie .nav-link:hover::before { opacity: var(--md-state-hover); }

.navbar-catie .nav-link.active {
  font-weight: 700;
  background-color: rgba(255,255,255,0.18);
}

/* --- Superficies elevadas: tarjetas, paneles (elevación por tono, M3) --- */
.card,
.tarjeta-kpi,
.filtros-globales {
  border: none;
  border-radius: var(--md-radius-md);
  box-shadow: var(--md-elevation-1);
  background-color: var(--md-surface-container-low);
  color: var(--md-on-surface);
}

.card { transition: box-shadow 150ms ease, background-color 150ms ease; }

.tarjeta-kpi .valor {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--md-primary);
  letter-spacing: -0.01em;
}

/* --- Botones (Material "filled" / "outlined" / "text") con capa de estado */
.btn {
  border-radius: var(--md-radius-pill);
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.25rem;
  border: none;
  position: relative;
  overflow: hidden;
  transition: box-shadow 150ms ease, background-color 150ms ease, transform 80ms ease;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background-color: currentColor; opacity: 0; transition: opacity 100ms ease; pointer-events: none;
}
.btn:hover::before { opacity: var(--md-state-hover); }
.btn:focus-visible::before { opacity: var(--md-state-focus); }

.btn-sm { padding: 0.35rem 0.9rem; border-radius: var(--md-radius-pill); }

.btn:not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-link) {
  box-shadow: var(--md-elevation-1);
}
.btn:not(.btn-link):hover { box-shadow: var(--md-elevation-2); }
.btn:active { transform: scale(0.98); }

.btn-outline-secondary {
  border: 1px solid var(--md-outline);
  color: var(--md-on-surface-variant);
  background: transparent;
}
.btn-outline-secondary:hover { color: var(--md-on-surface); }

.btn-link { color: var(--md-primary); text-decoration: none; font-weight: 500; box-shadow: none !important; }
.btn-link:hover { text-decoration: underline; }

/* --- Campos de formulario (Material "filled" text field, simplificado) - */
.form-control,
.form-select {
  background-color: var(--md-surface-variant);
  border: none;
  border-bottom: 2px solid var(--md-outline);
  border-radius: var(--md-radius-sm) var(--md-radius-sm) 0 0;
  color: var(--md-on-surface);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.form-control:focus, .form-select:focus {
  background-color: var(--md-surface-variant);
  border-bottom-color: var(--md-primary);
  box-shadow: none;
  outline: none;
  color: var(--md-on-surface);
}
.form-control.is-invalid, .form-select.is-invalid { border-bottom-color: var(--md-error); }
.form-control::placeholder { color: var(--md-on-surface-variant); opacity: 0.7; }

.form-label {
  font-weight: 500;
  color: var(--md-on-surface-variant);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }

table .form-control, table .form-select {
  background-color: transparent;
  border-bottom: 1px solid var(--md-outline-variant);
  border-radius: 0;
  color: var(--md-on-surface);
}
table .form-control:focus, table .form-select:focus { background-color: var(--md-primary-container); }

/* --- Tablas (Material data table) --------------------------------------- */
.table {
  /* Bootstrap resuelve el color de cada celda con esta cadena de variables
     (color:var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color))));
     hay que redeclararlas en el propio .table (no alcanza con :root) porque
     Bootstrap también las declara ahí y gana por estar en el mismo elemento. */
  --bs-table-color: var(--md-on-surface);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--md-outline-variant);
  --bs-table-striped-color: var(--md-on-surface);
  --bs-table-striped-bg: var(--md-surface-container-low);
  --bs-table-active-color: var(--md-on-surface);
  --bs-table-active-bg: var(--md-surface-variant);
  --bs-table-hover-color: var(--md-on-surface);
  --bs-table-hover-bg: var(--md-surface-variant);
  color: var(--md-on-surface);
}

.table thead th {
  border-bottom: 1px solid var(--md-outline-variant);
  color: var(--md-on-surface-variant);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: var(--md-surface-container-low);
}

.table td, .table th {
  border-bottom: 1px solid var(--md-outline-variant);
  border-top: none;
  vertical-align: middle;
  color: var(--md-on-surface);
}

.table-hover tbody tr { transition: background-color 100ms ease; }
.table-hover tbody tr:hover { background-color: var(--md-surface-variant); }

table.tabla-of th {
  white-space: nowrap; position: sticky; top: 0;
  background: var(--md-surface-container-low); z-index: 1;
}

/* --- Chips (badges Material) --------------------------------------------- */
.badge { border-radius: var(--md-radius-pill); font-weight: 500; padding: 0.35em 0.75em; letter-spacing: 0.02em; }

.badge-semaforo-success { background-color: var(--md-primary) !important; color: var(--md-on-primary) !important; }
.badge-semaforo-warning { background-color: var(--md-tertiary-container) !important; color: var(--md-on-tertiary-container) !important; }
.badge-semaforo-danger { background-color: var(--md-error) !important; color: var(--md-on-error) !important; }

/* --- Alertas (Material banners) ------------------------------------------ */
.alert { border: none; border-radius: var(--md-radius-md); border-left: 4px solid transparent; }
.alert-success { background-color: var(--md-primary-container); color: var(--md-on-primary-container); border-left-color: var(--md-primary); }
.alert-danger  { background-color: var(--md-error-container); color: var(--md-on-error-container); border-left-color: var(--md-error); }
.alert-warning { background-color: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-left-color: var(--md-tertiary); }
.alert-info    { background-color: var(--md-secondary-container); color: var(--md-on-secondary-container); border-left-color: var(--md-secondary); }
.alert-light   { background-color: var(--md-surface-variant); color: var(--md-on-surface-variant); border-left-color: var(--md-outline); }

/* --- Navegación por pestañas (dashboards) -------------------------------- */
.nav-pills .nav-link {
  border-radius: var(--md-radius-pill);
  color: var(--md-on-surface-variant);
  font-weight: 500;
  padding: 0.4rem 1rem;
  position: relative;
}
.nav-pills .nav-link::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-color: var(--md-on-surface-variant); opacity: 0; transition: opacity 100ms ease;
}
.nav-pills .nav-link:not(.active):hover::before { opacity: var(--md-state-hover); }
.nav-pills .nav-link.active { color: var(--md-on-primary); background-color: var(--md-primary); box-shadow: var(--md-elevation-1); }

/* --- Paginación ------------------------------------------------------- */
.pagination .page-link { border: none; color: var(--md-on-surface-variant); border-radius: var(--md-radius-sm); margin: 0 2px; background-color: transparent; }
.pagination .page-item.active .page-link { background-color: var(--md-primary); color: var(--md-on-primary); }

/* --- Wizard tipo Typeform ------------------------------------------------ */
.wizard-progreso { height: 6px; border-radius: var(--md-radius-pill); overflow: hidden; background-color: var(--md-surface-variant); }
.wizard-pregunta { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; }
.wizard-pregunta h2 { font-size: 1.4rem; font-weight: 500; color: var(--md-primary); }

/* --- Edición inline en tablas -------------------------------------------- */
.fila-editable[contenteditable="true"] {
  background-color: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
  border-radius: var(--md-radius-sm);
  padding: 2px 6px;
  cursor: text;
}

/* --- Logos de donantes: tamaño fijo, fondo blanco propio (la mayoría de
   los logos oficiales están pensados para fondo claro, así que se les da
   una chapita blanca siempre, incluso en tema oscuro) ------------------- */
.logo-donante-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-sm);
  padding: 3px 7px;
  height: 30px;
  box-sizing: border-box;
  vertical-align: middle;
}
.logo-donante-chip img {
  max-height: 100%;
  max-width: 72px;
  width: auto;
  object-fit: contain;
  display: block;
}
.logo-donante-chip-lg { height: 44px; padding: 5px 10px; }
.logo-donante-chip-lg img { max-width: 120px; }

/* --- Utilidades ------------------------------------------------------- */
.text-muted { color: var(--md-on-surface-variant) !important; }
.bg-white { background-color: var(--md-surface-container-low) !important; }
.bg-light { background-color: var(--md-surface-variant) !important; color: var(--md-on-surface); }
.text-dark { color: var(--md-on-surface) !important; }
.border { border-color: var(--md-outline-variant) !important; }

::selection { background-color: var(--md-primary-container); color: var(--md-on-primary-container); }

@media (max-width: 576px) {
  .tarjeta-kpi .valor { font-size: 1.3rem; }
}