/* =====================================================================
   Marca — calcularirpf.es
   Hoja GLOBAL (se carga en todo el sitio, ver functions.php).
   Fuente única de colores, tipografía y componentes comunes: cabecera,
   pie, tarjetas, cuadrícula de entradas (Content Views) y sidebar.
   La paleta sale del logo: azul marino #0b2d5e · azul #1268b8 · claro #3f9fe1.

   Solo presentación: ningún texto del contenido se modifica desde aquí.
   ===================================================================== */

/* ---- Tipografía: Inter variable, alojada en el propio tema ---- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/inter-latin-wght-normal.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 ---- */
:root {
    /* Marca */
    --marca:          #0b2d5e;   /* azul marino: titulares, footer, degradados */
    --accion:         #1268b8;   /* azul: botones, enlaces, acentos */
    --accion-hover:   #0e5a9e;
    --claro:          #3f9fe1;   /* azul claro del icono */
    --tinte:          #e8f2fb;   /* fondos suaves y etiquetas */

    /* Datos: verde = dinero que entra, rojo = lo que se paga (no usar de adorno) */
    --verde:          #1D9E75;
    --rojo:           #c62828;
    --rojo-light:     #fff4f4;

    /* Tramos del IRPF: una sola gama de azul, de claro (19 %) a oscuro (45 %) */
    --tramo-1:        #8ec3ee;
    --tramo-2:        #4f9fe0;
    --tramo-3:        #1268b8;
    --tramo-4:        #0e4d91;
    --tramo-5:        #0b2d5e;

    /* Neutros */
    --texto:          #1f2933;
    --texto-suave:    #64748b;
    --fondo:          #f3f6fb;
    --linea:          #e3e9f2;
    --gris:           #888780;

    /* Tarjeta única: widgets, artículos, entradas y paneles de la calculadora */
    --card-radio:        16px;
    --card-borde:        1px solid var(--linea);
    --card-sombra:       0 2px 4px rgba(11, 45, 94, 0.04), 0 8px 24px rgba(11, 45, 94, 0.07);
    --card-sombra-hover: 0 14px 36px rgba(11, 45, 94, 0.16);

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

    /* Nombres que ya usa estilos.css (calculadora): apuntan a la paleta de marca */
    --azul:         var(--accion);
    --azul-dark:    var(--accion-hover);
    --azul-deep:    var(--marca);
    --azul-mid:     #0f3c74;
    --azul-light:   var(--tinte);
    --gris-light:   var(--fondo);
    --borde:        var(--card-borde);
    --radio:        var(--card-radio);
    --radio-sm:     10px;
    --sombra:       var(--card-sombra);
    --sombra-lg:    var(--card-sombra-hover);
    --sombra-btn:   0 6px 16px rgba(11, 45, 94, 0.28);

    /* GeneratePress: enlaces/botones usan --accent y el fondo usa --base-2 */
    --accent:       var(--accion);
    --base-2:       var(--fondo);
}

/* ---- Base ----
   Esta hoja se carga después de GeneratePress, así que gana con el mismo
   selector. El prefijo "body" en las reglas siguientes sube un punto la
   especificidad para imponerse al CSS adicional del Personalizador (que se
   imprime después) sin recurrir a !important. */
body,
button,
input,
select,
textarea {
    font-family: var(--fuente);
}

/* Necesario para bandas a todo el ancho (100vw) sin barra horizontal. */
body { overflow-x: clip; }

:focus-visible {
    outline: 2px solid var(--accion);
    outline-offset: 2px;
}

::selection { background: var(--tinte); color: var(--marca); }

/* ---- Titulares ---- */
body h1,
body h2,
body h3,
body h4 {
    color: var(--marca);
    letter-spacing: -0.015em;
}

body h1 { font-weight: 800; }

/* GeneratePress deja los subtítulos en peso normal; con la fuente de marca
   quedan flojos. */
body h2,
body h3,
body h4 { font-weight: 700; }

/* =====================================================================
   CABECERA Y NAVEGACIÓN
   ===================================================================== */

body .site-header.has-inline-mobile-toggle {
    position: sticky;
    top: 0;
    z-index: 999;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(1.5) blur(10px);
    backdrop-filter: saturate(1.5) blur(10px);
    border-radius: 0;
    border-bottom: var(--card-borde);
    box-shadow: 0 1px 0 rgba(11, 45, 94, 0.03), 0 8px 24px rgba(11, 45, 94, 0.05);
}

/* GeneratePress pinta el menú con fondo blanco sólido, que se vería como un
   bloque sobre la cabecera translúcida. Los submenús desplegables no se tocan. */
body .main-navigation,
body #site-navigation.main-navigation.toggled,   /* GP lo pinta con un selector de id */
body .main-navigation .inside-navigation {
    background: transparent;
}

/* Botón de menú (móvil): sin cuadro gris, con el mismo lenguaje de píldora */
body .main-navigation .menu-toggle,
body .main-navigation .menu-toggle:hover,
body .main-navigation .menu-toggle:focus {
    background: transparent;
    color: var(--marca);
    border-radius: 10px;
}

