/*
Theme Name: RDG Base
Theme URI:
Author: RDG
Author URI:
Description: Tema base clásico propio, sin dependencias de terceros. Punto de partida reutilizable para proyectos.
Version: 1.0.5
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rdg-base
*/

/* ===========================================================
   Estilos base mínimos. Crecerán a medida que avancemos.
   =========================================================== */

:root {
  /* Identidad Desinfecciones 360 (extraída del logo) */
  --rdg-verde: #0c703a; /* Color de la marca */
  --rdg-verde-oscuro: #054f28; /* Verde para estados hover */
  --rdg-tinta: #2a2e37; /* Texto principal */
  --rdg-gris: #f2f5fa; /* Fondos y bordes suaves */
  --rdg-blanco: #ffffff;

  /* Color de acento (realces, CTA destacada). Configurable en Opciones del Tema. */
  --rdg-acento: #fdd000; /* Amarillo de marca */
  --rdg-acento-texto: #1a1a1a; /* Texto legible sobre el acento */

  /* Alias semánticos que usa el tema */
  --color-texto: var(--rdg-tinta);
  --color-fondo: var(--rdg-blanco);
  --color-enlace: var(--rdg-verde);
  --color-enlace-hover: var(--rdg-verde-oscuro);

  --ancho-max: 1280px;
  --espacio: 1rem;

  /* Tipografía (las fuentes se cargan aparte; con respaldo al sistema) */
  --fuente-texto:
    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --fuente-titulos: "Poppins", var(--fuente-texto);

  /* Tamaños de los títulos (configurables en Opciones del Tema) */
  --h1: 2.4rem;
  --h2: 2rem;
  --h3: 1.5rem;
  --h4: 1.25rem;

  /* Botones (configurables en Opciones del Tema) */
  --btn-primary-fondo: var(--rdg-verde);
  --btn-primary-texto: #ffffff;
  --btn-secondary-fondo: var(--rdg-tinta);
  --btn-secondary-texto: #ffffff;
  --btn-default-fondo: var(--rdg-gris);
  --btn-default-texto: var(--rdg-tinta);
}

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

body {
  margin: 0;
  color: var(--color-texto);
  background: var(--color-fondo);
  font-family: var(--fuente-texto);
  line-height: 1.6;
  animation: rdg-fade-in 480ms ease-out both;
}

/* Fade-in del body al cargar la página. Solo opacidad (acelerado por GPU). */
@keyframes rdg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Respeta la preferencia del sistema "reducir movimiento". */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}

a {
  color: var(--color-enlace);
  text-decoration: none;
}

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

/* Títulos con la tipografía de marca */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fuente-titulos);
}

/* Tamaños de título (las variables las controla el Personalizador) */
h1 {
  font-size: var(--h1);
}
h2 {
  font-size: var(--h2);
}
h3 {
  font-size: var(--h3);
}
h4 {
  font-size: var(--h4);
}

.text-primary {
  color: var(--rdg-verde);
}
.text-center {
  text-align: center;
}
.margin-top-remove {
  margin-top: 0px;
}
.margin-bottom-remove {
  margin-bottom: 0px;
}

.margin-top {
  margin-top: 25px;
}
.margin-bottom {
  margin-bottom: 25px;
}

.remove-margin {
  margin: 0px;
}

img {
  max-width: 100%;
  height: auto;
}

/* Contenedor centrado reutilizable */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--espacio);
}

.flex {
  display: flex;
}

.flex-between {
  justify-content: space-between;
}
.flex-middle {
  align-items: center;
}

/* Barra superior (toolbar): área de widgets, solo aparece si tiene bloques */
.sitio-toolbar {
  background: var(--rdg-verde);
  color: var(--rdg-blanco);
  font-size: 0.9rem;
  padding-block: 0.5rem;
}

.sitio-toolbar .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio);
  align-items: center;
}

.sitio-toolbar .toolbar-item {
  margin: 0;
  flex: 1; /* el bloque interno (Fila) ocupa todo el ancho y reparte izquierda/derecha */
}

.sitio-toolbar a {
  color: var(--rdg-blanco);
  text-decoration: underline;
}

