/*
 * Tema personalizable vía Customizer:
 *   - "Colores del Tema"      → paleta (6 colores + tripletes RGB para tintes)
 *   - "Estilo de Botones"     → preset que mapea a variables --the-shire-btn-*
 *
 * Las variables se inyectan inline desde functions.php (wp_add_inline_style
 * sobre el handle 'the-shire-theme') leyendo theme_mods. Los fallbacks de :root
 * garantizan el aspecto original si el Customizer no está seteado.
 *
 * Este archivo carga DESPUÉS de main.css (dep: theme-style) para ganar la
 * cascada. Los selectores duplican los de main.css para empatar especificidad.
 */

:root {
  /* Colores — sobreescritos por theme_mods */
  --the-shire-color-primary: #fac11c;
  --the-shire-color-secondary: #fd944d;
  --the-shire-color-text: #13162f;
  --the-shire-color-text-muted: #76777a;
  --the-shire-color-bg: #ffffff;
  --the-shire-color-bg-alt: #fafafa;

  /* Tipografía — sobreescrita por theme_mods */
  --the-shire-font-family: "Open Sans", sans-serif;
  --the-shire-font-weight-heading: 500;
  --the-shire-font-weight-body: 400;
  --the-shire-h1-size: 38px; --the-shire-h1-line: 42px; --the-shire-h1-size-md: 46px; --the-shire-h1-line-md: 51px;
  --the-shire-h2-size: 30px; --the-shire-h2-line: 33px; --the-shire-h2-size-md: 38px; --the-shire-h2-line-md: 42px;
  --the-shire-h3-size: 22px; --the-shire-h3-line: 25px; --the-shire-h3-size-sm: 30px; --the-shire-h3-line-sm: 33px;
  --the-shire-h4-size: 18px; --the-shire-h4-line: 25px; --the-shire-h4-size-sm: 22px; --the-shire-h4-line-sm: 25px;
  --the-shire-h5-size: 14px; --the-shire-h5-line: 16px;
  --the-shire-body-size: 16px; --the-shire-body-line: 22px;

  /* Botones — sobreescritos por el preset seleccionado */
  --the-shire-btn-radius: 10px;
  --the-shire-btn-padding-y: 10px;
  --the-shire-btn-padding-x: 20px;
  --the-shire-btn-border-width: 1px;
  --the-shire-btn-font-weight: 700;
  --the-shire-btn-letter-spacing: normal;
  --the-shire-btn-text-transform: none;
  --the-shire-btn-shadow: none;
  --the-shire-btn-shadow-hover: none;
  --the-shire-btn-transform-hover: none;
  --the-shire-btn-transition: 0.2s ease;

  --swiper-theme-color: var(--the-shire-color-secondary);
}

/* ============================================================
   BASE
   ============================================================ */
body,
body button,
body input,
body textarea,
body select {
  color: var(--the-shire-color-text);
  font-family: var(--the-shire-font-family);
  font-weight: var(--the-shire-font-weight-body);
}
body {
  background: var(--the-shire-color-bg);
  font-size: var(--the-shire-body-size);
  line-height: var(--the-shire-body-line);
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  color: var(--the-shire-color-text);
  font-family: var(--the-shire-font-family);
  font-weight: var(--the-shire-font-weight-heading);
}
a {
  color: var(--the-shire-color-text);
  text-decoration: underline;
  transition: color 0.2s;
}
a:hover {
  color: var(--the-shire-color-text-muted);
}
/* Excepciones: elementos que no deben llevar subrayado */
.btn,
.btn:hover,
header a,
footer .footer__logo a,
footer .footer__poweredby a,
footer .footer__socials .footer__social a,
.logo,
a.logo,
a:has(> .logo) {
  text-decoration: none;
}
/* Enlaces del footer: color blanco (fondo sólido), hover = color secundario */
footer a {
  color: #fff;
}
footer a:hover {
  color: var(--the-shire-color-text-muted);
}
footer .footer__socials .footer__social a,
footer .footer__socials .footer__social a:hover {
  color: #fff;
}

/* ============================================================
   TIPOGRAFÍA — ESCALA (Customizer → "Tipografía")
   Breakpoints replican main.css: h1@960, h2@720, h3/h4@480
   ============================================================ */
