/* ibarra.eu — hoja de estilos única. Sin frameworks, sin dependencias.
   Escrita mobile-first: las media queries van hacia arriba (min-width).

   El diseño definitivo está sin cerrar; esto monta la estructura de tres
   columnas (secciones · contenido · seguimiento) sobre la que crecerá el
   diario de entrenamiento. */

:root {
  /* --- Color, tomado del logo --- */
  --cian: #00ABFF;
  --magenta: #FE01E6;
  --enlace: #0077b3;          /* el cian oscurecido: sobre blanco el original
                                 solo da 2,4:1 y no vale para texto */
  --enlace-hover: #005a87;

  /* --- Neutros --- */
  --tinta: #1a1c20;
  --tinta-suave: #5c6067;
  --fondo: #ffffff;
  --fondo-suave: #f6f7f9;     /* fondo de las columnas laterales */
  --borde: #e4e6ea;

  /* Pie oscuro: el logo de 64bits.es lleva texto en blanco y necesita
     fondo oscuro detrás para leerse. */
  --grafito: #24262b;
  --grafito-texto: #d6d8db;
  --grafito-texto-suave: #8a8e96;

  /* --- Medidas --- */
  --ancho: 90%;               /* la web ocupa el 90% de la pantalla */
  --ancho-max: 1600px;        /* ...pero sin desparramarse en monitores enormes */
  --radio: 10px;

  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Columna a pantalla completa: así el pie se queda abajo y no deja un
     hueco blanco debajo en las páginas cortas. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--enlace); }
a:hover { color: var(--enlace-hover); }

.wrap {
  width: var(--ancho);
  max-width: var(--ancho-max);
  margin: 0 auto;
}

/* --- Cabecera ------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--borde);
  padding: 1.25rem 0;
}

.brand {
  display: block;
  /* El logo es un PNG de 1500px: sin límite de tamaño se sale de la pantalla. */
  max-width: 260px;
  margin: 0 auto;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1rem;
}

.site-nav a {
  color: var(--tinta-suave);
  text-decoration: none;
  font-weight: 500;
}

.site-nav a.is-active,
.site-nav a:hover {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Las tres columnas --------------------------------------------------- */

.layout {
  flex: 1;               /* empuja el pie hasta abajo */
  display: grid;
  grid-template-columns: 1fr;   /* móvil: todo apilado */
  gap: 2rem;
  padding: 2rem 0 3rem;
  align-items: start;
}

.col-centro {
  min-width: 0;          /* sin esto, una tabla o una imagen ancha desbordan */
  /* En móvil el contenido va primero: si no, hay que pasar por encima del
     menú de secciones para llegar a lo que se ha venido a leer. */
  order: -1;
}

/* A partir de tablet aparece la columna de secciones a la izquierda. */
@media (min-width: 48rem) {
  .layout {
    grid-template-columns: 13rem minmax(0, 1fr);
  }
  .col-centro { order: 0; }
}

/* En pantalla grande entra la tercera columna: el seguimiento a la derecha.
   El contenido queda así hacia la izquierda, no centrado en mitad del
   monitor. */
@media (min-width: 68rem) {
  .layout {
    grid-template-columns: 13rem minmax(0, 1fr) 19rem;
    gap: 2.5rem;
  }
}

/* --- Columna izquierda: secciones ---------------------------------------- */

.secciones h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  margin: 0 0 0.75rem;
}

.secciones ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.secciones a {
  text-decoration: none;
  font-weight: 500;
}

.secciones a:hover { text-decoration: underline; }

/* Secciones que aún no existen: se ven, pero se nota que no llevan a ningún
   sitio todavía. */
.pendiente {
  color: var(--tinta-suave);
  opacity: 0.65;
}

/* --- Columna derecha: seguimiento ---------------------------------------- */

.widget {
  background: var(--fondo-suave);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
}

.widget h2 {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tinta-suave);
  margin: 0 0 0.5rem;
}

.widget-dato {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
}

.widget-nota {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

/* --- Contenido ----------------------------------------------------------- */

.page > :first-child { margin-top: 0; }

.page h1 {
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1rem;
}

/* El texto largo se lee mal a lo ancho de un monitor: se limita a un ancho
   de lectura cómodo aunque la columna dé más de sí. */
.page p,
.page ul,
.page ol {
  max-width: 38rem;
}

.figura img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radio);
}

/* --- Pie ----------------------------------------------------------------- */

.site-footer {
  background: var(--grafito);
  color: var(--grafito-texto-suave);
  padding: 1.5rem 0;
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer p { margin: 0; }

/* align-items: center alinea el texto con el logo; sin esto la imagen se
   apoya en la línea base del texto y queda descolgada. */
.site-footer .credito {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--grafito-texto);
}

.site-footer .credito img {
  display: block;
  height: 30px;
  width: auto;
}