.sitio-cabecera {
  padding-block: var(--espacio);
  background-color: var(--color-fondo);
  box-shadow: 0px 0px 5px 0px #f5f5f5;
  /* Por encima del contenido y de los modales de UIkit (.uk-modal = 1010), pero
     por debajo del offcanvas (99999), que debe seguir tapándolo todo. */
  z-index: 9999;
}

/* Estado sticky: sombra un pelín más marcada para que se despegue del contenido al hacer scroll. */
.rdg-cabecera-sticky {
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.08);
}

/* Si hay barra de admin de WordPress arriba, dejamos hueco para que el header sticky no se monte. */
body.admin-bar .rdg-cabecera-sticky {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar .rdg-cabecera-sticky {
    top: 46px;
  }
}

.sitio-titulo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.sitio-titulo a {
  text-decoration: none;
  color: inherit;
}

.sitio-descripcion {
  margin: 0.25rem 0 0;
  color: #666;
  font-size: 0.95rem;
}

/* Logo personalizado en la cabecera */
.sitio-logo img,
.sitio-logo .custom-logo {
  height: 80px;
  width: auto;
  display: block;
}

.sitio-navegacion ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio);
  list-style: none;
  margin: 0px;
  padding: 0;
}

ul#menu-main-menu li > a {
  position: relative;
  text-decoration: none;
  padding: 0px 5px;
  text-transform: uppercase;
  font-size: 15px;
}

ul#menu-main-menu li > a::before {
  content: "";
  position: absolute;
  left: auto;
  right: 0px;
  bottom: -11px;
  height: 2px;
  width: 0;
  transition: all 0.3s ease-in-out 0s;
  background-color: #fdd000;
}

ul#menu-main-menu .current-menu-item > a::before {
  width: 100%;
}

ul#menu-main-menu li:hover > a::before {
  width: 100%;
  left: 0;
  right: auto;
}

/* --- Menú móvil: botón hamburguesa + panel offcanvas (UIkit) --- */
/* El botón solo aparece en móvil (uk-hidden@m lo gestiona en el markup). */
.rdg-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--rdg-verde);
}

.rdg-menu-toggle:hover {
  color: var(--rdg-verde-oscuro);
}

/* Panel offcanvas con la identidad de marca: fondo verde y texto blanco
   (sobrescribe el gris oscuro por defecto de UIkit). */
.rdg-offcanvas .uk-offcanvas-bar {
  background: var(--rdg-verde);
}

.sitio-navegacion-movil .uk-nav > li > a {
  text-transform: uppercase;
  font-size: 15px;
  color: var(--rdg-blanco);
}

.sitio-navegacion-movil .uk-nav > li > a:hover,
.sitio-navegacion-movil .uk-nav > li > a:focus {
  color: var(--rdg-blanco);
}

/* Elemento activo: verde un poco más oscuro para resaltarlo. */
.sitio-navegacion-movil .uk-nav > li.current-menu-item > a,
.sitio-navegacion-movil .uk-nav > li.current_page_item > a,
.sitio-navegacion-movil .uk-nav > li.uk-active > a {
  color: var(--rdg-blanco);
  background: var(--rdg-verde-oscuro);
}

.sitio-contenido {
  padding-block: calc(var(--espacio) * 2);
}

.entrada + .entrada {
  margin-top: calc(var(--espacio) * 2);
  padding-top: calc(var(--espacio) * 2);
  border-top: 1px solid #eee;
}

.entrada-titulo {
  margin: 0 0 0.5rem;
}

.sitio-pie {
  padding-block: var(--espacio);
  border-top: 1px solid #eee;
  color: #666;
  font-size: 0.9rem;
  background-color: rgb(10 140 69 / 20%);
}

/* --- Breadcrumb (migas de pan) --- */
/* Banda exterior a ancho completo con fondo suave (mismo verde que el footer). */
.breadcrumb-banda {
  background-color: rgb(10 140 69 / 20%);
  border-bottom: 1px solid rgb(10 140 69 / 15%);
}

