/* ============================================
   Fuentes alojadas en el theme (variables: un archivo cubre todos los pesos)
   Montserrat 400-700 para títulos, Inter 300-700 para el cuerpo.
   Solo los subconjuntos latin y latin-ext: alcanzan para español.
   ============================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   Variables CSS - Paleta de colores y fuentes
   ============================================ */
:root {
  /* Colores principales */
  --color-primary: #061221;
  --color-primary-mid-light: #0f1d38;
  --color-primary-light: #1d2e50;
  --color-accent: #df9469; /*  */
  --color-accent-hover: #dc7f61;
  --color-focus: #df9469; /* anillo de foco */
  
  /* Colores de fondo */
  --color-bg-mid: #eee8da;
  --color-bg-light: #faf4e7;
  --color-bg-lightest: #fffef4;
  
  /* Colores de texto */
  --color-text-light: #eee8da;
  --color-heading: var(--color-text-light);
  --color-text-muted: color-mix(in srgb, var(--color-bg-lightest) 60%, transparent);
  --color-accent-text: var(--color-accent);          /* cobre usado como texto o título */
  --color-accent-text-hover: var(--color-accent-hover);
  --color-on-accent: #eee8da;                        /* texto/íconos de botones: el crema del texto del tema oscuro, igual en ambos temas (sobre cobre: 2,0:1) */

  /* Superficies y componentes que cambian con el tema */
  --surface-container: var(--color-primary-mid-light);
  --surface-card: var(--color-primary);
  --border-card: var(--color-primary-light);
  --input-bg: var(--color-bg-mid);
  --quote-bg: var(--color-primary-light);
  --menu-bg: var(--color-primary-light);
  --menu-border: color-mix(in srgb, var(--color-bg-lightest) 15%, transparent);
  --menu-text: var(--color-bg-lightest);
  --menu-hover-bg: var(--color-primary);
  --menu-hover-text: var(--color-accent);
  --code-bg: var(--color-primary-mid-light);
  --code-fg: var(--color-bg-mid);
  --code-border: var(--color-primary-light);
  /* <kbd>: se define por tema (la tarjeta va de casi negro a casi blanco). Oscuro: navy más
     claro con texto crema (elección de Guillermo, 23/09; la tecla se distingue poco de la tarjeta). */
  --kbd-bg: var(--color-primary-light);
  --kbd-text: var(--color-bg-mid);

  /* Fuentes */
  --font-title: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Transiciones */
  --transition-fast: 0.3s ease;
  --transition-normal: 0.5s ease;
  /* Solo colores: `transition: all` retrasa la aparición del anillo de foco */
  --transition-colors: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  --transition-colors-slow: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  
  /* Bordes */
  --border-radius-sm: 5px;
  --border-radius-md: 12px;
  --border-radius-lg: 15px;
  --border-radius-pill: 25px;

  color-scheme: dark;
}

/* ============================================
   Tema claro
   Se activa con <html data-theme="light"> (script en header.php + js/theme-toggle.js).
   Solo redefine variables; las reglas de abajo son las mismas para ambos temas.
   Contrastes (WCAG) medidos sobre #faf4e7 / #fffef4:
   texto #1d2e50 12,3 / 13,3 · títulos #061221 17,2 / 18,6 · cobre #a45223 5,0 / 5,4
   ============================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --color-text-light: #1d2e50;
  --color-heading: #061221;
  --color-text-muted: color-mix(in srgb, var(--color-primary-light) 80%, var(--color-bg-lightest));
  --color-accent-text: #a45223;        /* cobre oscurecido: fuera de la paleta oficial, aprobado */
  --color-accent-text-hover: #82401c;
  --color-focus: #a45223;

  --surface-container: var(--color-bg-light);
  --surface-card: var(--color-bg-lightest);
  --border-card: var(--color-bg-mid);
  --input-bg: var(--color-bg-lightest);
  --quote-bg: var(--color-bg-mid);
  --menu-bg: var(--color-bg-lightest);
  --menu-border: var(--color-bg-mid);
  --menu-text: var(--color-primary);
  --menu-hover-bg: var(--color-bg-light);
  --menu-hover-text: var(--color-primary);
  --code-bg: var(--color-primary);
  --code-fg: var(--color-bg-mid);
  --code-border: var(--color-primary);
  /* Claro: crema con texto navy oscuro (elección de Guillermo, 23/09). */
  --kbd-bg: var(--color-bg-mid);
  --kbd-text: var(--color-primary);
}

/* ============================================
   Reset y estilos base
   ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--color-primary-light);
  color: var(--color-text-light);
  font-family: var(--font-body);
  line-height: 1.6;
  min-width: 320px;
}

/* WordPress envuelve encabezado, contenido y pie en .wp-site-blocks */
.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.container {
  background: var(--surface-container);
}

/* ============================================
   Header y Navegación
   ============================================ */