h1, .h1 { font-size: var(--the-shire-h1-size); line-height: var(--the-shire-h1-line); }
@media (min-width: 960px) {
  h1, .h1 { font-size: var(--the-shire-h1-size-md); line-height: var(--the-shire-h1-line-md); }
}
h2, .h2 { font-size: var(--the-shire-h2-size); line-height: var(--the-shire-h2-line); }
@media (min-width: 720px) {
  h2, .h2 { font-size: var(--the-shire-h2-size-md); line-height: var(--the-shire-h2-line-md); }
}
h3, .h3 { font-size: var(--the-shire-h3-size); line-height: var(--the-shire-h3-line); }
@media (min-width: 480px) {
  h3, .h3 { font-size: var(--the-shire-h3-size-sm); line-height: var(--the-shire-h3-line-sm); }
}
h4, .h4 { font-size: var(--the-shire-h4-size); line-height: var(--the-shire-h4-line); }
@media (min-width: 480px) {
  h4, .h4 { font-size: var(--the-shire-h4-size-sm); line-height: var(--the-shire-h4-line-sm); }
}
h5, .h5 { font-size: var(--the-shire-h5-size); line-height: var(--the-shire-h5-line); }

/* ============================================================
   TIPOGRAFÍA — FAMILIA (override a declaraciones "Open Sans"
   dispersas en main.css). Excluye fuentes de iconos (FontAwesome,
   swiper-icons, adobe).
   ============================================================ */
.faq,
.faq .faq__question,
section .section__title {
  font-family: var(--the-shire-font-family);
}

/* ============================================================
   TIPOGRAFÍA — PESOS DE TÍTULOS
   Elementos con rol de titular (nombres, números destacados,
   labels de stat, títulos de sección/artículo).
   ============================================================ */
article .article__title,
article.article--lote .article__body .article__title,
article.article--stat .article__stat__number,
article.article--stat .article__stat__label,
article.article--testimonial .article__header .article__info .article__name,
section .section__title,
section.section--hero .section__body .section__content .section__title,
section.section--header .section__body .section__content .section__title,
section.section--ficha .section__body .section__ficha .section__ficha__status .status-badge,
section.section--ficha .section__body .section__ficha .section__ficha__status .status-countdown .countdown__number,
section.section--ficha .section__body .section__ficha .section__ficha__item .ficha__content .ficha__value,
section.section--tabs-participation .section__participation .participation__banner .banner__content .banner__title,
section.section--tabs-participation .section__expediente .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__comments .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__agenda .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__expediente .expediente__list .expediente__item .expediente__content .expediente__title,
section.section--tabs-participation .section__comments .comments__list .comment .comment__content .comment__header .comment__author,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__events .event .event__date .date__day,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__events .event .event__content .event__title,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__mini .calendar__header .calendar__month,
section.section--agenda-global .agenda__header .agenda__header__info .agenda__title,
section.section--agenda-global .agenda__calendar .calendar__header .calendar__day-name,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day .day__number,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day.calendar__day--has-events .day__number,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day .day__events .event-item .event-item__title,
.modal.modal--lote .modal__header h3 {
  font-weight: var(--the-shire-font-weight-heading);
}

/* ============================================================
   TIPOGRAFÍA — TAMAÑOS POR TIER
   Mapea font-size de componentes a la escala del Customizer:
     display (48/36) → h1   |   grande (32) → h2
     medio (24)      → h3   |   base (20/18) → h4
     body (16/15)    → body |   meta (14/13) → h5
   Micro-text 12px queda literal (badges, fechas, labels pequeñas).
   font-size de íconos (.fa, .fas, span en iconos) NO se mapea.
   ============================================================ */

/* Display — h1 */
section.section--ficha .section__body .section__ficha .section__ficha__status .status-countdown .countdown__number {
  font-size: var(--the-shire-h1-size);
}

