/*
Theme Name: MictlanRaider
Description: Tema hijo de Twenty Twenty-Five con la identidad MictlanRaider — paleta
             "Obsidiana + Jade", tipografía Chakra Petch / Inter / JetBrains Mono.
             Toda la marca vive en theme.json; este archivo solo ajusta lo que el
             editor de bloques no cubre.
Author: Elias Rincon
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mictlanraider
*/

/* ------------------------------------------------------------------
   Casi todo el estilo se define en theme.json (paleta, tipografía,
   escala). Aquí solo lo que necesita CSS de verdad.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   TEMA CLARO
   Oscuro es el modo preferido, pero si el visitante prefiere claro lo ve claro,
   y además puede cambiarlo con el interruptor del header.

   Va aquí y no en theme.json porque **theme.json no soporta media queries**. Las
   variables de preset que genera WordPress sí se pueden sobreescribir con CSS normal,
   así que redefinirlas cambia el sitio entero de un golpe.

   Orden: sigue al sistema, salvo que el visitante haya elegido explícitamente.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="oscuro"]) {
    --wp--preset--color--obsidiana:  #F2EFE9;
    --wp--preset--color--superficie: #FBF9F5;
    --wp--preset--color--linea:      #D5CDBE;
    --wp--preset--color--jade:       #27776C;  /* oscurecido: el jade normal da 1.9:1 */
    --wp--preset--color--jade-hondo: #1B5A52;
    --wp--preset--color--oro:        #935F22;  /* oscurecido: el oro normal da 2.8:1 */
    --wp--preset--color--hueso:      #0B0E14;  /* texto */
    --wp--preset--color--humo:       #636D7A;
    --wp--preset--color--sangre:     #B23A48;
    --wp--preset--gradient--hero:
      linear-gradient(135deg, #F2EFE9 0%, #DCE9E6 55%, #E8E3D9 100%);
  }
}

/* Elección explícita del visitante (gana sobre el sistema) */
:root[data-tema="claro"] {
  --wp--preset--color--obsidiana:  #F2EFE9;
  --wp--preset--color--superficie: #FBF9F5;
  --wp--preset--color--linea:      #D5CDBE;
  --wp--preset--color--jade:       #27776C;
  --wp--preset--color--jade-hondo: #1B5A52;
  --wp--preset--color--oro:        #935F22;
  --wp--preset--color--hueso:      #0B0E14;
  --wp--preset--color--humo:       #636D7A;
  --wp--preset--color--sangre:     #B23A48;
  --wp--preset--gradient--hero:
    linear-gradient(135deg, #F2EFE9 0%, #DCE9E6 55%, #E8E3D9 100%);
}

/* El interruptor de tema */
.mr-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 999px;
  background: transparent;
  color: var(--wp--preset--color--hueso);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.mr-tema:hover { border-color: var(--wp--preset--color--jade); color: var(--wp--preset--color--jade); }
.mr-tema:focus-visible { outline: 2px solid var(--wp--preset--color--jade); outline-offset: 2px; }
.mr-tema svg { width: 18px; height: 18px; fill: currentColor; }
/* Se muestra el ícono de lo que vas a obtener al pulsarlo */
.mr-tema .mr-icono-claro { display: none; }
:root[data-tema="claro"] .mr-tema .mr-icono-claro,
.mr-tema[aria-pressed="true"] .mr-icono-claro { display: block; }
:root[data-tema="claro"] .mr-tema .mr-icono-oscuro,
.mr-tema[aria-pressed="true"] .mr-icono-oscuro { display: none; }

/* Header: una línea sutil lo separa del contenido, y el logo no se estira de más */
.mr-header {
  border-bottom: 1px solid var(--wp--preset--color--linea);
}
.mr-header .wp-block-site-logo img {
  height: auto;
  max-height: 56px;
  width: auto;
}

/* Kicker: la etiqueta monoespaciada en oro, arriba de los titulares */
.mr-kicker {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--oro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.6rem;
}

/* Cifras alineadas en tablas y estadísticas (no hace falta fuente mono) */
.mr-cifras,
table {
  font-variant-numeric: tabular-nums;
}

/* El CTA merece un poco más de presencia que un botón normal */
.wp-block-button.is-style-mr-cta .wp-block-button__link {
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.9em 1.6em;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.wp-block-button.is-style-mr-cta .wp-block-button__link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Selección de texto en jade */
::selection {
  background: var(--wp--preset--color--jade);
  color: var(--wp--preset--color--obsidiana);
}

/* Scrollbar acorde al modo oscuro (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--wp--preset--color--obsidiana); }
::-webkit-scrollbar-thumb {
  background: var(--wp--preset--color--linea);
  border-radius: 6px;
  border: 3px solid var(--wp--preset--color--obsidiana);
}
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--jade-hondo); }

/* Bloques de código: que se lean y no desborden en móvil */
.wp-block-code {
  background: var(--wp--preset--color--superficie);
  border: 1px solid var(--wp--preset--color--linea);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  overflow-x: auto;
}

/* Tablas: legibles sobre fondo oscuro y con scroll propio en móvil */
.wp-block-table { overflow-x: auto; }
.wp-block-table th {
  background: var(--wp--preset--color--superficie);
  font-family: var(--wp--preset--font-family--display);
  letter-spacing: 0.02em;
}
.wp-block-table td,
.wp-block-table th { border-color: var(--wp--preset--color--linea); }

/* Citas con la barra en oro */
.wp-block-quote {
  border-left: 3px solid var(--wp--preset--color--oro);
  padding-left: 1.15rem;
  font-style: normal;
}

/* Imágenes: nunca desbordan */
img { max-width: 100%; height: auto; }