/* ============================================================
   ESTILOS GLOBALES — Análisis Exploratorio de Datos y Visualización
   Referenciado desde index.Rmd mediante: css: estilos.css
   ============================================================ */

/* --- Tamaños de fuente ---------------------------------------- */
h1.title { font-size: 24px; }
h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
body { font-size: 14px; }
p { font-size: 14px; margin-bottom: 10px; }

/* ============================================================
   BLOQUES DE COLOR PARA RESALTAR CONTENIDO
   Uso:  <div class="metodo"> ... </div>
   Tipos disponibles: metodo | discusion | resultado | nota
   ============================================================ */

/* Azul — técnicas, metodología, procedimientos, sintaxis */
.metodo {
  background-color: #eef4fb;
  border-left: 5px solid #2971b0;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.metodo strong.bloque-titulo::before { content: "⚙️ "; }
.metodo strong.bloque-titulo {
  display: block;
  color: #1a4f7a;
  margin-bottom: 6px;
  font-size: 15px;
}

/* Naranja — discusión, reflexión crítica, interpretación */
.discusion {
  background-color: #fff8f0;
  border-left: 5px solid #d4720a;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.discusion strong.bloque-titulo::before { content: "💬 "; }
.discusion strong.bloque-titulo {
  display: block;
  color: #8a4800;
  margin-bottom: 6px;
  font-size: 15px;
}

/* Verde — resultados destacados, hallazgos clave */
.resultado {
  background-color: #f0faf3;
  border-left: 5px solid #2a8c4a;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.resultado strong.bloque-titulo::before { content: "✅ "; }
.resultado strong.bloque-titulo {
  display: block;
  color: #1a5c30;
  margin-bottom: 6px;
  font-size: 15px;
}

/* ============================================================
   TABLAS ANCHAS CON SCROLL HORIZONTAL
   Uso:  <div class="tabla-scroll"> (chunk con salida ancha) </div>
   Evita que salidas con muchas columnas (p. ej. skim()) se
   corten por el borde derecho de la página.
   ============================================================ */
.tabla-scroll { overflow-x: auto; }
.tabla-scroll table {
  width: auto;       /* la tabla crece según su contenido... */
  min-width: 100%;   /* ...sin quedar más estrecha que la página */
}
.tabla-scroll table td,
.tabla-scroll table th {
  white-space: nowrap; /* las celdas no parten números ni mini-histogramas */
}

/* Todas las cajas con scroll llevan la misma separación por debajo, para que
   no queden pegadas al texto que viene después */
.tabla-scroll, .caja-scroll, .tabla-scroll-xy { margin-bottom: 28px; }

/* ============================================================
   TEXTOS Y LISTADOS LARGOS CON SCROLL VERTICAL
   Uso:  <div class="caja-scroll"> (chunk con salida larga) </div>
   Acota la altura de un texto largo (p. ej. la descripción de un
   dataset, o el listado de fechas de una serie semanal/diaria) y
   lo recorre con scroll vertical, en vez de ocupar páginas enteras.
   ============================================================ */
.caja-scroll {
  max-height: 250px;
  overflow-y: auto;
  padding: 10px 14px;
  border: 1px solid #ddd;
  background-color: #fafafa;
}

/* ============================================================
   SALIDAS DE imprime_caja(): CABECERA + 5 FILAS
   Uso:  <div class="caja-scroll caja-5"> ... </div>
   Modificador de caja-scroll para la salida impresa de cada columna
   (valores y nº de observaciones): deja a la vista la cabecera y 5
   filas, y el resto se recorre con el scroll.
   ============================================================ */
.caja-scroll.caja-5 { max-height: 152px; }
/* ============================================================
   TABLAS ANCHAS Y LARGAS: SCROLL EN LOS DOS EJES
   Uso:  <div class="tabla-scroll-xy"> (chunk con tabla ancha y larga) </div>
   Para tablas con muchas filas Y columnas (p. ej. una fila por
   combinación de atributos de un dataset). La cabecera queda fija
   arriba mientras se recorre la tabla.
   ============================================================ */
/* max-height: cabecera + 5 filas a la vista; el resto se recorre con el scroll */
.tabla-scroll-xy { overflow: auto; max-height: 190px; border: 1px solid #ddd; }
.tabla-scroll-xy table { width: auto; min-width: 100%; margin-bottom: 0; }
.tabla-scroll-xy table td, .tabla-scroll-xy table th { white-space: nowrap; }
.tabla-scroll-xy thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
  box-shadow: inset 0 -1px 0 #ddd;
}

/* ============================================================
   ÚLTIMA COLUMNA DE TEXTO LARGO
   Uso:  <div class="tabla-scroll-xy con-desc"> ... </div>
         <div class="tabla-scroll con-desc"> ... </div>
   Modificador que se AÑADE a tabla-scroll o tabla-scroll-xy cuando
   la última columna es una descripción larga (p. ej. el significado
   de cada variable climática o de cada sector de EDGAR): la deja
   repartir en varias líneas en vez de forzarla a una sola, que haría
   la tabla desmesuradamente ancha. Va en clase aparte para no
   ensanchar las tablas cuya última columna es un número.
   ============================================================ */
.tabla-scroll-xy.con-desc table td:last-child,
.tabla-scroll.con-desc table td:last-child {
  white-space: normal;
  min-width: 420px;
}

/* ============================================================
   CELDAS DE CUMPLE / NO CUMPLE
   Uso: dentro de una tabla, p. ej. con
        marca <- function(x) ifelse(x, '<span class="val-ok">&#10004;</span>',
                                        '<span class="val-no">&#10008;</span>')
   y knitr::kable(escape = FALSE) para que se interprete como HTML.
   ============================================================ */
.val-ok, .val-no {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #fff;
  padding: 0 6px;
  border-radius: 3px;
}
.val-ok { background-color: #28a745; }
.val-no { background-color: #dc3545; }

/* Gris — notas aclaratorias, avisos, observaciones */
.nota {
  background-color: #f5f5f5;
  border-left: 5px solid #888888;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.nota strong.bloque-titulo::before { content: "📝 "; }
.nota strong.bloque-titulo {
  display: block;
  color: #444444;
  margin-bottom: 6px;
  font-size: 15px;
}