/* Grande — h2 */
article.article--stat .article__stat__number,
section.section--tabs-participation .section__expediente .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__comments .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__agenda .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__participation .participation__banner .banner__content .banner__title,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__events .event .event__date .date__day,
section.section--agenda-global .agenda__header .agenda__header__info .agenda__title,
article.article--testimonial .article__body .article__quote span {
  font-size: var(--the-shire-h2-size);
}

/* Medio — h3 (títulos de sección hero/header, modales) */
.modal.modal--lote .modal__header h3,
section.section--hero .section__body .section__content .section__title,
section.section--header .section__body .section__content .section__title {
  font-size: var(--the-shire-h3-size);
}
@media (min-width: 720px) {
  .modal.modal--lote .modal__header h3 {
    font-size: var(--the-shire-h3-size-sm);
  }
}

/* Base — h4 (labels destacados, subtítulos, descripciones largas) */
article.article--stat .article__stat__label,
article.article--testimonial .article__header .article__info .article__name,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__events .event .event__content .event__title,
section .section__description,
section .section__content blockquote p,
.modal .modal__content p:first-child,
footer .footer__nav h4 {
  font-size: var(--the-shire-h4-size);
}
@media (min-width: 720px) {
  .faq .faq__question,
  .modal .modal__content p:first-child,
  section .section__content blockquote p {
    font-size: var(--the-shire-h4-size);
  }
}

/* Body — body-size (párrafos, contenido principal, UI labels legibles) */
article .article__description,
article p,
article.article--lote .article__body .article__title,
article.article--testimonial .article__body .article__text,
section p,
section .section__content,
section.section--tabs-participation .section__participation .participation__banner .banner__content .banner__description,
section.section--tabs-participation .section__expediente .expediente__intro,
section.section--tabs-participation .section__comments .comments__intro,
section.section--tabs-participation .section__agenda .agenda__intro,
section.section--tabs-participation .section__expediente .expediente__list .expediente__item .expediente__content .expediente__title,
section.section--tabs-participation .section__comments .comments__list .comment .comment__content .comment__header .comment__author,
section.section--ficha .section__body .section__ficha .section__ficha__item .ficha__content .ficha__value,
section.section--ficha .section__body .section__ficha .section__ficha__status .status-badge,
section.section--agenda-global .agenda__header .agenda__header__info .agenda__subtitle,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day .day__number,
.faq .faq__answer ul li,
footer .footer__description,
.wp p,
.wp ul li {
  font-size: var(--the-shire-body-size);
}
@media (min-width: 480px) {
  .tabs .tabs__header .tab,
  .tabs.tabs--login .tabs__header .tab,
  .tabs.tabs--payment .tabs__header .tab {
    font-size: var(--the-shire-body-size);
  }
}

/* Meta — h5-size (metadatos, tags, pies de stat, nav secundaria, tabs mobile) */
article .article__body p,
article .article__header p,
article.article--stat .article__stat__description,
article.article--testimonial .article__header .article__info .article__role,
section .section__subtitle,
section.section--ficha .section__header .section__header__content .section__subtitle,
section.section--ficha .section__body .section__ficha .section__ficha__status .status-countdown .countdown__label,
section.section--tabs-participation .section__expediente .results__stats .stat-card .stat-card__label,
section.section--tabs-participation .section__comments .results__stats .stat-card .stat-card__label,
section.section--tabs-participation .section__agenda .results__stats .stat-card .stat-card__label,
section.section--tabs-participation .section__expediente .expediente__list .expediente__item .expediente__content .expediente__meta,
section.section--tabs-participation .section__comments .comments__list .comment .comment__content .comment__header .comment__date,
section.section--tabs-participation .section__comments .comments__list .comment .comment__content .comment__actions button,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__events .event .event__date .date__month,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__mini .calendar__header .calendar__month,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__info h5,
section.section--agenda-global .agenda__calendar .calendar__header .calendar__day-name,
.faq .faq__answer .section__description,
.tabs .tabs__header .tab,
footer .footer__nav ul li a {
  font-size: var(--the-shire-h5-size);
}

/* ============================================================
   TIPOGRAFÍA — PESOS DE CUERPO
   Párrafos, descripciones, roles, metadatos, navegación.
   ============================================================ */