body .main-navigation .menu-toggle:hover,
body .main-navigation .menu-toggle:focus-visible {
    background: var(--tinte);
}

/* Menú móvil desplegado: GeneratePress pinta la lista con un gris propio */
@media (max-width: 768px) {
    body .main-navigation .main-nav ul,
    body .main-navigation .main-nav ul li,
    body .main-navigation .main-nav ul li a {
        background: transparent;
    }
}

body.admin-bar .site-header.has-inline-mobile-toggle { top: 32px; }

/* Móvil: la cabecera fija ocupaba ~120 px (casi una quinta parte de la pantalla,
   y más de un tercio con el teclado abierto), tapando el formulario mientras se
   rellena. En móvil ni es fija ni es grande. */
@media (max-width: 768px) {
    body .site-header.has-inline-mobile-toggle {
        position: relative;
        padding: 4px 16px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: #fff;
    }

    body .site-header .header-image,
    body .site-header .site-logo img {
        width: 136px;
        height: auto;
    }

    /* GeneratePress añade 20px 30px de relleno interior y un botón de menú de
       60 px de alto: se compactan (el botón queda de 44 px, tamaño táctil). */
    body .site-header .inside-header { padding: 6px 0; }

    body .site-header .main-navigation .menu-toggle {
        padding: 0 14px;
        line-height: 44px;
    }
}

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

body .main-navigation .main-nav ul li a {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 40px;
    padding: 0 16px;
    margin: 0 2px;
    color: var(--texto);
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
}

body .main-navigation .main-nav ul li a:hover,
body .main-navigation .main-nav ul li a:focus-visible,
body .main-navigation .main-nav ul li[class*="current-menu-"] > a {
    background: var(--tinte);
    color: var(--accion);
}

/* =====================================================================
   TARJETA ÚNICA — widgets del sidebar y artículos
   ===================================================================== */

body .sidebar .widget,
body .inside-article {
    background: #fff;
    border: var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
}

body .inside-article {
    padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* ---- Lectura de entradas y páginas ---- */
body .entry-title {
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    line-height: 1.2;
}

body .entry-content {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--texto);
}

body .entry-content h2 { margin-top: 2.2rem; }
body .entry-content h3 { margin-top: 1.8rem; }

body .entry-content a {
    color: var(--accion);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

body .entry-content a:hover { color: var(--marca); }

body .entry-content img,
body .entry-content figure img {
    border-radius: 12px;
}

body .entry-content blockquote {
    margin-left: 0;
    padding: 0.9rem 1.25rem;
    background: var(--tinte);
    border-left: 4px solid var(--accion);
    border-radius: 0 12px 12px 0;
    color: var(--marca);
    font-style: normal;
}

/* ---- Widgets del sidebar ---- */
body .sidebar .widget .widget-title,
body .sidebar-title {
    color: var(--marca);
}

body .sidebar .widget .widget-title {
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--tinte);
}

body .sidebar .widget ul li a:hover,
body .rpwwt-widget a:hover {
    color: var(--accion);
}

body .rpwwt-widget img {
    border-radius: 10px;
}

/* ---- CTA lateral (Taxdown): tarjeta de marca con la etiqueta de anuncio ---- */
body .taxdown-sidebar {
    padding: 1.4rem 1.25rem;
    border-radius: var(--card-radio);
    color: #fff;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(63, 159, 225, 0.45), transparent 60%),
        linear-gradient(145deg, var(--accion), var(--marca));
    box-shadow: var(--card-sombra-hover);
}

body .taxdown-sidebar .sidebar-title { color: #fff; }
body .taxdown-sidebar .sidebar-text  { color: rgba(255, 255, 255, 0.88); }
body .taxdown-sidebar .sidebar-note  { color: rgba(255, 255, 255, 0.7); }
body .taxdown-sidebar .sidebar-text a,
body .taxdown-sidebar .sidebar-text a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

body .taxdown-btn {
    background: #fff;
    color: var(--marca) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

body .taxdown-btn:hover {
    background: var(--tinte);
    transform: translateY(-1px);
}

/* =====================================================================
   CUADRÍCULA DE ENTRADAS — Content Views
   ===================================================================== */

body .pt-cv-view.pt-cv-blockgrid .pt-cv-page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.5rem;
}

/* Content Views añade pseudo-elementos de "clearfix" que, dentro de un grid,
   ocuparían celdas. */
body .pt-cv-view .pt-cv-page::before,
body .pt-cv-view .pt-cv-page::after {
    display: none;
}

body .pt-cv-view .pt-cv-content-item {
    width: auto !important;
    float: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #fff;
    border: var(--card-borde);
    border-radius: var(--card-radio);
    box-shadow: var(--card-sombra);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body .pt-cv-view .pt-cv-content-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-sombra-hover);
}

body .pt-cv-view .pt-cv-thumb-wrapper {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--tinte);
}

body .pt-cv-view .pt-cv-thumb-wrapper a,
body .pt-cv-view .pt-cv-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
}

body .pt-cv-view .pt-cv-thumbnail {
    margin: 0 !important;
    object-fit: contain; /* la imagen entera: muchas llevan texto y no deben recortarse */
    border-radius: 0;
    transition: transform 0.5s ease;
}