/* Saltar al contenido: invisible hasta recibir foco por teclado (el enlace lo agrega WordPress) */
.skip-link.screen-reader-text:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1100;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 10px 18px;
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-lightest);
  color: var(--color-primary);
  font-family: var(--font-title);
  font-size: 1rem;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.header {
  /* fixed y no sticky: `.header` vive dentro de `.wp-site-blocks` (el contenedor flex que arma
     el block theme) y ahí el sticky no pegaba, se iba con el scroll sin motivo detectable
     (ni overflow ni transform en los ancestros); con fixed sí funciona. También sirve de
     referencia para el desplegable del menú mobile, ver más abajo. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  font-family: var(--font-title);
  background-color: var(--color-primary);
  color: var(--color-accent-hover);
}

/* Con la barra de admin de WordPress (solo para usuarios logueados) fija arriba, el header
   quedaría debajo: se corre para no superponerse. Puntos de quiebre del propio core. */
body.admin-bar .header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}

/* El header fixed sale del flujo normal: sin esto el contenido arrancaría tapado debajo.
   js/header-offset.js mide el alto del header y lo deja en `--header-height` (estilo inline en <html>,
   que le gana a estos valores). Los de acá son el alto real medido en cada rango (logo de 375, 220 y
   180 px): así el espacio es correcto desde el primer cuadro, antes de que corra el JS, y el
   contenido no salta al cargar (CLS). Por debajo de 360 px el logo baja a 140 px (ver el buscador del
   encabezado) y el header mide 60 px. */
:root {
  --header-height: 134px;
}

@media (max-width: 991.98px) {
  :root {
    --header-height: 85px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --header-height: 73px;
  }
}

@media (max-width: 359.98px) {
  :root {
    --header-height: 60px;
  }
}

.wp-site-blocks {
  padding-top: var(--header-height);
}

/* .container pinta la superficie del contenido; en el encabezado va sobre el fondo del propio header */
.header .container {
  background: transparent;
}

.header-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.75rem;
}

.header img {
  width: 375px;
  transition: transform var(--transition-fast);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Íconos SVG inline (inc/icons.php): heredan color y tamaño del texto */
.icon {
  flex-shrink: 0;
}

/* Links de navegación (bloque Navegación) */
/* El core fija color: inherit en los links del menú, por eso el color va en el contenedor */
.header-nav {
  color: var(--color-bg-lightest);
  font-size: 1.05em;
}

.header-nav .wp-block-navigation__container {
  gap: 0;
}

.header-nav .wp-block-navigation-item__content {
  padding: 0.5rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.header-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--color-accent);
}

.header-nav .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Menú desplegable en pantallas chicas: botón cobre y panel navy */
.header-nav .wp-block-navigation__responsive-container-open {
  padding: 0.25rem 0.5rem;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.header-nav .wp-block-navigation__responsive-container-open:focus-visible {
  outline: 2px solid var(--color-bg-lightest);
  outline-offset: 2px;
}

/* El core pinta el panel abierto de blanco con `.wp-block-navigation:not(.has-background) …` (peso 0,4,0):
   hace falta más peso para que valga el navy del theme. */
.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
  background-color: var(--color-primary);
  color: var(--color-bg-lightest);
  font-family: var(--font-title);
}

/* El bloque Navegación abre el menú mobile como un modal de pantalla completa (`position: fixed;
   inset: 0`, igual que el escritorio). El theme clásico tenía un desplegable acotado (navbar de
   Bootstrap) y Guillermo lo prefiere: se lo recrea reposicionando el mismo panel como un desplegable
   debajo del encabezado (`.header` es el `position: relative` de referencia), sin tapar el resto de
   la página. La lógica de abrir/cerrar (clic afuera, Escape, foco) la sigue manejando el core. */
.header-nav.wp-block-navigation {
  /* El core fija position:relative acá; si queda relative el panel (ver abajo) se ancla al nav
     (solo el ancho del botón), no al header. Los submenúes no lo necesitan: se anclan a su ítem. */
  position: static;
}

.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
  position: absolute;
  inset: 100% 0 auto 0;
  height: auto;
  z-index: 20;
}

/* El core separa el panel del borde con clamp(1rem, var(--wp--style--root--padding-right), 20rem);
   como el theme.json no define esa variable (no la necesitábamos, blockGap va en 0), el clamp() es
   inválido y el padding queda en 0: con justifyContent:"right" del bloque (pensado para el header en
   escritorio) los links del menú mobile quedan pegados al borde derecho. padding-top más chico que
   el del core (pensado para el botón de cerrar, que acá está oculto, ver abajo); padding-bottom con
   más aire para que el panel no termine pegado al último link. */
.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content {
  padding-top: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
}

/* Botón de cerrar (X) oculto: ya no hace falta, un segundo clic en el hamburguesa cierra el menú
   (js/nav-toggle.js) y Escape también funciona (lo maneja el core). */
.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-close {
  display: none;
}

/* Texto centrado y más aire entre links en el panel mobile: el justifyContent:"right" del bloque
   es para el layout de escritorio (link pegado al botón de tema), acá no queda bien. */
.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
  align-items: center;
}

.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
  gap: 1.25rem;
}

.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
  text-align: center;
}