article .article__description,
article p,
article .article__body p,
article .article__header p,
article.article--testimonial .article__header .article__info .article__role,
article.article--testimonial .article__body .article__text,
section p,
section .section__description,
footer .footer__description,
footer .footer__nav ul li a,
.wp p {
  font-weight: var(--the-shire-font-weight-body);
}

/* ============================================================
   PRIMARY — backgrounds
   ============================================================ */
.btn,
section.section--hero,
section.section--stats,
section.section--color-primary,
section.section--color-secundary,
footer .footer__secondary,
header .header__ham span,
.slider .slider-navigation .slider-nav,
.swiper-button-prev,
.swiper-button-next,
.tabs .tabs__header .tab:hover,
.tabs .tabs__header .tab.tab--current,
.modal.modal--lote .swiper-lote .swiper-pagination .swiper-pagination-bullet,
section.section--wp .section__footer .section__socials .section__social a:hover,
section.section--agenda-global .agenda__header .agenda__header__nav .btn-nav:hover,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day.calendar__day--today .day__number,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day .day__events .event-item:hover,
section.section--agenda-global .agenda__legend .legend__items .legend__item .legend__color.legend__color--today,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__mini .calendar__grid .calendar__dates .calendar__date.calendar__date--event {
  background-color: var(--the-shire-color-primary);
}

input[type=checkbox]:checked,
input[type=radio]:checked {
  background-color: var(--the-shire-color-primary);
  border-color: var(--the-shire-color-primary);
}

/* Hero gradient overlay + stats variantes */
section.section--hero .section__bg:after {
  background: linear-gradient(0deg, var(--the-shire-color-primary), transparent);
}
@media (min-width: 720px) {
  section.section--hero .section__bg:after {
    background: linear-gradient(270deg, var(--the-shire-color-primary), transparent);
  }
}

/* Header nav button */
header .header__nav .header__nav__nav ul li.header__nav__button .btn {
  background-color: var(--the-shire-color-primary);
  border-color: var(--the-shire-color-primary);
}

/* Tabs participation — calendar events */
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day .day__events .event-item {
  border-left-color: var(--the-shire-color-primary);
}

/* ============================================================
   PRIMARY — text / color
   ============================================================ */
.btn.btn--transparent:hover,
.faq .faq__question .fa,
.faq .faq__question:hover,
.modal .modal__close,
.modal.modal--lote .swiper-lote .swiper-button-prev,
.modal.modal--lote .swiper-lote .swiper-button-next,
.swiper-button-prev:hover,
.swiper-button-next:hover,
section .section__subtitle,
section.section--ficha .section__body .section__ficha .section__ficha__status .status-badge.status-badge--active,
section.section--ficha .section__body .section__ficha .section__ficha__status .status-countdown .countdown__number,
section.section--ficha .section__body .section__ficha .section__ficha__item .ficha__icon .fa,
section.section--tabs-participation .section__content h4,
section.section--tabs-participation .section__content .section__cta-box .cta-box__icon .fa,
section.section--tabs-participation .section__participation .participation__info h4,
section.section--tabs-participation .section__participation .participation__banner .banner__content .banner__actions .btn,
section.section--tabs-participation .section__results .results__stats .stat-card .stat-card__icon .fa,
section.section--tabs-participation .section__expediente .results__stats .stat-card .stat-card__icon .fa,
section.section--tabs-participation .section__comments .results__stats .stat-card .stat-card__icon .fa,
section.section--tabs-participation .section__agenda .results__stats .stat-card .stat-card__icon .fa,
section.section--tabs-participation .section__results .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__expediente .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__comments .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__agenda .results__stats .stat-card .stat-card__number,
section.section--tabs-participation .section__results h4,
section.section--tabs-participation .section__expediente h4,
section.section--tabs-participation .section__comments h4,
section.section--tabs-participation .section__agenda h4,
section.section--tabs-participation .section__expediente .expediente__list .expediente__item .expediente__icon .fa,
section.section--tabs-participation .section__comments .comments__form h4,
section.section--tabs-participation .section__comments .comments__list h4,
section.section--tabs-participation .section__comments .comments__list .comment .comment__avatar .fa,
section.section--tabs-participation .section__comments .comments__list .comment .comment__content .comment__actions button:hover,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__events .event .event__content .event__meta span .fa,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget h4,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__mini .calendar__header button:hover,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__mini .calendar__grid .calendar__dates .calendar__date:hover,
section.section--tabs-participation .section__agenda .agenda__calendar .calendar__widget .calendar__info ul li .fa,
section.section--agenda-global .agenda__calendar .calendar__grid .calendar__day.calendar__day--has-events .day__number,
header .header__nav .header__nav__nav ul li.header__nav__button .btn:hover,
.wp ul li:before,
.tabs .tabs__header .tab,
article.article--stat .article__stat__icon span,
article.article--stat .article__stat__number,
article.article--testimonial .article__body .article__quote span {
  color: var(--the-shire-color-primary);
}

