/*
 * Identidad visual del Programa Integrado Bosques de Mesoamerica.
 * Colores y tipografia extraidos del template oficial de PowerPoint
 * (Conferencia Regional). Redefine variables de Bootstrap para que
 * botones, links, tablas y cards hereden el look de marca sin tocar
 * cada template individualmente.
 */
:root {
  /* Paleta de marca (frecuencia de uso real en el template oficial) */
  --brand-green: #00554B;       /* verde bosque - color primario */
  --brand-green-dark: #003D36;  /* hover/active del verde primario */
  --brand-green-mid: #1A6C37;   /* verde secundario */
  --brand-teal: #39AA87;        /* acento - iconografia */
  --brand-blue: #3BACE1;        /* acento - iconografia */
  --brand-amber: #FFBC21;       /* acento calido - CTAs, destacados */
  --brand-terracotta: #DA786D;  /* acento calido secundario */
  --brand-cream: #F6F9EE;       /* fondo claro de marca */
  --brand-ink: #181816;         /* texto oscuro de marca */
  --brand-orange: #E4572E;        /* mismo tono del rollover del menu principal */
  --brand-orange-dark: #C24A27;   /* variante un poco mas oscura, para botones */

  --bs-font-sans-serif: 'Josefin Sans', system-ui, sans-serif;
  --bs-body-bg: var(--brand-cream);
  --bs-body-color: var(--brand-ink);
  --bs-border-color: rgba(24, 24, 22, 0.16);

  --bs-primary: var(--brand-green);
  --bs-primary-rgb: 0, 85, 75;
  --bs-link-color: var(--brand-green);
  --bs-link-hover-color: var(--brand-green-dark);
}

h1, h2, h3, h4, h5, h6, .btn, .navbar-brand, .card-header {
  font-family: 'Dosis', system-ui, sans-serif;
  font-weight: 600;
}

/* Boton de accion por defecto de toda la plataforma: el mismo verde
   oscuro del footer (--brand-green, fondo de "Desarrollado por
   Geolatina...") solido con texto blanco en reposo, invertido a blanco
   con texto verde en hover/active (en vez de solo oscurecer el mismo
   color), para que el rollover sea bien evidente. Se probaron antes
   azul (--brand-blue) y anaranjado (--brand-orange-dark); si hay que
   volver a probar otro, este es el unico bloque a tocar. */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--brand-green);
  --bs-btn-border-color: var(--brand-green);
  --bs-btn-hover-color: var(--brand-green);
  --bs-btn-hover-bg: #ffffff;
  --bs-btn-hover-border-color: var(--brand-green);
  --bs-btn-active-color: var(--brand-green);
  --bs-btn-active-bg: #ffffff;
  --bs-btn-active-border-color: var(--brand-green);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--brand-green);
  --bs-btn-disabled-border-color: var(--brand-green);
}

a {
  color: var(--bs-link-color);
}

/* Banner superior "boxed": el fondo blanco y el filete ambar viven en
   el .container interno (mismo ancho que <main class="container">),
   no en el <nav> completo, para que el header quede acotado al ancho
   del contenido y se vea el verde-crema de la pagina a los costados. */
.site-header {
  background-color: transparent;
}
.site-header .container {
  background-color: #ffffff;
  border-bottom: 3px solid var(--brand-amber);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.site-header .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
.site-header .navbar-brand img {
  height: 28px;
  width: auto;
}
.site-header .navbar-brand {
  /* align-items:stretch (en vez de start) para que el subtitulo ocupe
     el mismo ancho que el logo (el hijo mas ancho de esta columna) y
     su texto, alineado a la derecha, quede a ras del borde derecho de
     la ultima "A" de MESOAMERICA en vez de colgar del margen izquierdo. */
  align-items: stretch !important;
}
.site-header .brand-subtitle {
  margin-top: 0.15rem;
  font-size: 1.2rem; /* x1.5 del tamano anterior (0.8rem) */
  font-weight: 600;
  color: var(--brand-ink);
  text-align: right;
}
@media (max-width: 575.98px) {
  /* El logo completo del programa es muy ancho (proporcion ~14:1) para
     convivir con el boton hamburguesa en un telefono; en movil se
     achica mas y se oculta "Sistema MEL/POA" para que no se corte. */
  .site-header .navbar-brand img {
    height: 20px;
  }
  .site-header .brand-subtitle {
    display: none;
  }
}
.site-header .nav-link {
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  /* "Cerrar sesion" es un <button class="btn btn-link nav-link">, no un
     <a class="nav-link">: .btn y .nav-link traen paddings/bordes por
     default distintos entre si, asi que aunque ambos terminen con el
     mismo borde inferior (align-items:end), el texto de cada uno queda
     a una altura distinta dentro de su propia caja. Fijar padding y
     border explicitos ataca la causa, no el sintoma. */
  padding: 0.5rem 0.9rem;
  border: none;
  background-color: transparent;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--brand-orange);
}
.site-header .nav-link.active {
  color: var(--brand-green);
}
.site-header .navbar-toggler {
  border-color: var(--brand-green);
}

/* El logo+subtitulo y el bloque de usuario (bandera+nombre/rol/org) son
   de dos y tres lineas respectivamente; el menu de links es de una sola
   linea. Alineando todo por ABAJO, el borde inferior de "Sistema MEL",
   el menu y el bloque de usuario quedan sobre una misma linea comun,
   con el logo y el nombre de usuario "colgando" hacia arriba de ella. */