/* Submenúes (ítems anidados en Diseño → Navegación; variante A elegida por Guillermo el 09/10).
   Sin flecha: patterns/header.php la desactiva con showSubmenuIcon:false (no con CSS: la flecha es
   el botón que abre el submenú con teclado; sin ella el core lo abre al recibir el foco). */

/* Escritorio: tarjeta navy con línea cobre arriba, en lugar de la caja blanca del core. Siempre
   pegada al ítem (top: 100%): un hueco entre los dos cerraría el submenú al bajar con el mouse. */
@media (min-width: 1200px) {
  .wp-block-navigation.header-nav .has-child .wp-block-navigation__submenu-container {
    min-width: 210px;
    padding: 0.4rem 0;
    background-color: var(--color-primary-mid-light);
    color: var(--color-bg-lightest);
    border: 1px solid var(--color-primary-light);
    border-top: 2px solid var(--color-accent);
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  }

  .wp-block-navigation.header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.55rem 1.1rem;
    font-size: 0.95em;
  }

  .wp-block-navigation.header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
  .wp-block-navigation.header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background-color: var(--color-primary-light);
  }

  .wp-block-navigation.header-nav .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    outline-offset: -2px;
  }
}

/* Panel mobile: el core mete el submenú con sangría y 2em arriba, y corre el ítem padre del centro.
   Acá va centrado bajo su padre, más chico y en gris azulado para que se lea como parte de él. */
.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation-item.has-child {
  align-items: center;
}

.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container {
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0 0;
}

.wp-block-navigation.header-nav .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 0.9em;
  color: #c9d3e6;
}

/* Menú plegado (hamburguesa) por debajo de 1200 px, no solo por debajo de 600 px como trae el bloque
   (el core no deja cambiar ese punto de corte). Con 4 enlaces el menú no entraba al lado del logo entre
   600 y 1199 px y bajaba a una segunda línea: header de 125-186 px en vez de 73-134 (decisión de
   Guillermo, 24/09). Pisa las dos reglas `@media (min-width: 600px)` del core, con más peso. */
@media (min-width: 600px) and (max-width: 1199.98px) {
  .header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }

  .header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* Botón claro/oscuro */
#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  padding: 0.5rem 0;
  border: 1px solid color-mix(in srgb, var(--color-bg-lightest) 25%, transparent);
  border-radius: var(--border-radius-sm);
  background: var(--color-primary);
  color: var(--color-on-accent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

#theme-toggle:hover {
  border-color: var(--color-accent);
}

#theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Oscuro: se ofrece el sol; claro: la luna */
#theme-toggle .icon-moon,
:root[data-theme="light"] #theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="light"] #theme-toggle .icon-moon {
  display: block;
}

/* Buscador del encabezado (bloque remadmin/header-search, js/header-search.js): solo por debajo de
   992 px, donde la barra lateral con su buscador baja al final de la página. La lupa tiene el mismo
   aspecto que el botón de tema; el campo se abre debajo del encabezado, como el panel del menú
   (`.header` es la referencia del position: absolute). Elegido por Guillermo entre dos variantes, 24/09. */
#search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 35px;
  padding: 0.5rem 0;
  border: 1px solid color-mix(in srgb, var(--color-bg-lightest) 25%, transparent);
  border-radius: var(--border-radius-sm);
  background: var(--color-primary);
  color: var(--color-on-accent);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

#search-toggle:hover {
  border-color: var(--color-accent);
}

#search-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

#search-toggle .search-toggle-close,
#search-toggle[aria-expanded="true"] .search-toggle-open {
  display: none;
}

#search-toggle[aria-expanded="true"] .search-toggle-close {
  display: inline-flex;
}

#header-search {
  position: absolute;
  inset: 100% 0 auto 0;
  z-index: 20;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--color-bg-lightest) 12%, transparent);
  background-color: var(--color-primary);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

#header-search[hidden] {
  display: none;
}

.header-search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 540px;
  margin: 0 auto;
}

.header-search-form input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-bg-mid);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 1rem;
}

.header-search-form input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.header-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: 0;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.header-search-submit:hover {
  background-color: var(--color-accent-hover);
}

.header-search-submit:focus-visible {
  outline: 2px solid var(--color-bg-lightest);
  outline-offset: 2px;
}

@media (max-width: 991.98px) {
  #search-toggle {
    display: inline-flex;
  }

  .header-actions {
    gap: 0.5rem;
  }
}

/* Con tres botones (menú, lupa, tema) el logo de 180 px no entra en una línea por debajo de 360 px.
   Selector más pesado que el `.header img` de las media queries del final del archivo. */
@media (max-width: 359.98px) {
  .header .header-logo img {
    width: 140px;
  }
}

/* ============================================
   Tipografía
   ============================================ */
.container h2,
.container h3,
.container h4 {
  font-family: var(--font-title);
  color: var(--color-heading);
  font-weight: 500;
}

.container h1 {
  font-family: var(--font-title);
  color: var(--color-accent-text);
  font-weight: 600;
}

.page-title {
  margin-bottom: 2.6rem;
}