article.article--stat .article__stat__label {
  color: var(--the-shire-color-text);
}

/* ============================================================
   PRIMARY — borders / stroke
   ============================================================ */
.btn,
.btn.btn--white,
header .header__nav .header__nav__nav ul li.header__nav__button .btn,
.tabs .tabs__header .tab {
  border-color: var(--the-shire-color-primary);
}
section.section--hero .section__body .section__content .section__date,
section.section--header .section__body .section__content .section__date,
section.section--tabs-participation .section__content .section__cta-box {
  border-left-color: var(--the-shire-color-primary);
}
section.section--tabs-participation .section__comments .comments__form .form__textarea:focus {
  border-color: var(--the-shire-color-primary);
}
section.section--agenda-global .agenda__header .agenda__header__nav .btn-nav:hover {
  border-color: var(--the-shire-color-primary);
}
section.section--agenda-global .agenda__legend .legend__items .legend__item .legend__color.legend__color--event {
  border-color: var(--the-shire-color-primary);
}
.form__loader .loader svg circle {
  stroke: var(--the-shire-color-primary);
}

/* ============================================================
   SECONDARY — backgrounds
   ============================================================ */
.btn.btn--secondary,
footer,
footer .footer__primary,
header .header__primary,
section.section--register,
section.section--tabs-participation .section__participation .participation__banner,
section.section--agenda-global .agenda__calendar .calendar__header .calendar__day-name,
.slider .slider-bullets .slider-bullet.slider-bullet-current,
section .section__content ul li:before {
  background-color: var(--the-shire-color-secondary);
}

/* ============================================================
   SECONDARY — text / color
   ============================================================ */
article.article--lote .article__body .article__min,
section.section--wp .section__footer .section__socials .section__social a {
  color: var(--the-shire-color-secondary);
}

/* ============================================================
   SECONDARY — borders
   ============================================================ */
.btn.btn--secondary,
article.article--lote .article__body .article__min {
  border-color: var(--the-shire-color-secondary);
}

/* ============================================================
   TEXTO MUTED
   ============================================================ */
.text-muted,
article.article--testimonial .article__header .article__info .article__role {
  color: var(--the-shire-color-text-muted);
}

/* ============================================================
   DEGRADADOS / TINTES (rgba derivados de la paleta)
   Uso: rgba(var(--the-shire-color-{name}-rgb), {alpha})
   Los tripletes -rgb se inyectan inline desde functions.php.
   ============================================================ */
article.article--stat .article__stat__icon {
  background-color: rgba(var(--the-shire-color-primary-rgb), 0.1);
}
article.article--testimonial .article__header .article__avatar {
  border-color: rgba(var(--the-shire-color-primary-rgb), 0.2);
}
article.article--stat .article__stat__description {
  color: rgba(var(--the-shire-color-text-rgb), 0.7);
}
article.article--testimonial .article__body .article__text {
  color: rgba(var(--the-shire-color-text-rgb), 0.85);
}

/* ============================================================
   BTN hovers (mantiene consistencia con overrides)
   ============================================================ */
.btn:hover {
  background-color: var(--the-shire-color-bg);
  color: var(--the-shire-color-text);
}
.btn.btn--white:hover {
  background-color: var(--the-shire-color-primary);
  color: var(--the-shire-color-bg);
}