.site-header .container,
.site-header .navbar-nav {
  align-items: flex-end;
}
.site-header .navbar-nav.me-auto {
  column-gap: 0.5rem;
}
.site-header .nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.site-header .nav-link i {
  font-size: 0.85em;
}

/* Menu centrado como bloque: a partir del breakpoint en que el menu
   deja de colapsarse (navbar-expand-xxl = 1400px), el contenedor pasa
   a grid de 3 columnas -- logo | menu | usuario -- con las columnas
   de los costados del mismo ancho (1fr), para que la columna central
   quede centrada en el header en vez de pegada al logo. #navbarNav
   solo envuelve los dos <ul> para el colapso movil; con "display:
   contents" desaparece como caja y sus hijos (los <ul>) pasan a ser
   items directos del grid, sin alterar el toggle en pantallas chicas. */
@media (min-width: 1400px) {
  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 1rem;
  }
  .site-header .navbar-brand {
    grid-column: 1;
    justify-self: start;
  }
  .site-header #navbarNav {
    display: contents !important;
  }
  .site-header .navbar-nav.me-auto {
    grid-column: 2;
    justify-self: center;
  }
  .site-header .navbar-nav.ms-auto {
    grid-column: 3;
    justify-self: end;
  }
}

/* Layout general: el footer de marca queda siempre al fondo de la
   ventana (sticky footer via flexbox), incluso en paginas con poco
   contenido, sin necesidad de position:fixed que taparia tablas. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}
body > main {
  flex: 1 0 auto;
}

/* Footer de marca "boxed", igual criterio que el header: el fondo
   blanco de los logos y el fondo verde del credito viven en el
   .container interno (mismo ancho que el contenido), no en la franja
   completa, para que "Financiado por" arranque justo en el mismo
   margen izquierdo que los paneles/tablas de arriba. */
.site-footer {
  flex-shrink: 0;
  margin-top: 2rem;
}
.site-footer__logos .container {
  background-color: #ffffff;
  border-top: 1px solid rgba(24, 24, 22, 0.1);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.funder-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
.funder-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.funder-label {
  font-family: 'Dosis', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--brand-green);
  white-space: nowrap;
}
.funder-item img {
  height: 26px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.site-footer__credit .container {
  background-color: var(--brand-green);
  color: var(--brand-amber);
  text-align: center;
  font-size: 0.75rem;
  padding: 0.4rem 1rem;
  letter-spacing: 0.02em;
}

/* Componentes "activos" (cards, tablas, inputs, dropdowns) deben verse
   blancos sobre el fondo verde-crema de la pagina, no fundirse con el.
   Bootstrap 5.3 hace que varios de estos hereden --bs-body-bg por
   default, que ahora es el crema de marca; se lo pisamos puntualmente. */
.card,
.table,
.dropdown-menu,
.modal-content,
.list-group-item {
  --bs-card-bg: #ffffff;
  --bs-table-bg: #ffffff;
  --bs-dropdown-bg: #ffffff;
  --bs-modal-bg: #ffffff;
  --bs-list-group-bg: #ffffff;
  background-color: #ffffff;
}
.form-control,
.form-select {
  background-color: #ffffff;
}
.table-responsive {
  background-color: #ffffff;
}

/* Panel de detalle del informe trimestral: formulario para adjuntar
   evidencia, en el mismo azul palido del badge "Azul" del semaforo, para
   que se lea como una extension natural de haber elegido ese color. */
.evidence-upload-box {
  background-color: #e3edf7;
  border-radius: 0.25rem;
  padding: 0.75rem;
}
.evidence-upload-box .form-select,
.evidence-upload-box .form-control {
  background-color: #ffffff;
}

/* Enlaces a archivos/URLs de evidencia ya adjuntada: mismo verde de link
   del resto del sitio, con el mismo anaranjado de rollover que usan los
   demas textos interactivos (ver .site-header .nav-link:hover). */
.evidence-link {
  text-decoration: none;
}
.evidence-link:hover {
  color: var(--brand-orange);
}

/* Detalle de informe trimestral: el rango de meses del periodo, en
   letra un poco mas chica que el resto del titulo "Informe 2026
   Trimestre 1 (enero-marzo)". */
.period-months {
  font-size: 0.75em;
  font-weight: 400;
  color: var(--brand-ink);
  opacity: 0.75;
}

/* Caja de acciones (Editar/Guardar/Cancelar) del panel de detalle del
   informe trimestral: recuadro blanco con borde gris fino, botones
   centrados en ambos ejes, junto al titulo (que se angosta con
   flex-grow para dejarle espacio en la misma fila). */
.detail-panel-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: #ffffff;
  border: 1px solid rgba(24, 24, 22, 0.15);
  border-radius: 0.25rem;
  padding: 0.5rem 0.75rem;
}

/* Rollover amarillo en la tabla maestro-detalle del informe trimestral
   (vista TECHNICAL_USER): sugiere que la fila es "clickeable" para
   abrir el panel de detalle debajo. Se pisa aca --bs-table-hover-bg en
   vez de tocar .table-hover global, para no afectar otras tablas del
   sitio que no tienen esa interaccion de click. */
.table-hover-amber {
  --bs-table-hover-bg: #fff3b0;
}