/* ============================================
   Cards y Secciones
   ============================================ */
.search-bar,
.post-card,
.categories,
.recent-posts {
  background-color: var(--surface-card);
  border: solid 1px var(--border-card);
  padding: 20px 30px;
  border-radius: var(--border-radius-lg);
  transition: box-shadow var(--transition-normal);
}

/*
.search-bar:hover,
.post-card:hover,
.categories:hover,
.recent-posts:hover{
  box-shadow: 0 2px 8px rgba(255,255,255, 0.2);
}
*/

/* Featured Post */

.featured-post {
  background-color: var(--surface-card);
  border-radius: var(--border-radius-md);
  margin-left: 1px;
  margin-right: 1px;
  transition: box-shadow var(--transition-normal);
}

.featured-post .button {
  margin-bottom: 1.5rem !important;
}

.featured-post h2 {
  margin-top: 1.5rem;
}
/*
.featured-post:hover {
  box-shadow: 0 2px 8px rgba(255,255,255, 0.2);
  transition: box-shadow var(--transition-normal);
}*/

.featured-post h2 {
  color: var(--color-accent-text) !important;
  font-size: 2.5em;
  margin-bottom: 25px !important;
  font-weight: 500;
}

.featured-post h2 a,
.post-card h2 a {
  color: var(--color-accent-text) !important;
  text-decoration: none;
  transition: var(--transition-colors-slow);
}

.featured-post h2 a:hover,
.post-card h2 a:hover {
  color: var(--color-accent-text-hover) !important;
  transition: var(--transition-colors-slow);
}

.wp-block-post-featured-image.featured-image {
  height: 100%;
  margin: 0;
}

/* Lado a lado (≥ 1200 px): la imagen llena el alto de la tarjeta (object-fit recorta los costados) y queda
   pegada a los bordes; el alto lo fija el texto, por eso el extracto lleva tope de líneas. */
.featured-image img {
  border-top-left-radius: 12px !important;
  border-bottom-left-radius: 12px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Extracto del destacado: máximo 4 líneas */
.featured-post .wp-block-post-excerpt__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.wp-post-image {
  display: block;
  margin: 0 auto;
}

/* Quote */

/* Blockquote */
blockquote,
.wp-block-quote {
  border-left: 4px solid var(--color-accent);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background-color: var(--quote-bg);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.wp-block-quote p {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

.wp-block-quote cite {
  font-size: 0.85rem;
  color: var(--color-accent-text);
  font-style: normal;
  font-weight: 600;
}

/* Posts */
/*
.post-card:hover {
  box-shadow: 0 2px 8px rgba(255,255,255, 0.2);
   transition: 0.5s;
}*/

/* Main post content */
.main-post {
  line-height: 1.75;
}

.main-post img {
  border-radius: var(--border-radius-md);
}

.main-post p img {
  margin-bottom: 2em;
}

.main-post h2 {
  margin-top: 1.5em;
}

.main-post h3 {
  margin-top: 1.5em;
}

.main-post h4 {
  margin-top: 1.25em;
}

/* Ancho de lectura en artículos y páginas: sin tope eran 95 caracteres reales por línea (110 en las páginas).
   Se mide en `ch`, que en Inter es el ancho del "0", más ancho que la letra promedio.
   Base: 62ch (~75 caracteres). El espacio que sobra a la derecha de esa base se reduce a la mitad:
   62ch + (100% - 62ch) / 2 = 50% + 31ch. Imágenes, código y citas ocupan toda la columna. */
.main-post-content > p,
.main-post-content > ul,
.main-post-content > ol {
  max-width: calc(50% + 31ch);
}

/* Las secciones enlazadas desde la tabla de contenidos no quedan pegadas al borde */
.main-post-content h2,
.main-post-content h3 {
  scroll-margin-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.main-post a {
  color: var(--color-accent-text);
  transition: color var(--transition-fast);
}

/* Los enlaces dentro del texto se distinguen sin depender del color */
.main-post-content a,
.post-author {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.wp-block-query-pagination {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border-card);
  border-radius: var(--border-radius-sm);
  color: var(--color-accent-text);
  text-decoration: none;
  transition: var(--transition-colors);
}

.wp-block-query-pagination a:hover {
  border-color: var(--color-accent-text);
}

.wp-block-query-pagination .page-numbers.current {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}

.wp-block-query-pagination-numbers {
  display: flex;
  gap: 0.5rem;
}

/* ============================================
   Search Bar
   ============================================ */
.search-bar input {
  background: var(--input-bg);
  border-radius: var(--border-radius-sm);
  color: var(--color-primary);
  border: 2px solid var(--color-bg-mid);
  height: 45px;
  padding-left: 15px;
  transition: border-color var(--transition-fast);
}

.search-bar input:focus {
  background: var(--input-bg);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: none;
  border-color: var(--color-accent);
}

.search-bar .wp-block-search__inside-wrapper {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.search-bar .wp-block-search__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.search-bar .wp-block-search__button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.search-bar .wp-block-search__button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--border-radius-sm);
  width: 52px;
  border: none;
  transition: background-color var(--transition-fast);
}

.search-bar .wp-block-search__button:focus {
  background: var(--color-primary);
  color: var(--color-bg-lightest);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.search-bar .wp-block-search__button:hover {
  background-color: var(--color-accent-hover) !important;
  color: var(--color-on-accent);
  border: none;
}

/* ============================================
   Recent Posts
   ============================================ */
.recent-posts .widget-title {
font-size: 2em;
font-weight: 500;
}

.recent-posts ul {
  margin-top: 25px;
  list-style: none;
  padding-left: 0;
}

.recent-posts ul li {
  margin-bottom: 10px;
}

.recent-posts ul li a {
  text-decoration: none;
  color: var(--color-text-light);
  transition: color var(--transition-fast);
}

.recent-posts ul li a:hover {
  color: var(--color-accent-text);
}

/* ============================================
   Categories
   ============================================ */

.categories .widget-title {
  font-size: 2em;
  font-weight: 500;
}

.categories ul {
  margin-top: 25px;
  margin-left: 0;
  padding-left: 0;
  display: flex;
  gap: 10px;
  list-style: none;
  flex-wrap: wrap;
}

.categories ul li {
  margin-bottom: 10px;
}

.categories ul li a {
  font-size: 0.9em;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--border-radius-pill);
  background-color: var(--color-accent);
  font-family: var(--font-title);
  color: var(--color-on-accent);
  transition: var(--transition-colors);
  display: inline-block;
}

.categories ul li a:hover {
  background-color: var(--color-accent-hover);
  transition: var(--transition-colors);

}

/* ============================================
   Buttons
   ============================================ */
.button {
  text-decoration: none;
  padding: 10px 25px;
  border-radius: 8px;
  background-color: var(--color-accent);
  font-family: var(--font-title);
  color: var(--color-on-accent) !important;
  display: inline-block;
  transition: var(--transition-colors-slow);
  border: none;
  cursor: pointer;
}

.button:hover {
  background-color: var(--color-accent-hover) !important;
}

.button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-home {
  margin-top: 50px !important;
  margin-bottom: 10px;
}

/* ============================================
   Cafecito: cierre del artículo (patterns/post-footer.php)
   Tarjeta centrada con insignia circular montada sobre el borde (motivo de la identidad visual)
   ============================================ */
.cafecito {
  margin-top: 4.5rem;
  padding: 2rem 2rem 1.75rem;
  text-align: center;
  background: var(--surface-container);
  border: 1px solid var(--border-card);
  border-radius: var(--border-radius-md);
}

.cafecito-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: -3.75rem auto 1rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 24px; /* tamaño del ícono (inc/icons.php lo mide en em) */
  box-shadow: 0 0 0 6px var(--surface-card); /* separa la insignia del borde de la tarjeta */
}

.main-post .cafecito-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-title);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-heading);
}