/* ============================================================
   BOTONES — PRESET DE ESTILO (Customizer → "Estilo de Botones")
   Aplica a: .btn del tema + variantes, inputs submit/button nativos,
   y botones de Contact Form 7. Las variables --the-shire-btn-* se
   redefinen desde functions.php según el preset seleccionado.
   ============================================================ */
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
button[type="submit"],
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"],
.wpcf7-submit {
  border-radius: var(--the-shire-btn-radius);
  padding: var(--the-shire-btn-padding-y) var(--the-shire-btn-padding-x);
  border-width: var(--the-shire-btn-border-width);
  border-style: solid;
  font-weight: var(--the-shire-btn-font-weight);
  letter-spacing: var(--the-shire-btn-letter-spacing);
  text-transform: var(--the-shire-btn-text-transform);
  box-shadow: var(--the-shire-btn-shadow);
  transition: var(--the-shire-btn-transition);
}

.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="button"]:hover,
.wpcf7-submit:hover {
  box-shadow: var(--the-shire-btn-shadow-hover);
  transform: var(--the-shire-btn-transform-hover);
}

/* Inputs submit/button heredan el look del .btn primario del tema */
input[type="submit"],
input[type="button"],
button[type="submit"],
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"],
.wpcf7-submit {
  background-color: var(--the-shire-color-primary);
  border-color: var(--the-shire-color-primary);
  color: var(--the-shire-color-bg);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  line-height: 18px;
  min-width: 150px;
  text-align: center;
  display: inline-block;
}
input[type="submit"]:hover,
input[type="button"]:hover,
button[type="submit"]:hover,
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="button"]:hover,
.wpcf7-submit:hover {
  background-color: var(--the-shire-color-bg);
  color: var(--the-shire-color-text);
}

input[type="reset"] {
  background-color: var(--the-shire-color-bg);
  border-color: var(--the-shire-color-text-muted);
  color: var(--the-shire-color-text);
  cursor: pointer;
  font-family: inherit;
}

/* =====================================================================
   LOGOS — variante default + claro
   Cada contenedor renderiza ambos <img>; CSS alterna según modo.
   ===================================================================== */
.header__logo .logo--light,
.header__nav__isotipo .logo--light,
.footer__logo .logo--light {
  display: none;
}
html.dark-mode .header__logo .logo--default,
html.dark-mode .header__nav__isotipo .logo--default,
html.dark-mode .footer__logo .logo--default {
  display: none;
}
html.dark-mode .header__logo .logo--light,
html.dark-mode .header__nav__isotipo .logo--light,
html.dark-mode .footer__logo .logo--light {
  display: inline-block;
}

/* =====================================================================
   MODO OSCURO — Override de reglas hardcodeadas en main.css
   Las variables CSS del tema ya conmutan a la paleta oscura cuando
   <html> tiene la clase .dark-mode (ver the_shire_build_theme_vars()).
   Aquí redirigimos los selectores de main.css que usan colores
   hex fijos para que lean las mismas variables.
   ===================================================================== */
html.dark-mode {
  background-color: var(--the-shire-color-bg);
  color: var(--the-shire-color-text);
}
html.dark-mode body {
  background-color: var(--the-shire-color-bg);
  color: var(--the-shire-color-text);
}
html.dark-mode section,
html.dark-mode .section {
  background-color: var(--the-shire-color-bg);
  color: var(--the-shire-color-text);
}
/* Hero conserva el color primario en modo oscuro (marca) */
html.dark-mode section.section--hero {
  background-color: var(--the-shire-color-primary);
}
html.dark-mode section.section--hero .section__bg:after {
  background: linear-gradient(0deg, var(--the-shire-color-primary), transparent);
}
@media (min-width: 720px) {
  html.dark-mode section.section--hero .section__bg:after {
    background: linear-gradient(270deg, var(--the-shire-color-primary), transparent);
  }
}
html.dark-mode header,
html.dark-mode header .header__secondary,
html.dark-mode footer {
  background-color: var(--the-shire-color-bg-alt) !important;
  color: var(--the-shire-color-text);
}
html.dark-mode header .header__primary {
  background-color: var(--the-shire-color-bg) !important;
  color: var(--the-shire-color-text);
}
html.dark-mode header .header__primary a,
html.dark-mode header .header__nav .header__menu nav ul li a,
html.dark-mode header .header__nav .header__menu nav ul li ul li a {
  color: var(--the-shire-color-text) !important;
}
/* Dark mode: los enlaces heredan del sistema base porque las variables --the-shire-color-text
   y --the-shire-color-text-muted se intercambian automáticamente. */