/* El nav interno respira un poco arriba/abajo; .contenedor ya da el alineado. */
.breadcrumb-banda .rdg-breadcrumb {
  margin: 0;
  padding-block: 0.6rem;
}

/* --- Metadatos, imágenes y archivos --- */
.entrada-meta {
  margin: 0.25rem 0 0;
  color: #666;
  font-size: 0.9rem;
}

/* Tags (post_tag) en la meta del single, tras la fecha. */
.entrada-meta-sep {
  margin: 0 0.5rem;
  color: #bbb;
}

.entrada-meta-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}

.entrada-tag {
  color: var(--color-enlace);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.entrada-tag:hover {
  text-decoration: underline;
}

.entrada-imagen {
  margin-block: var(--espacio);
}

/* --- Vista full (single de servicio/producto/entrada): imagen + contenido en  dos columnas. --- */
.grid-child-1-2 {
  display: grid;
  gap: calc(var(--espacio) * 2);
  grid-template-columns: 1fr;
}
.nav-links {
  display: flex;
  justify-content: space-between;
}

@media (min-width: 48rem) {
  .grid-child-1-2:has(.entrada-imagen) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.grid-child-1-2 .entrada-imagen {
  margin: 0;
}

.grid-child-1-2 .entrada-imagen img {
  width: 100%;
  border-radius: 12px;
}

/* Evita el doble margen superior al inicio de cada columna. */
.grid-child-1-2 .entrada-contenido > :first-child {
  margin-top: 0;
}

/* Variante "header inline": cuando el título de un single de catálogo se pinta
   dentro de .entrada-contenido (al lado de la imagen) en vez de arriba del todo. */
.entrada-cabecera--inline {
  margin: 0 0 1rem;
}

.entrada-cabecera--inline .entrada-titulo {
  margin-top: 0;
}

/* Variante "imagen a la derecha": invierte el orden de las columnas vía CSS.
   La imagen es siempre el primer hijo del grid; con order:2 la mandamos al final. */
@media (min-width: 48rem) {
  .grid-child-1-2--img-der .entrada-imagen {
    order: 2;
  }
}

/* Variante "imagen sobre el título": la imagen va FUERA del grid (la pinta el
   template antes de .entrada-cabecera). Estilo del bloque superior. */
.entrada-imagen--top {
  margin: 0 0 calc(var(--espacio) * 1.5);
}

.entrada-imagen--top img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

.archivo-cabecera {
  margin-bottom: calc(var(--espacio) * 2);
}

.archivo-titulo {
  margin: 0;
}

.error-404 {
  text-align: center;
}

/* --- Formulario de búsqueda --- */
.formulario-busqueda {
  display: flex;
  gap: 0.5rem;
}

.formulario-busqueda input[type="search"] {
  flex: 1;
  padding: 0.5rem;
}

/* Texto solo para lectores de pantalla (accesibilidad) */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-link "Saltar al contenido": oculto, pero visible al recibir foco con el teclado. */
.skip-link.screen-reader-text:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 10px 16px;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--rdg-verde);
  color: var(--rdg-blanco);
  border-radius: 4px;
  z-index: 100000;
  text-decoration: none;
}

/* Paginación */
.pagination {
  margin-top: calc(var(--espacio) * 2);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* --- Layout con barra lateral --- */
.sitio-layout {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--espacio);
  display: grid;
  gap: calc(var(--espacio) * 2);
  grid-template-columns: 1fr;
}

/* --- Single de artículo: layout 70/30 propio (lateral con post-aside o fallback "Últimos artículos") --- */
.single-post-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--espacio) * 2);
}

@media (min-width: 48rem) {
  .single-post-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  }
}

.single-post-aside {
  min-width: 0;
}

.post-aside-bloque + .post-aside-bloque {
  margin-top: 1.5rem;
}

.post-aside-titulo {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rdg-verde);
}

.post-aside-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-aside-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-bottom: 1px solid #eee;
}

.post-aside-item:last-child {
  border-bottom: none;
}

.post-aside-thumb {
  flex: 0 0 70px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  line-height: 0;
}

.post-aside-thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  display: block;
}