.cafecito p {
  max-width: 52ch;
  margin: 0 auto 1.25rem;
  line-height: 1.75;
}

/* Botón propio con el ícono original de Cafecito (images/cafecito-icon.png, recortado de su
   botón oficial) sobre el cobre de los demás botones del sitio. `.main-post` delante para
   ganarle a `.main-post a` (color cobre de los enlaces del artículo). */
.main-post .cafecito-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 12px 24px 12px 14px;
  border-radius: 8px;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-title);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cafecito-button img {
  display: block;
  width: 28px;
  height: 28px;
}

.main-post .cafecito-button:hover {
  background-color: var(--color-accent-hover);
  color: var(--color-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cafecito-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Pantallas muy angostas: menos margen interno para que el botón (sin cortes de línea) entre */
@media (max-width: 400px) {
  .cafecito {
    padding-inline: 1rem;
  }

  .main-post .cafecito-button {
    padding-inline: 12px 16px;
    font-size: 0.9rem;
  }
}

.cafecito ~ .btn-home {
  margin-top: 2rem !important;
}

/* ============================================
   Post meta
   ============================================ */
.post-summary {
  margin-bottom: 30px;
  color: var(--color-text-light);
}

.post-summary-date {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: 0.25rem;
}

/* Solo en el artículo (templates/single.html). Fecha y autor, metadatos, serie y tabla de contenidos
   van separados por el mismo espacio: 10px (pedido de Guillermo, 23/09; antes 16px). */
.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.3em;
  margin-bottom: 10px;
}

/* Los metadatos también van en las tarjetas del listado; el espacio de 10px es solo en el artículo */
.main-post .post-meta {
  margin-bottom: 10px;
}

.post-byline p {
  margin: 0;
}

/* Categoría · Nivel · Tiempo de lectura (inc/post-meta.php) */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* El separador va al final de cada ítem: si la línea se parte, no queda un punto suelto al principio */
.post-meta li:not(:last-child)::after {
  content: "·";
  content: "·" / "";
  margin-left: 0.75rem;
}

.post-meta a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-meta a:hover {
  color: var(--color-accent-text-hover);
}

/* ============================================
   Tabla de contenidos (inc/toc.php)
   ============================================ */
.toc {
  margin-bottom: 2rem;
  background-color: var(--quote-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

.toc summary {
  padding: 0.9rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-title);
  font-weight: 500;
  color: var(--color-heading);
}

.toc summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.toc-count {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.toc ol {
  margin: 0;
  padding: 0 1.25rem 1rem 3rem;
  line-height: 1.5;
}

.toc ol ol {
  padding: 0.25rem 0 0.25rem 1.25rem;
  list-style-type: lower-alpha;
}

.toc li {
  margin: 0.4rem 0;
}

.toc a {
  text-decoration: none;
}

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

/* ============================================
   Series de artículos (inc/series.php)
   ============================================ */
.serie-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.serie-header a,
.serie-nav .serie-nav-title a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.serie-nav {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--quote-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
}

/* Caja de la serie con el peso del texto del artículo; el título, apenas más grande (18px) para
   marcar el encabezado sin desentonar (pedido de Guillermo, 23/09) */
.serie-nav .serie-nav-title {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  font-weight: 400;
}

.serie-nav-description {
  margin: 0 0 0.75rem;
  color: var(--color-text-muted);
}

.serie-nav-list {
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.5;
}

.serie-nav-list li {
  margin: 0.4rem 0;
}

/* El artículo actual se distingue solo por el color, sin negrita */
.serie-nav-list [aria-current="page"] {
  color: var(--color-heading);
}

.serie-nav-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.25rem;
}

.serie-nav-steps a {
  text-decoration: none;
}

.serie-nav-steps a:hover {
  text-decoration: underline;
}

.serie-next {
  margin-left: auto;
  text-align: right;
}

/* ============================================
   Zoom de imágenes (js/article.js)
   ============================================ */
.zoom-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}

.zoom-trigger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: var(--border-radius-md);
}