html.dark-mode header .header__nav .header__menu nav ul li a:hover {
  color: var(--the-shire-color-text-muted) !important;
}
/* Footer en darkmode: mantener blanco sólido (fondo primary siempre oscuro) */
html.dark-mode footer a {
  color: #fff !important;
}
html.dark-mode footer a:hover {
  color: var(--the-shire-color-text-muted) !important;
}
/* Iconos de redes sociales conservan el color blanco en ambos modos */
html.dark-mode footer .footer__socials .footer__social a,
html.dark-mode footer .footer__socials .footer__social a:hover {
  color: #fff !important;
}
html.dark-mode header .header__nav .header__menu nav ul li ul {
  background-color: var(--the-shire-color-bg-alt) !important;
}
html.dark-mode header .header__nav .header__menu nav ul li ul li {
  border-bottom: 1px solid rgba(var(--the-shire-color-text-rgb), 0.1);
}
html.dark-mode header .header__nav .header__menu nav ul li ul li:hover {
  background-color: var(--the-shire-color-bg);
}
html.dark-mode .header__search input,
html.dark-mode input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
html.dark-mode textarea,
html.dark-mode select {
  background-color: var(--the-shire-color-bg-alt) !important;
  color: var(--the-shire-color-text) !important;
  border: 1px solid var(--the-shire-color-text-muted) !important;
}
html.dark-mode .form__element .form__input {
  background-color: var(--the-shire-color-bg-alt);
  border-color: var(--the-shire-color-text-muted) !important;
}
html.dark-mode .form__element .form__input input,
html.dark-mode .form__element .form__input select,
html.dark-mode .form__element .form__input textarea {
  background-color: transparent !important;
  border: 0 !important;
}
html.dark-mode input[type="checkbox"],
html.dark-mode input[type="radio"] {
  background-color: var(--the-shire-color-bg-alt) !important;
  border-color: var(--the-shire-color-text-muted) !important;
}
html.dark-mode input[type="checkbox"]:checked,
html.dark-mode input[type="radio"]:checked {
  background-color: var(--the-shire-color-primary) !important;
  border-color: var(--the-shire-color-primary) !important;
}
html.dark-mode .header__search input::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode select::placeholder {
  color: rgba(var(--the-shire-color-text-muted-rgb), 0.7) !important;
}
html.dark-mode .header__accessibility__btn {
  border-color: var(--the-shire-color-text-muted) !important;
  color: var(--the-shire-color-text) !important;
  background-color: transparent !important;
}
html.dark-mode .header__accessibility__btn:hover {
  background-color: var(--the-shire-color-primary) !important;
  color: var(--the-shire-color-bg) !important;
}
html.dark-mode .btn.btn--white {
  background-color: var(--the-shire-color-bg-alt) !important;
  color: var(--the-shire-color-text) !important;
  border-color: var(--the-shire-color-text-muted) !important;
}
html.dark-mode .btn.btn--white:hover {
  background-color: var(--the-shire-color-primary) !important;
  color: var(--the-shire-color-bg) !important;
}
html.dark-mode .card,
html.dark-mode .box {
  background-color: var(--the-shire-color-bg-alt);
  color: var(--the-shire-color-text);
  border-color: rgba(var(--the-shire-color-text-rgb), 0.12);
}

/* =====================================================================
   CAJAS DE CONTENIDO — fondo alternativo + borde gris
   Reemplaza los #fff hardcodeados de article y section__content por
   fondo alternativo del tema con borde sutil para destacar cada caja.
   El color del texto queda bindeado a --the-shire-color-text para que
   conmute correctamente entre modo claro y oscuro.
   ===================================================================== */