body .pt-cv-view .pt-cv-content-item:hover .pt-cv-thumbnail {
    transform: scale(1.05);
}

body .pt-cv-view .pt-cv-remain-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* Content Views fija padding: 0 15px, que deja el título pegado a la imagen */
    padding: 1.3rem 1.4rem 1.4rem !important;
}

body .pt-cv-view .pt-cv-title {
    margin: 0 0 0.6rem !important;
    font-size: 1.08rem;
    line-height: 1.35;
}

body .pt-cv-view .pt-cv-title a {
    color: var(--marca);
    font-weight: 700;
    text-decoration: none;
}

body .pt-cv-view .pt-cv-content-item:hover .pt-cv-title a {
    color: var(--accion);
}

body .pt-cv-view .pt-cv-content {
    color: var(--texto-suave);
    font-size: 0.9rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "Leer más" como enlace con flecha, anclado al pie de la tarjeta.
   (El texto del botón se cambia en los ajustes de la vista de Content Views.) */
body .pt-cv-view .pt-cv-rmwrap {
    margin-top: auto;
    padding-top: 1rem;
}

body .pt-cv-view .pt-cv-readmore {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    background: none !important;
    border: 0 !important;
    box-shadow: none;
    color: var(--accion) !important;
    font-size: 0.88rem;
    font-weight: 700;
}

body .pt-cv-view .pt-cv-readmore::after {
    content: '→';
    transition: transform 0.2s ease;
}

body .pt-cv-view .pt-cv-content-item:hover .pt-cv-readmore::after {
    transform: translateX(4px);
}

/* ---- Paginación ---- */
/* Content Views fuerza display:inline-block !important en la lista y
   display:inline en los <li>, así que se mantiene el flujo en línea y los
   botones se separan con margen (no con flex/gap). */
body .pt-cv-pagination-wrapper {
    margin-top: 2rem;
}

body .pt-cv-wrapper .pagination > li {
    list-style: none;
    margin: 0;
}

/* Bootstrap (dentro de Content Views) redondea solo el primer y último botón
   y solapa los bordes; aquí cada botón es una píldora independiente. */
body .pt-cv-wrapper .pagination > li > a,
body .pt-cv-wrapper .pagination > li > span {
    margin: 0 0.4rem 0.4rem 0 !important;
    border-radius: 10px !important;
    float: none;
    display: inline-block;
    min-width: 40px;
    padding: 0.55rem 0.85rem;
    text-align: center;
    font-weight: 600;
    color: var(--marca);
    background: #fff;
    border: var(--card-borde);
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body .pt-cv-wrapper .pagination > li > a:hover {
    background: var(--tinte);
    border-color: var(--claro);
    color: var(--accion);
}

body .pt-cv-wrapper .pagination > li.active > a,
body .pt-cv-wrapper .pagination > li.active > span {
    background: var(--accion);
    border-color: var(--accion);
    color: #fff;
}

/* =====================================================================
   PIE DE PÁGINA
   (El CSS adicional oculta .site-info; aquí se muestra el pie de marca.)
   ===================================================================== */

body .site-footer {
    margin-top: 3.5rem;
    padding: 0;
    background:
        radial-gradient(ellipse 55% 140% at 92% 0%, rgba(63, 159, 225, 0.2), transparent 62%),
        var(--marca);
    border-radius: 0;
    box-shadow: none;
    color: #cbd5e1;
}

/* El widget de pie con los enlaces legales (Apariencia → Widgets) queda
   duplicado: el pie de marca ya los incluye. */
body #footer-widgets { display: none; }

body footer.site-info {
    display: block !important;
    background: transparent;
}

body .site-info .inside-site-info {
    display: block;
    max-width: 1200px;
    padding: 3.25rem 1.5rem 1.75rem;
    text-align: left;
}

.pie-marca__grid {
    display: grid;
    /* Una columna de marca fija y el resto se reparten el ancho: si falta una
       (p. ej. aún no hay guías), las demás se ajustan solas. */
    grid-template-columns: minmax(240px, 1.6fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: 2.5rem 2.5rem;
}

.pie-marca__nombre {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    text-decoration: none;
}

.pie-marca__nombre strong { color: var(--claro); font-weight: 800; }

.pie-marca__about p {
    max-width: 36ch;
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    line-height: 1.65;
    color: #b6c3d6;
}

.pie-marca__titulo {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--claro);
}

.pie-marca__col ul {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pie-marca__col a {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s;
}

.pie-marca__col a:hover,
.pie-marca__col a:focus-visible,
.pie-marca__nombre:hover { color: #fff; }

.pie-marca__col a:hover,
.pie-marca__col a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Títulos de noticias: máximo dos líneas */
.pie-marca__noticias a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pie-marca__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 2rem;
    margin-top: 2.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.8rem;
    line-height: 1.5;
    color: #94a3b8;
}

@media (max-width: 560px) {
    .pie-marca__grid { grid-template-columns: 1fr; gap: 2rem; }
    body .site-info .inside-site-info { padding: 2.5rem 1.25rem 1.5rem; }
}