.zoom-trigger img {
  display: block;
}

.zoom-trigger::after {
  content: "Ampliar";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--border-radius-pill);
  background-color: var(--color-primary);
  color: var(--color-bg-lightest);
  font-size: 0.8rem;
  line-height: 1.6;
  opacity: 0.9;
}

.zoom-dialog {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-primary);
  color: var(--color-bg-lightest);
}

.zoom-scroll {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4rem 1rem 1rem;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y pinch-zoom;
}

/* margin: auto centra la imagen cuando entra y la deja desplazable cuando no */
.zoom-scroll img {
  flex: none;
  max-width: none;
  height: auto;
  margin: auto;
  border-radius: var(--border-radius-sm);
}

.zoom-close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.zoom-close:hover {
  background-color: var(--color-accent-hover);
}

.zoom-close:focus-visible {
  outline: 2px solid var(--color-bg-lightest);
  outline-offset: 2px;
}

html.zoom-open {
  overflow: hidden;
}

/* ============================================
   Código
   ============================================ */
.main-post-content pre {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  background-color: var(--code-bg);
  color: var(--code-fg);
  border: 1px solid var(--code-border);
  border-radius: var(--border-radius-md);
  font-size: 0.9rem;
  line-height: 1.6;
  tab-size: 2;
}

.main-post-content pre:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.main-post-content pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  /* El core corta las líneas largas (break-spaces) y siguen sin sangría: mejor deslizar */
  white-space: pre;
}

.main-post-content :not(pre) > code {
  padding: 0.1em 0.35em;
  background-color: var(--quote-bg);
  color: var(--color-accent-text);
  border-radius: var(--border-radius-sm);
  font-size: 0.9em;
}

/* Bootstrap le pone a <kbd> un fondo y texto fijos (#212529 gris oscuro, texto blanco) que no
   cambian con el tema: se ve bien en el tema claro (contrasta contra el fondo crema) pero se
   pierde contra el navy del oscuro. Un solo color no sirve para los dos temas (la tarjeta del
   artículo va de casi negro en oscuro a casi blanco en claro, ver --kbd-bg más arriba). */
.main-post-content kbd {
  background-color: var(--kbd-bg);
  color: var(--kbd-text);
}

/* Código resaltado (js/code-highlight.js, estilos Apex, SOQL, Fórmula, JavaScript, LWC y
   Agentforce Script del bloque Código).
   Paleta del blog (opción P1, elegida por Guillermo el 24/09). El fondo del código es navy en
   ambos temas, así que los colores son los mismos; todos pasan 4,5:1 sobre #0f1d38 y #061221. */
.main-post-content pre[data-lang]::before {
  content: attr(data-lang);
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-title);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--code-fg) 65%, transparent);
}

.main-post-content pre .token.comment {
  color: #9aa6b8;
  font-style: italic;
}

.main-post-content pre .token.keyword,
.main-post-content pre .token.tag {
  color: var(--color-accent);
}

.main-post-content pre .token.string,
.main-post-content pre .token.attr-value,
.main-post-content pre .token.template-string,
.main-post-content pre .token.regex {
  color: #fac48f;
}

.main-post-content pre .token.function {
  color: var(--color-bg-lightest);
  font-weight: 600;
}