article,
section .section__content,
section.section--hero .section__body .section__content,
section.section--header .section__body .section__content {
  background-color: var(--the-shire-color-bg-alt);
  border: 1px solid rgba(var(--the-shire-color-text-rgb), 0.18);
  color: var(--the-shire-color-text);
}
html.dark-mode article,
html.dark-mode section .section__content,
html.dark-mode section.section--hero .section__body .section__content,
html.dark-mode section.section--header .section__body .section__content {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Texto interior adaptativo (libera los #13162f fijos de main.css) */
section .section__content,
section .section__content p,
section .section__content blockquote p,
section .section__content li,
article,
article p,
article .article__title,
article .article__description,
article .article__body p,
article .article__header p {
  color: var(--the-shire-color-text);
}

/* =====================================================================
   FOOTER — Fila inferior (links legales + powered by)
   Separada con borde blanco superior, 2 columnas: links a la izquierda
   y logo ResIT a la derecha. Stack en mobile.
   ===================================================================== */
footer .footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
@media (min-width: 720px) {
  footer .footer__bottom {
    flex-direction: row;
  }
}
footer .footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
@media (min-width: 720px) {
  footer .footer__legal {
    justify-content: flex-start;
  }
}
footer .footer__legal a {
  font-size: 13px;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
footer .footer__legal a:hover {
  opacity: 1;
}
footer .footer__poweredby a {
  display: inline-block;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}
footer .footer__poweredby a:hover {
  opacity: 1;
}
footer .footer__poweredby img {
  height: 32px;
  width: auto;
  display: block;
}

/* ============================================================
   HERO — ALINEACIÓN DE LA CAJA
   Widget Elementor: TheShire_SectionHero
   ============================================================ */
@media (min-width: 720px) {
  section.section--hero.section--hero-align-left .section__body {
    justify-content: flex-start !important;
  }
  section.section--hero.section--hero-align-center .section__body {
    justify-content: center !important;
  }
  section.section--hero.section--hero-align-right .section__body {
    justify-content: flex-end !important;
  }
}

/* Sin overlay degradado: el fondo ocupa todo el ancho */
section.section--hero.section--hero-no-overlay .section__bg:after {
  display: none !important;
}
@media (min-width: 720px) {
  section.section--hero.section--hero-no-overlay .section__bg {
    max-width: 100% !important;
  }
}

/* ============================================================
   HERO — ESTILOS DE LA ETIQUETA (section__label)
   ============================================================ */
section .section__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 12px;
}
section .section__label > .fa {
  font-size: 12px;
}

/* Por defecto: línea lateral (estilo original section__date) */
section .section__label--default {
  padding: 4px 0 4px 8px;
  border-left: 3px solid var(--the-shire-color-secondary, #fac11c);
  color: var(--the-shire-color-text);
}

/* Píldora sólida */
section .section__label--pill-solid {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--the-shire-color-primary);
  color: #fff;
}

/* Píldora con borde */
section .section__label--pill-outline {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--the-shire-color-primary);
  color: var(--the-shire-color-primary);
  background: transparent;
}

/* Cuadrado sólido */
section .section__label--square-solid {
  padding: 6px 12px;
  border-radius: 2px;
  background: var(--the-shire-color-primary);
  color: #fff;
}

/* Cuadrado con borde */
section .section__label--square-outline {
  padding: 5px 11px;
  border-radius: 2px;
  border: 1px solid var(--the-shire-color-primary);
  color: var(--the-shire-color-primary);
  background: transparent;
}

/* Minimal: solo texto en mayúsculas */
section .section__label--minimal {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--the-shire-color-text-muted);
  font-size: 11px;
}

/* Variante blanca sobre fondos oscuros (hero con imagen) */
section.section--hero .section__content .section__label--pill-outline,
section.section--hero .section__content .section__label--square-outline {
  /* mantener color primary */
}

/* ============================================================
   BOTÓN SECUNDARIO — usa color secundario del tema
   ============================================================ */
.btn.btn--secondary {
  background: var(--the-shire-color-secondary) !important;
  color: #fff !important;
  border-color: var(--the-shire-color-secondary) !important;
}
.btn.btn--secondary:hover {
  background: var(--the-shire-color-primary) !important;
  color: #fff !important;
  border-color: var(--the-shire-color-primary) !important;
}