.post-aside-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.post-aside-item-titulo {
  display: block;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  margin-bottom: 0.2rem;
  text-decoration: none;
}

.post-aside-item-titulo:hover {
  color: var(--color-enlace);
}

.post-aside-item-fecha {
  font-size: 0.8rem;
  color: #888;
}

.contenido-principal {
  padding-block: calc(var(--espacio) * 2);
  min-width: 0;
}

.widget-titulo {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

/* --- Alineaciones del editor de bloques --- */
.aligncenter {
  display: block;
  margin-inline: auto;
}

.alignwide {
  margin-inline: calc(-1 * var(--espacio));
}

.alignfull {
  margin-inline: calc(50% - 50vw);
  max-width: 100vw;
}

/* --- Bloques y crédito del pie --- */
.sitio-pie-widgets {
  margin-bottom: calc(var(--espacio) * 1.5);
}

/* Fila inferior siempre visible: copyright a un lado, crédito al otro. */
.powered {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.powered p.wp-block-paragraph {
  margin: 0px;
}

.sitio-pie-widgets svg.e-font-icon-svg {
  width: 20px;
  fill: #0a8c45;
  margin-right: 5px;
}

.sitio-pie-widgets ul.elementor-icon-list-items {
  list-style: none;
  padding-left: 0px;
}

.sitio-pie-widgets ul.elementor-icon-list-items > li:not(:last-child) {
  margin-bottom: 10px;
}

.sitio-pie-widgets {
  padding-top: 25px;
}

/* Menú del pie: en 2 columnas y sin viñetas, en móvil y escritorio por igual.
   Selector ESTABLE por clase (el id #menu-main-menu-N lo cambia WordPress según
   cuántos menús se rendericen, así que apuntar al id no era fiable). */
.sitio-pie .widget_nav_menu ul.menu {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.sitio-pie .widget_nav_menu ul.menu > li {
  width: 50%;
}

.menu-main-menu-container {
  width: 100%;
  max-width: 75%;
}

.sitio-pie-widgets .wp-block-heading {
  margin-bottom: 10px;
  margin-top: 15px;
}

.sitio-pie-widgets .wp-block-paragraph {
  margin: 0px;
}

.sitio-pie-widgets .widget_block {
  border-bottom: 1px solid #cccccc;
}

.sitio-pie-widgets .widget_block > div {
  margin-bottom: 0px;
}

.sitio-pie-widgets + .wp-block-columns {
  margin-bottom: 0px;
}

/* --- Portada modular por widgets (front-page.php) --- */

.home-bloque {
  margin: 0;
}

/* Bloques de contenido (todo lo que no sea el slideshow). */
.home-bloque:not(.widget_rdg_widget_slideshow) {
  padding-block: clamp(2.75rem, 5vw, 4.75rem);
}

/* Contener el contenido de esos bloques y centrarlo. */
.home-bloque:not(.widget_rdg_widget_slideshow) > * {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--espacio);
}

/* Fondo alterno: las secciones pares llevan un gris muy suave. */
.home-bloque:not(.widget_rdg_widget_slideshow):nth-of-type(even) {
  background: var(--rdg-gris);
}

/* Título de sección: más presencia + realce de acento, sin las líneas de UIkit. */
.home-bloque-titulo {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  text-align: center;
  margin: 0 auto 2rem;
}

.home-bloque-titulo.uk-heading-line > span::before,
.home-bloque-titulo.uk-heading-line > span::after {
  display: none; /* ocultamos las líneas laterales nativas de UIkit */
}

.home-bloque-titulo::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 0.85rem auto 0;
  background: var(--rdg-acento);
  border-radius: 2px;
}

/* --- Botones (colores configurables en Opciones del Tema) --- */
.boton,
.wp-block-button__link,
input[type="submit"] {
  display: inline-block;
  padding: 0.6em 1.3em;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

/* Primario = estilo por defecto de los botones de bloque y de envío */
.boton-primary,
.wp-block-button__link,
input[type="submit"] {
  background-color: var(--btn-primary-fondo);
  color: var(--btn-primary-texto);
}

.boton-secondary {
  background-color: var(--btn-secondary-fondo);
  color: var(--btn-secondary-texto);
}

.boton-default {
  background-color: var(--btn-default-fondo);
  color: var(--btn-default-texto);
}

/* Botón de bloque con estilo "contorno" */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--btn-primary-fondo);
  border-color: currentColor;
}