.main-post-content pre .token.class-name,
.main-post-content pre .token.property,
.main-post-content pre .token.attr-name {
  color: #c9d3e6;
}

.main-post-content pre .token.number,
.main-post-content pre .token.boolean,
.main-post-content pre .token.constant {
  color: #f5b8a0;
}

.main-post-content pre .token.variable,
.main-post-content pre .token.annotation {
  color: #fac48f;
  font-style: italic;
}

.main-post-content pre .token.operator,
.main-post-content pre .token.punctuation {
  color: #b8c0cc;
}

/* Dentro de una etiqueta HTML los signos < > = y las comillas toman el color de lo que rodean. */
.main-post-content pre .token.tag > .token.punctuation,
.main-post-content pre .token.attr-value > .token.punctuation {
  color: inherit;
}

/* ============================================
   Callouts (inc/formats.php: estilos Nota, Advertencia y Ojo en producción de Párrafo y Grupo)
   Barra lateral de color, fondo apenas teñido y etiqueta en mayúsculas chicas (opción C1,
   elegida por Guillermo el 24/09). "Ojo en producción" usa un rojo fuera de la paleta: el cobre
   y el durazno no se distinguían entre sí. Etiquetas: 4,5:1 o más en ambos temas.
   ============================================ */
.callout {
  --callout-color: var(--color-bg-mid);
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--callout-color);
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  background-color: color-mix(in srgb, var(--callout-color) 7%, var(--surface-card));
}

.callout--advertencia {
  --callout-color: #fac48f;
}

.callout--produccion {
  --callout-color: #f08a7e;
}

:root[data-theme="light"] .callout {
  --callout-color: var(--color-primary-light);
}

:root[data-theme="light"] .callout--advertencia {
  --callout-color: #8a5412;
}

:root[data-theme="light"] .callout--produccion {
  --callout-color: #b3362b;
}

.callout-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--callout-color);
  font-family: var(--font-title);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.callout-icon {
  flex: none;
  font-size: 1.05em;
}

.callout p:last-child,
.callout ul:last-child,
.callout ol:last-child {
  margin-bottom: 0;
}

/* ============================================
   Rutas de Setup (inc/formats.php: código en línea con forma de ruta)
   Cada tramo en una pastilla, separados por › en cobre (opción S2, elegida por Guillermo el 24/09).
   ============================================ */
.setup-path-step {
  display: inline-block;
  padding: 0 0.55em;
  border-radius: var(--border-radius-sm);
  background-color: var(--quote-bg);
  color: var(--color-heading);
  font-size: 0.92em;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
}

.setup-path-sep {
  margin: 0 0.05em;
  color: var(--color-accent-text);
  font-weight: 700;
}

/* ============================================
   Mapa del sitio (bloque remadmin/sitemap, inc/blocks.php)
   ============================================ */
/* Tamaños propios: sin esto las categorías (h3) salían más grandes que las secciones (h2),
   que las media queries de .container h2 achican a 1,3-1,5rem */
.container .sitemap h2 {
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-card);
  font-size: 1.5rem;
  color: var(--color-heading);
}

.container .sitemap h2:first-child {
  margin-top: 0;
}

.sitemap h3,
.sitemap h4,
.sitemap h5 {
  margin: 1.25rem 0 0.5rem;
}

.sitemap h3 {
  font-size: 1.2rem;
}

.sitemap h4,
.sitemap h5 {
  font-size: 1.05rem;
}

.sitemap ul,
.sitemap ol {
  margin-bottom: 0.75rem;
}

.sitemap li {
  margin-bottom: 0.35rem;
}

/* Listas plegadas (remadmin_collapsible_list en inc/blocks.php: mapa del sitio y caja de serie,
   más de REMADMIN_LIST_OPEN_MAX elementos) */
.list-more {
  margin-bottom: 0.75rem;
}

.list-more summary {
  display: list-item;
  width: fit-content;
  padding: 0.15rem 0;
  cursor: pointer;
  color: var(--color-accent-text);
  font-family: var(--font-title);
  font-weight: 500;
}

.list-more summary:hover {
  color: var(--color-accent-text-hover);
}

.list-more summary:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.list-more[open] summary {
  margin-bottom: 0.5rem;
}

.sitemap-date {
  margin-left: 0.35rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ============================================
   Tablas (bloque Tabla, también al pegar desde Docs/Word)
   Cuadrícula suave con el color de borde de la tarjeta y encabezado cobre en Montserrat
   (opción C, elegida por Guillermo el 24/09). Cobre sobre la tarjeta: 7,9:1 oscuro, 5,4:1 claro.
   El encabezado solo se ve como tal si la tabla tiene "Sección de encabezado" (<thead>).
   ============================================ */
.main-post-content .wp-block-table {
  margin: 1.5rem 0;
}

.main-post-content .wp-block-table table {
  font-size: 0.95rem;
}

.main-post-content .wp-block-table th,
.main-post-content .wp-block-table td {
  border: 1px solid var(--border-card);
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

/* El core pone 3px del color del texto bajo <thead> y sobre <tfoot> */
.main-post-content .wp-block-table thead,
.main-post-content .wp-block-table tfoot {
  border: 0;
}

.main-post-content .wp-block-table thead th {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  border-bottom: 2px solid var(--color-accent-text);
}

.main-post-content .wp-block-table tbody tr td {
  transition: var(--transition-colors);
}

.main-post-content .wp-block-table tbody tr:hover td {
  background-color: var(--surface-container);
}

.main-post-content .wp-block-table figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

.main-post-content .wp-block-table:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* En pantallas chicas la tabla conserva un ancho legible y se desliza de costado (el core ya
   pone overflow-x: auto en la figura). Sin esto, el ancho fijo de columnas que trae el bloque
   ("has-fixed-layout") cortaba las palabras por la mitad. */
@media (max-width: 767.98px) {
  .main-post-content .wp-block-table table.has-fixed-layout {
    table-layout: auto;
    min-width: 36rem;
  }

  .main-post-content .wp-block-table .has-fixed-layout th,
  .main-post-content .wp-block-table .has-fixed-layout td {
    word-break: normal;
  }

  .main-post-content .wp-block-table table {
    font-size: 0.9rem;
  }
}

/* Botón de copiar (js/article.js): el bloque queda en un contenedor para anclarlo */
.code-block {
  position: relative;
}

.code-block pre {
  margin: 1.5rem 0;
  padding-right: 6rem;
}

.code-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-colors);
}

.code-copy:hover {
  background-color: var(--color-accent-hover);
}

.code-copy:focus-visible {
  outline: 2px solid var(--color-bg-lightest);
  outline-offset: 2px;
}

/* ============================================
   Footer
   ============================================ */
footer {
  background-color: var(--color-primary);
  color: var(--color-bg-lightest);
}

/* Enlace al mapa del sitio (patterns/footer.php, solo si la página existe) */
.footer-links {
  margin-top: 0.35rem;
  font-size: 0.9rem;
}

.footer-links a {
  color: var(--color-bg-mid);
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-accent);
}

.footer-links a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.social-media {
  margin-top: 15px;
  display: flex;
  gap: 12px;
  justify-content: center;
}

.social-media a {
  text-decoration: none;
  font-size: 1.5em;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  border-radius: var(--border-radius-sm);
  transition: var(--transition-colors);
}

.social-media a:hover {
  background-color: var(--color-accent-hover);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.social-media a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ============================================
   Author page
   ============================================ */

.author-header {
  margin-bottom: 40px;
}

.author-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50% !important;
    flex-shrink: 0;
}

.author-name {
  margin-top: 0 !important;
  color: var(--color-accent-text-hover) !important;
  font-size: 2.5rem !important;
  font-weight: 500 !important;
}

.container .author-title {
  font-size: 1.5rem;
}

.container .author-articles h2 {
  font-size: 1.75rem;
}

.author-date {
  margin-bottom: 0;
}

.author-articles {
  margin-top: 40px;
}

.author-articles li {
  list-style: none;
}

.author-articles a {
  text-decoration: none;
}



/* ============================================
   Search page
   ============================================ */

  .search-link a {
    color: var(--color-accent-text);
    text-decoration: underline;
  }

/* ============================================
   Media Queries - Responsive Design
   ============================================ */
/* El destacado se apila (imagen arriba del texto) por debajo de 1200 px: entre 992 y 1199 la columna es angosta,
   la tarjeta queda alta y el recorte de la imagen cortaría el texto de las portadas. */
@media (max-width: 1199.98px) {
  .featured-post {
    padding: 15px;
  }

  /* Todas las esquinas redondeadas */
  .featured-image img {
    border-radius: var(--border-radius-md) !important;
  }
}

@media (max-width: 991.98px) {
  .header img {
    width: 220px;
  }

  /* Alto acotado: la imagen ocuparía toda la tarjeta en tablet */
  .featured-image img {
    max-height: 400px;
  }
  
  .container h2 {
    font-size: 1.5rem;
  }
}

/* Entre 576 y 767 px Bootstrap limita .container a 540 px: el encabezado usa todo el ancho */
@media (max-width: 767.98px) {
  .header-bar.container {
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .header img {
    width: 180px;
  }
  
  .featured-image img {
    max-height: 300px;
  }
  
  .search-bar,
  .featured-post,
  .post-card,
  .categories,
  .recent-posts {
    padding: 15px 20px;
  }
  
  .button {
    padding: 8px 20px;
    font-size: 0.9rem;
  }
  
  .social-media a {
    width: 38px;
    height: 38px;
    font-size: 1.3em;
  }
}

@media (max-width: 575.98px) {

  .container .row {
    padding: 0 !important;
  }

  .container h2 {
    font-size: 1.3rem;
  }
  
  .featured-post h2 {
    font-size: 1.5rem;
  }
  
  .categories ul {
    gap: 8px;
  }
  
  .categories ul li a {
    font-size: 0.85em;
    padding: 5px 10px;
  }

  .author-name {
    margin-top: 40px !important;
}
}

/* ============================================
   Preferencia de movimiento reducido
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}