/* Estado hover común: un punto más oscuro, sea cual sea el color elegido */
.boton:hover,
.boton:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
input[type="submit"]:hover {
  filter: brightness(0.93);
  text-decoration: nonel;
}

/* --- Armonizar UIkit con la marca RDG --- */
/* (El style.css del tema se carga después de UIkit, así que estos valores ganan.) */
.uk-button-primary {
  background-color: var(--btn-primary-fondo);
  color: var(--btn-primary-texto);
}

.uk-button-secondary {
  background-color: var(--btn-secondary-fondo);
  color: var(--btn-secondary-texto);
}

.uk-button-default {
  background-color: var(--btn-default-fondo);
  color: var(--btn-default-texto);
}

.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-button-secondary:hover,
.uk-button-secondary:focus,
.uk-button-default:hover,
.uk-button-default:focus {
  filter: brightness(0.93);
}

.uk-link,
.uk-link-toggle {
  color: var(--color-enlace);
}

.block-nosotros img.wp-image-165.size-full {
  border-radius: 20px;
  transition: all 0.3s ease-in-out 0s;
  transform: scale(0.9);
}

.block-nosotros img.wp-image-165.size-full:hover {
  transform: scale(1);
}

.wp-block-button:hover,
.wp-block-button__link:hover,
.uk-button:not(.uk-button-text):hover {
  background-color: #fdd000 !important;
  color: #333333 !important;
  border-color: #fdd000 !important;
  transition: all 0.3s ease-in-out 0s;
  text-decoration: none;
}

.uk-button:not(.uk-button-text),
.wp-block-button,
.wp-block-button__link {
  border-radius: 10px;
}

.breadcrumb-banda {
  background-color: rgb(10 140 69 / 20%);
  padding: 15px 0px;
}

ul.uk-breadcrumb.rdg-breadcrumb {
  margin-bottom: 0px;
}

.entrada-contenido .rdg-grid + .rdg-seccion-cabecera {
  padding-top: 50px;
}
.category-articulos .uk-card.uk-card-default {
  position: relative;
}

.category-articulos .uk-card.uk-card-default .rdg-card-tags {
  position: absolute;
  top: 0px;
  background: #fdd000;
  display: inline;
  width: 140px;
  text-align: center;
  padding: 8px 0px;
  border-radius: 5px 5px 0px 5px;
  right: 0px;
}

.category-articulos .uk-card.uk-card-default .rdg-card-tags > a {
  text-decoration: none;
  font-size: 14px;
  text-transform: capitalize;
}

footer.sitio-pie p,
footer.sitio-pie a:not(.wp-block-social-link-anchor) {
  color: #0c703a;
  font-weight: 500;
  font-size: 14px;
}

footer.sitio-pie a {
  text-decoration: none;
}

footer.sitio-pie a:hover {
  color: #333333;
}

/* Menú del pie en línea, con separadores entre elementos. Se escribe como una
   lista de bloques en el editor, añadiéndole la clase "list-footer-menu". */
ul.wp-block-list.list-footer-menu {
  list-style: none;
  padding-left: 0px;
  display: flex;
  align-items: center;
}

ul.wp-block-list.list-footer-menu > li:not(:last-child) {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 2px solid #bfbfbf;
}
ul.uk-breadcrumb.rdg-breadcrumb > li > a,
ul.uk-breadcrumb.rdg-breadcrumb > li > span {
  color: #0c703a;
  font-weight: 500;
}
div#rdg-offcanvas {
  z-index: 99999;
}

.uk-offcanvas-bar {
  padding: 0px;
}

.uk-offcanvas-bar ul.uk-nav > li > a {
  padding: 10px;
}

.uk-offcanvas-bar ul.uk-nav {
  padding-top: 35px;
}
.page-id-22 h1.entrada-titulo,
.page-id-18 h1.entrada-titulo {
  display: none;
}