/**
 * CSS Adaptado para WOFFICE v5.4
 * Basado en análisis de selectores v2.7 → v5.4
 * NOTA: Estos snippets reemplazan/complementan woffice_custom_css.txt
 */

/* ========================================
   1. MENÚ VERTICAL - CLASE NUEVA EN BODY
   ======================================== */

/* v2.7: body.menu-is-vertical → v5.4: body.vertical-modern-menu */

body.vertical-modern-menu #navigation {
    width: 100px;
    background: #000000;
    position: fixed;
    left: 0;
    top: 62px;
    height: calc(100% - 62px);
}

body.vertical-modern-menu.menu-is-closed #navigation.navigation-hidden {
    left: -100px;
}

body.vertical-modern-menu #main-content:not(.navigation-hidden),
body.vertical-modern-menu #main-header:not(.navigation-hidden),
body.vertical-modern-menu #main-footer:not(.navigation-hidden) {
    padding-left: 100px;
}

body.vertical-modern-menu #main-header:not(.navigation-hidden) #nav-left {
    padding-left: 100px;
}

/* ========================================
   2. SIDEBAR DERECHO - NUEVO WRAPPER
   ======================================== */

/* v2.7: #right-sidebar { ... } → v5.4: .is-right-sidebar #right-sidebar */

.is-right-sidebar {
    /* Contenedor del sidebar - estilos de wrapper */
}

/* Color de links en sidebar */
.is-right-sidebar #right-sidebar a {
    color: #000000;
}

/* Hover en links de sidebar */
.is-right-sidebar #right-sidebar nav ul li a:hover {
    background: #f0f0f6;
}

/* Widgets en sidebar */
.is-right-sidebar #right-sidebar .widget {
    border-color: #555555;
}

.is-right-sidebar #right-sidebar .widget .intern-padding {
    background: #f9f9fc;
    border-color: #f0f0f6;
}

.is-right-sidebar #right-sidebar .widget .intern-box.box-title {
    background: #f0f0f6;
    border-color: #f0f0f6;
}

.is-right-sidebar #right-sidebar .widget .intern-box.box-title h3 {
    text-transform: uppercase;
    color: #555555;
    font-weight: bold;
}

.is-right-sidebar #right-sidebar .widget .intern-box.box-title::after {
    background-color: #000000;
}

/* nth-child alternancia en widgets */
.is-right-sidebar #right-sidebar .widget:nth-child(odd) {
    background: #f9f9fc;
}

.is-right-sidebar #right-sidebar .widget:nth-child(odd) .intern-box.box-title h3 {
    color: #555555;
}

/* ========================================
   3. ARTICLES/POSTS - BOOTSTRAP 5 CARD
   ======================================== */

/* v2.7: article.box.content → v5.4: .blog-card-wrapper .card */

.blog-card-wrapper .card {
    background: #f9f9fc;
    border-color: #f0f0f6;
}

.blog-card-wrapper .card .card-body {
    background: #f9f9fc;
}

.blog-card-wrapper .card .card-footer {
    background: transparent;
}

.blog-card-wrapper .card .blog-title h2 a {
    color: #000000;
    text-decoration: none;
}

.blog-card-wrapper .card .blog-title h2 a:hover {
    color: #000000;
}

/* ========================================
   4. FOOTER WIDGETS - NUEVA CLASE
   ======================================== */

/* v2.7: #widgets → v5.4: #widgets.woffice-footer */

#widgets,
#widgets.woffice-footer {
    background-color: #000000;
    color: #ffffff;
}

#widgets .widget {
    border-color: #555555;
}

#widgets h3:after,
#widgets .widget.widget_search button {
    background-color: #ffcf00;
}

#widgets a,
#copyright a,
#extrafooter-layer h1 span {
    color: #ffcf00;
}

/* ========================================
   5. HEADER/NAVBAR - MAYORMENTE OK
   ======================================== */

#navbar {
    height: 60px;
    line-height: 60px;
    background-color: #000000;
}

#navbar #nav-user a#user-thumb {
    color: #ffffff;
}

#nav-left {
    height: 60px;
}

a#nav-trigger,
#nav-buttons a {
    color: #ffffff;
}

a#nav-trigger:hover,
#nav-buttons a:hover {
    color: #ffffff;
}

#nav-logo {
    width: 180px;
}

/* ========================================
   6. FEATURED BOX - INTACTO
   ======================================== */

#featuredbox .pagetitle,
#featuredbox .pagetitle h1 {
    color: #fff;
}

#featuredbox.centered .pagetitle > h1 {
    text-transform: uppercase;
    font-weight: bold;
}

#featuredbox .pagetitle {
    height: 106px;
}

#featuredbox.has-search .featured-background,
#featuredbox.has-search .pagetitle {
    height: 200px;
}

#featuredbox .featured-background {
    height: 150px;
    background-position: center center;
}

.featured-layer {
    background-color: #eeeeee;
    opacity: 1;
}

/* ========================================
   7. MAIN CONTENT - FLEXBOX AJUSTES
   ======================================== */

#main-content {
    background: #eeeeee;
}

#main-content #left-content {
    /* Bootstrap 5 flex en lugar de width calc */
    flex: 0 0 calc(75% - 25px);
}

/* ========================================
   8. COLORES Y ESTILOS GENÉRICOS
   ======================================== */

#content-container a {
    color: #000000;
}

.woffice-colored {
    color: #000000;
}

.progress-bar {
    background-color: #000000;
    background: linear-gradient(-30deg, #000000, #0a0a0a) !important;
}

.btn.btn-default {
    background-color: #000000 !important;
}

/* ========================================
   9. COPYRIGHT Y FOOTER GENERAL
   ======================================== */

#copyright {
    background-color: #000000;
    border-color: #ffcf00;
}

#copyright p,
#widgets p {
    color: #ffffff;
}

#extrafooter {
    border-color: #ffcc13;
}

#extrafooter-layer {
    background: rgba(0, 0, 0, 0.5);
}

/* ========================================
   10. ACCESIBILIDAD Y RESPONSIVO
   ======================================== */

@media only screen and (max-width: 992px) {
    body.vertical-modern-menu #main-content:not(.navigation-hidden),
    body.vertical-modern-menu #main-header:not(.navigation-hidden),
    body.vertical-modern-menu #main-footer:not(.navigation-hidden) {
        padding-left: 0;
    }

    .is-right-sidebar {
        display: none !important;
    }
}

@media only screen and (max-width: 600px) {
    #main-search .container {
        padding-top: 60px;
    }

    #featuredbox .pagetitle > h1,
    #featuredbox.has-search.is-404 .pagetitle > h1,
    #featuredbox.has-search.search-buddypress .pagetitle > h1 {
        font-size: 16px !important;
    }
}

/* ========================================
   NOTAS DE IMPLEMENTACIÓN
   ======================================== */

/*
   1. Este archivo COMPLEMENTA woffice_custom_css.txt
   2. Copiar selectores específicos que apliquen a tu setup
   3. Validar visualmente en navegador (Inspector → Estilos)
   4. Mantener valores de color (#000000, #ffcf00, etc.) del original
   5. Revisar pseudo-elementos ::after y ::before en box-title visualmente
   6. Considerar agregar a Custom CSS del theme v5.4 o archivo separado en child theme
*/


/* ============ RACC migración: ajustes home ============ */
/* Ocultar title box "Homepage" (v5.4 lo añade, no estaba en v2.7) */
.page-id-2085 #featuredbox .pagetitle, .page-id-2085 .title-box, .page-id-2085 .woffice-title-box { display: none !important; } /* solo el titulo, NO el featuredbox que contiene el slider */
/* Búsqueda full-width del header: cerrada por defecto (como v2.7, solo icono lupa).
   Al pulsar la lupa (#search-trigger) el JS del theme añade .opened → ahí SÍ debe mostrarse.
   (Antes el display:none !important la mantenía oculta incluso abierta → la lupa "no hacía nada".) */
#main-search { display: none !important; }
#main-search.opened { display: block !important; background:#ffffff !important; position:relative !important; z-index:60 !important; padding:30px 0 34px !important; box-shadow:0 6px 16px rgba(0,0,0,.10) !important; }
/* === Búsqueda avanzada en la lupa: centrada, inputs grandes y uniformes === */
#main-search .container { max-width:1080px !important; margin:0 auto !important; float:none !important; }
#main-search form.searchandfilter > div { display:flex !important; flex-direction:column; align-items:center; gap:22px; }
#main-search form.searchandfilter ul { list-style:none; margin:0 auto; padding:0; max-width:740px; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:20px; }
#main-search form.searchandfilter ul > li { display:flex; flex-direction:column; justify-content:flex-end; width:225px; margin:0; padding:0; float:none; }
#main-search form.searchandfilter ul > li > h4 { margin:0 0 7px; padding:0; font-size:14px; font-weight:600; color:#fff; text-align:left; line-height:1.2; word-break:normal; }
#main-search form.searchandfilter input[type="text"],
#main-search form.searchandfilter input[type="search"],
#main-search form.searchandfilter input[type="date"],
#main-search form.searchandfilter select { width:100% !important; height:48px !important; box-sizing:border-box !important; margin:0 !important; padding:0 14px !important; font-size:15px !important; border:1px solid #ccc !important; border-radius:6px !important; background:#fff !important; color:#333 !important; }
#main-search form.searchandfilter input[type="submit"] { height:48px; min-width:160px; padding:0 30px; margin:0; font-size:15px; font-weight:700; cursor:pointer; border:0; border-radius:6px; background:#ffcc13; color:#000; }
/* === Buscador avanzado NATIVO (formulario .racc-adv-search del mu-plugin v2, sustituye al de S&F) ===
   El de S&F usaba labels blancos (invisibles sobre el fondo claro de la lupa); aquí labels oscuros +
   etiquetas Desde/Hasta. Botón nativo (submit fiable) en amarillo RACC. */
#main-search form.racc-adv-search { max-width:1000px; margin:0 auto; }
#main-search form.racc-adv-search ul { list-style:none; margin:0 auto; padding:0; max-width:770px; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:18px; }
#main-search form.racc-adv-search li.racc-f { display:flex; flex-direction:column; justify-content:flex-end; width:230px; margin:0; padding:0; float:none; }
#main-search form.racc-adv-search li.racc-f label { margin:0 0 7px; padding:0; font-size:14px; font-weight:600; color:#111111; text-align:left; line-height:1.2; }
#main-search form.racc-adv-search li.racc-f .racc-opt { font-weight:400; color:#8a8f99; font-size:11px; }
#main-search form.racc-adv-search input[type="text"],
#main-search form.racc-adv-search input[type="date"],
#main-search form.racc-adv-search select { width:100% !important; height:48px !important; box-sizing:border-box !important; margin:0 !important; padding:0 14px !important; font-size:15px !important; border:1px solid #ccc !important; border-radius:6px !important; background:#fff !important; color:#333 !important; }
/* display:block + position:static !important porque el theme oculta (display:none) y posiciona en
   absolute los <button> submit dentro de #main-search (salía gigante y encima de los inputs). */
#main-search form.racc-adv-search button[type="submit"] { display:block !important; position:static !important; width:100% !important; height:48px !important; padding:0 30px !important; margin:0 !important; font-size:15px !important; font-weight:700 !important; cursor:pointer !important; border:0 !important; border-radius:6px !important; background:#ffcf00 !important; color:#111111 !important; }
#main-search form.racc-adv-search button[type="submit"]:hover { background:#e6ba00; }
/* Check "Buscar por fecha" (fila propia) + fechas deshabilitadas en gris hasta marcarlo + dígitos oscuros */
#main-search form.racc-adv-search li.racc-f-datetoggle { flex:0 0 100% !important; max-width:100% !important; width:100% !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; }
#main-search form.racc-adv-search .racc-datecheck { display:inline-flex !important; align-items:center !important; gap:8px !important; font-size:14px !important; font-weight:600 !important; color:#111111 !important; cursor:pointer !important; margin:0 !important; }
#main-search form.racc-adv-search .racc-datecheck input[type="checkbox"] { width:18px !important; height:18px !important; min-height:0 !important; margin:0 !important; padding:0 !important; cursor:pointer !important; accent-color:#ffcf00 !important; }
/* CAUSA del texto de fecha "en rayas": un padre del form impone `line-height:0` y el input de fecha lo
   hereda → el ::-webkit-datetime-edit recorta los dígitos a una línea. Fix = line-height normal. NO se
   tocan los pseudo-fields ni el padding del edit (eso lo rompía aún más). Color oscuro + disabled gris. */
#main-search form.racc-adv-search input[type="date"] { color:#111111 !important; line-height:normal !important; }
#main-search form.racc-adv-search input[type="date"]::-webkit-datetime-edit { line-height:normal !important; }
#main-search form.racc-adv-search input[type="date"]:disabled { background:#f0f1f4 !important; color:#b8bcc6 !important; border-color:#e3e5ea !important; cursor:not-allowed !important; }
#main-search form.racc-adv-search input[type="date"]::-webkit-calendar-picker-indicator { opacity:.7 !important; }
/* ============ OVERLAY de carga al buscar: fondo negro translúcido + spinner amarillo RACC ============ */
.racc-search-overlay { position:fixed !important; inset:0 !important; background:rgba(0,0,0,.72) !important; z-index:99999 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:18px !important; }
.racc-search-overlay .racc-spinner { width:58px; height:58px; border:6px solid rgba(255,207,0,.25); border-top-color:#ffcf00; border-radius:50%; animation:racc-spin .8s linear infinite; }
.racc-search-overlay::after { content:'Buscando…' !important; color:#ffffff !important; font-size:16px !important; font-weight:600 !important; letter-spacing:.02em !important; }
@keyframes racc-spin { to { transform:rotate(360deg); } }
/* === RESULTADOS de búsqueda: 3 por línea + CARD con el look de la home (imagen full-width arriba,
   cuerpo gris, meta[fecha+categoría] → título → extracto, redondeada, SIN botón negro). La plantilla
   de resultados es `article.box` (distinta del grid de la home), así que recreamos el aspecto. === */
@media (min-width:993px){
  body.search-results #left-content .row { flex-wrap:wrap !important; align-items:stretch !important; gap:26px !important; }
  body.search-results #left-content .row > article.box {
    flex:0 0 calc(33.333% - 18px) !important; max-width:calc(33.333% - 18px) !important; width:auto !important;
    display:flex !important; flex-direction:column !important; padding:0 0 18px !important; margin:0 !important;
    background:#f4f4f4 !important; border-radius:14px !important; overflow:hidden !important; box-sizing:border-box !important;
  }
  body.search-results article.box .intern-thumbnail { order:1 !important; margin:0 !important; }
  body.search-results article.box .intern-box { order:2 !important; padding:14px 18px 0 !important; margin:0 !important; }
  body.search-results article.box .heading-container { order:3 !important; padding:4px 18px 0 !important; }
  body.search-results article.box .intern-padding.clearfix { order:4 !important; padding:6px 18px 0 !important; }
  /* la home no muestra botón "Seguir Leyendo" ni el contador de comentarios → fuera */
  body.search-results article.box .blog-button { display:none !important; }
  body.search-results article.box .post-metadatas li:last-child { display:none !important; }
  /* meta en una fila: fecha a la IZQUIERDA, categoría a la DERECHA (como date+likes de la home) */
  body.search-results article.box .post-metadatas { display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; margin:0 !important; padding:0 !important; }
  body.search-results article.box .post-metadatas li { margin:0 !important; float:none !important; display:inline-flex !important; align-items:center !important; }
}
/* Fecha, categoría y excerpt de las cards de resultados en NEGRO (el theme los pinta en lila/lavanda
   #8993BA). Fuera del media query para que también aplique en móvil. */
body.search-results article.box .post-metadatas,
body.search-results article.box .post-metadatas *,
body.search-results article.box .blog-sum-up,
body.search-results article.box .blog-sum-up * { color:#333333 !important; }
/* El menú horizontal: asegurar barra negra full-width con texto amarillo (paleta RACC) */
body.menu-is-horizontal #navigation,
body.menu-is-horizontal #mega-menu-wrap-primary { background: #000000 !important; }
/* Ocultar h1 "Homepage" (título de la página home) */
.home .post-title, .page-id-2085 .post-title, .page-id-2085 h1.post-title { display: none !important; }

/* ============ BANNER home (slider RevSlider no renderiza en v54; ponemos la imagen como fondo) ============ */
.page-id-2085 #rev_slider_5_1_wrapper,
.page-id-2085 #featuredbox rs-module-wrap,
.page-id-2085 #featuredbox .rev_slider_wrapper {
    background: url('https://people.racc.es/wp-content/uploads/2026/03/Banner-intranet.jpg') center center / cover no-repeat !important;
    min-height: 320px !important;
}
/* Reducir hueco gris entre menú y banner */
.page-id-2085 #featuredbox { padding: 0 !important; margin: 0 !important; }
.page-id-2085 #featuredbox .featured-background, .page-id-2085 #featuredbox .featured-layer { display: none !important; }

/* ============ FOOTER negro (paleta RACC) ============ */
#main-footer, #widgets.woffice-footer, .woffice-footer, .wcc-footer-wrapper { background:#000000 !important; }
#widgets.woffice-footer, #widgets.woffice-footer p, #widgets.woffice-footer li, #widgets.woffice-footer h3, #widgets.woffice-footer .widget-title { color:#ffffff !important; }
#widgets.woffice-footer a { color:#ffcf00 !important; }
#copyright { background:#000000 !important; border-top:1px solid #ffcf00 !important; }
#copyright p, #copyright a { color:#ffffff !important; }
#copyright a { color:#ffcf00 !important; }

/* ============ EXTRAFOOTER banda avatares ============ */
#extrafooter.woffice-extrafooter { position:relative; background:#222; border-top:3px solid #ffcc13; overflow:hidden; min-height:210px; }
#extrafooter .extrafooter-avatars { display:flex; flex-wrap:wrap; line-height:0; opacity:.55; max-height:240px; }
#extrafooter .extrafooter-avatars img { width:80px; height:80px; display:block; margin:0; }
#extrafooter-layer { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.45); z-index:2; }
#extrafooter-layer a { text-decoration:none; }
#extrafooter-layer h1 { color:#fff; font-size:32px; font-weight:300; text-align:center; margin:0; }
#extrafooter-layer h1 span { color:#ffcf00; font-weight:700; }

/* ============ HOME layout: header/banner/caja blanca/botón ============ */
/* Eliminar header duplicado dentro del content (causaba franjas blanca+gris) — SOLO escritorio.
   OJO: ese #main-header (Bootstrap navbar) contiene #nav-trigger = la HAMBURGUESA de móvil del theme;
   si se oculta en móvil, NO hay menú. Por eso se limita a ≥993px. */
@media only screen and (min-width:993px){
  #left-content > #main-header { display:none !important; }
}
/* Banner pegado al menú (sin hueco) */
.page-id-2085 #left-content > #featuredbox { margin-top:-86px !important; }
/* Caja blanca del contenido CENTRADA sobre gris, solapando el banner (como v2.7: width:90%, margin:auto, top:-50px).
   max-width:1900px: en pantallas grandes se adapta al ancho dejando un trozo gris a cada lado (antes 1300px = demasiado estrecha). */
.page-id-2085 #content-container { background:#fff !important; width:90% !important; max-width:1900px !important; margin:-55px auto 30px !important; padding:28px 34px 34px !important; position:relative; z-index:5; box-shadow:0 1px 10px rgba(0,0,0,.10); border-radius:5px; }
/* Título "Últimas noticias" en MAYÚSCULAS (el H3 del bloque de texto WPBakery sale en minúsculas por defecto) */
.page-id-2085 #content-container .wpb_text_column h3 { text-transform:uppercase !important; }
/* Botón "Cargar más" negro (como v2.7) */
.vc_pageable-load-more-btn a.vc_btn3, .vc_grid-btn-load_more a.vc_btn3 { background-color:#000 !important; background-image:none !important; color:#fff !important; border-color:#000 !important; }
.vc_pageable-load-more-btn a.vc_btn3:hover, .vc_grid-btn-load_more a.vc_btn3:hover { background-color:#ffcf00 !important; color:#000 !important; }

/* ============ Sidebar: contenido se adapta a abierta/cerrada (como v2.7) ============ */
/* main-content es display:block en v54, el flex del left-content no aplica → fijamos ancho */
#main-content.with-sidebar:not(.sidebar-hidden) #left-content { width: calc(75% - 24px) !important; }
#main-content.sidebar-hidden #left-content { width: 100% !important; }

/* ============================================================================
   SESIÓN 2026-06-14: megamenu (texto/solapado) + single-post (franja marrón)
   + consistencia de contenido + responsive móvil
   ============================================================================ */

/* --- SUBMENÚ del megamenu: enlaces en BLANCO y UNO POR LÍNEA --- */
/* Config original del theme que se perdió en la migración (estaba en el Custom CSS: regla .externallink). */
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu .textwidget a,
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a { color:#ffffff !important; }
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu .textwidget a:hover,
#mega-menu-wrap-primary #mega-menu-primary ul.mega-sub-menu a:hover { color:#ffcf00 !important; }
.externallink { display:block !important; width:100% !important; margin-bottom:10px !important; font-weight:400 !important; font-size:14px !important; padding-left:10px !important; }

/* --- MEGAMENU: ICON-TOP — icono ENCIMA del título, fondo TRANSPARENTE, letra gold #ffcc13 bold ---
   (réplica del original v2.7 que usaba MMM `mega-icon-top`; el usuario pidió volver a esto, NO al
   watermark detrás+fondo amarillo). El glyph lo inyecta el mu-plugin racc-megamenu-icons.php dentro de
   .mega-title-below: <i class="dashicons dashicons-X mega-racc-icon"> + <span class="mega-racc-label">.
   Mecánica: el <a> tiene altura fija (76px) y SIN fondo en NINGÚN estado (normal/hover/activo) — el theme
   v54 pintaba un fondo amarillo que el original NO tenía y quedaba feo; .mega-title-below es flex-column
   centrado (icono order 1 arriba, título order 2 debajo) con altura fija → TODOS los items ALINEADOS
   (los items con submenú traen un <span class="mega-indicator"> que los descuadraba → se oculta).
   Hover: icono sube 3px, sin fondo. OJO dashicon: NO poner line-height en el <i> (colapsa el glyph);
   forzar font-family:dashicons en <i> y :before. getComputedStyle del megamenu NO es fiable (verificar por captura).
   HEADER: la franja negra la pinta el #navbar (z:35); #navigation y el wrap se ponen TRANSPARENTES en
   escritorio para que el LOGO (en #navbar) se vea; el menú va CENTRADO entre logo y usuario. */
@media only screen and (min-width:993px){
  /* HEADER: navbar pinta la franja negra; navigation + wrap transparentes => el logo se ve */
  #navbar{ height:auto !important; min-height:92px !important; line-height:normal !important; z-index:35 !important; background:#000000 !important; }
  body.menu-is-horizontal #navigation{ background:transparent !important; }
  body.menu-is-horizontal #mega-menu-wrap-primary{ background:transparent !important; }
  #navigation{ position:relative !important; z-index:40 !important; pointer-events:none !important; }
  #nav-logo, #nav-user, #nav-buttons{ position:relative !important; z-index:45 !important; }
  /* MMM pinta el icono dashicon también en el a:before (clase dashicons-X en el <a>) → doble. Ocultar el nativo. */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:before{ display:none !important; }
  /* menú CENTRADO en la barra (entre logo y usuario, como la versión anterior) */
  #mega-menu-wrap-primary{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; float:none !important; pointer-events:none !important; }
  #mega-menu-wrap-primary #mega-menu-primary{ display:flex !important; justify-content:center !important; align-items:center !important; flex-wrap:nowrap !important; width:100% !important; min-height:92px !important; pointer-events:none !important; }
  /* el wrap del menú ocupa todo el ancho (centrado) y tapaba el LOGO → lo hacemos click-through;
     solo los items capturan el clic, así el clic sobre el logo pasa por debajo y vuelve a funcionar */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item{ pointer-events:auto !important; }
  /* <a>: altura fija y SIN fondo en NINGÚN estado (normal/hover/activo) — el original no tenía
     el fondo amarillo del theme v54 */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
    height:76px !important; padding:0 14px !important; background:transparent !important; border:0 !important; line-height:1 !important; }
  /* ocultar el indicador (flecha de submenú) que descuadraba ENLACES/LÍDER (los hacía más altos) */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator{ display:none !important; }
  /* ICON-TOP: icono(order 1) ARRIBA + título(order 2) DEBAJO, centrados en 76px => TODOS alineados */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-title-below{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; height:76px !important; gap:4px !important; margin:0 !important; position:static !important; }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link i.mega-racc-icon,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link i.mega-racc-icon:before{ font-family:dashicons !important; font-weight:400 !important; font-style:normal !important; }
  /* icono dashicon ARRIBA (NO poner line-height en el <i>: colapsa el glyph) */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link i.mega-racc-icon{ order:1 !important; display:inline-block !important; width:auto !important; height:auto !important; margin:0 !important; padding:0 !important; font-size:22px !important; opacity:1 !important; color:#ffcc13 !important; -webkit-font-smoothing:antialiased !important; transform:none !important; transition:transform .2s ease !important; }
  /* TÍTULO debajo: gold #ffcc13 bold (como el original v2.7) */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link .mega-racc-label{ order:2 !important; margin:0 !important; position:static !important; z-index:auto !important; font-size:15px !important; font-weight:700 !important; color:#ffcc13 !important; white-space:nowrap !important; line-height:1.1 !important; text-transform:none !important; }
  /* HOVER: SIN fondo; el icono sube un poco (efecto sutil), icono y título siguen gold */
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link:hover i.mega-racc-icon{ transform:translateY(-3px) !important; }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link:hover .mega-racc-label,
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-current-menu-item a.mega-menu-link .mega-racc-label{ color:#ffcc13 !important; }
  #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item.mega-current-menu-item a.mega-menu-link i.mega-racc-icon{ color:#ffcc13 !important; opacity:1 !important; }
}

/* ============ SIDEBAR de widgets (escritorio): empezar DESDE EL TOP + ancho de columna ============ */
/* v54 ponía top:103px (la bajaba) y max-width:320 estrecho. La queremos pegada arriba y a ancho de
   columna (340px), como antes. (getComputedStyle miente con este elemento; verificado por captura.) */
@media only screen and (min-width:993px){
  html body.menu-is-horizontal #page-wrapper #main-content.with-sidebar .is-right-sidebar,
  html body #page-wrapper #main-content .is-right-sidebar{ top:0 !important; max-width:25% !important; width:25% !important; }
  html body #page-wrapper #main-content.with-sidebar #left-content{ width:calc(75% - 24px) !important; }
  /* GRAVATAR del usuario: salía cortado porque el .row (Bootstrap, margen negativo) lo sacaba a la
     izquierda fuera del sidebar. Quitamos el margen negativo y lo dejamos redondo y entero. */
  #right-sidebar .sidebar-userinfo .row{ margin-left:0 !important; margin-right:0 !important; }
  /* Nombre + gravatar con MÁS espacio a la izquierda (la sidebar va sin padding lateral para
     que el fondo del título llegue a los bordes; el padding se lo damos solo a este bloque). */
  #right-sidebar .sidebar-userinfo{ padding-left:20px !important; padding-right:14px !important; }
  /* separar el NOMBRE del gravatar (iban pegados) */
  #right-sidebar .sidebar-userinfo .user-infodetail > a,
  #right-sidebar .sidebar-userinfo .user-infodetail .avatar{ margin-right:14px !important; }
  /* APPS (Aplicaciones 365): quitar el espacio muerto debajo (cada icono tenía margin-bottom:35px) */
  #right-sidebar .widget .textwidget figure,
  #right-sidebar .widget .textwidget .wpb_single_image,
  #right-sidebar .widget .textwidget .vc_figure{ margin-bottom:14px !important; }
  #right-sidebar .widget.widget_custom_html{ padding-bottom:10px !important; }
  /* un poco de aire ARRIBA del contenido (bajo el título) en Apps 365 y Noticias populares → más centrado */
  #right-sidebar .widget .textwidget,
  #right-sidebar .widget .tptn_posts_daily{ margin-top:14px !important; }
  /* COLAPSAR la sidebar DEL TODO al pulsar la flecha (#nav-sidebar-trigger): antes quedaba a medias
     porque el width:25% forzado se mantenía. Al plegar, el theme pone body/#main-content.sidebar-hidden
     y .is-right-sidebar.has-sidebar-hidden → ahí la ocultamos por completo y el contenido va a 100%. */
  html body.sidebar-hidden #page-wrapper #main-content.with-sidebar.sidebar-hidden .is-right-sidebar.has-sidebar-hidden{ display:none !important; width:0 !important; min-width:0 !important; max-width:0 !important; padding:0 !important; }
  html body.sidebar-hidden #page-wrapper #main-content.with-sidebar.sidebar-hidden #left-content{ width:100% !important; }
  #right-sidebar .sidebar-userinfo .user-infodetail{ padding-left:0 !important; }
  #right-sidebar .sidebar-userinfo a#user-thumb{ overflow:visible !important; }
  #right-sidebar .sidebar-userinfo img.avatar{ width:54px !important; height:54px !important; max-width:54px !important; border-radius:50% !important; overflow:hidden !important; }
  /* Quitar el padding lateral de la sidebar para que el FONDO del título de cada widget ocupe
     toda la anchura (de lado a lado); el padding lo damos al CONTENIDO del widget, no al título. */
  #right-sidebar{ padding-left:0 !important; padding-right:0 !important; }
  #right-sidebar .widget{ margin-left:0 !important; margin-right:0 !important; }
  /* contenido del widget SIN padding lateral: el título y la rejilla de iconos usan todo el ancho */
  #right-sidebar .widget .textwidget{ padding-left:0 !important; padding-right:0 !important; }
  #right-sidebar .widget .intern-padding{ padding-left:10px !important; padding-right:10px !important; }
  /* FONDO del título a todo el ancho (de lado a lado), esquinas rectas */
  #right-sidebar .widget .box-title,
  #right-sidebar .widget .intern-box.box-title,
  #right-sidebar .widget .widgettitle,
  #right-sidebar .widget .widget-title{ margin-left:-10px !important; margin-right:-10px !important; padding-left:18px !important; padding-right:18px !important; border-radius:0 !important; }
  /* Rejilla de iconos (Aplicaciones 365): menos padding de columna + etiquetas a todo el ancho de su
     columna y un punto más pequeñas, para que NO se chafen (Sharepoint/Dynamics, Powerpoint/Planner). */
  #right-sidebar .widget .textwidget .vc_row .vc_column > .vc_column-inner{ padding-left:2px !important; padding-right:2px !important; }
  #right-sidebar .widget .textwidget .vc_figure,
  #right-sidebar .widget .textwidget figure.wpb_wrapper{ width:100% !important; margin:0 auto !important; text-align:center !important; }
  #right-sidebar .widget .textwidget figcaption{ display:block !important; width:100% !important; font-size:10.5px !important; line-height:1.15 !important; white-space:normal !important; text-align:center !important; overflow:visible !important; }
}

/* --- SINGLE POST / LISTADOS: quitar la "franja marrón" del title-box --- */
/* #featuredbox en single/archive mostraba el favicon (/images/1.jpg) estirado + la capa gris #eeeeee = franja marrón.
   La home conserva su #featuredbox (contiene el banner); en single/listados lo ocultamos → contenido limpio bajo el menú. */
/* Ocultar el title-box en single, listados y PÁGINAS internas (NO en la home, que lleva el banner dentro de #featuredbox).
   Las páginas internas son .page sin .page-id-2085. Las fichas de usuario BuddyPress (.bp-user) conservan su cover. */
.single #featuredbox,
.archive #featuredbox,
.blog #featuredbox,
.search #featuredbox,
.error404 #featuredbox,
body.page:not(.page-id-2085):not(.bp-user) #featuredbox { display:none !important; }
/* La línea azul (#3146C5 = $brand-primary v54) del borde inferior del title-box: fuera en cualquier caso */
#featuredbox { border-bottom:0 !important; }
/* Por si algún title-box queda visible en otra página: nunca mostrar el favicon ni la capa gris */
#featuredbox .featured-background { background-image:none !important; }
.featured-layer { background-color:transparent !important; }

/* --- OFERTAS (single-directory): RECUPERAR el título de la vacante --- */
/* El título de la oferta lo pinta `woffice_title()` DENTRO de #featuredbox (single-directory.php:18),
   pero la regla de arriba oculta #featuredbox en TODOS los singles (para quitar la franja marrón) →
   en las ofertas eso borraba el título (reportado 2026-06-17; en noticias no pasa, el título sale en
   su tarjeta). Lo RE-MOSTRAMOS solo en `.single-directory`, sin las capas del banner, compacto y como
   un H1 normal alineado al contenido. `.pagetitle` vuelve a flujo normal (position:static) para que dé
   altura y NO se solape con el cuerpo. Va después del hide de arriba → gana por orden de cascada. */
/* fondo #f7f8fa = el mismo del `article` del contenido: el título iba sobre el gris de la sección
   (#EEEEEE) y quedaba feo; ahora va sobre el mismo claro que el cuerpo. */
.single-directory #featuredbox { display:block !important; width:100% !important; height:auto !important; min-height:0 !important; background:#f7f8fa !important; overflow:visible !important; border-bottom:0 !important; }
.single-directory #featuredbox .featured-background,
.single-directory #featuredbox .featured-layer { display:none !important; }
/* padding-left = 43px para igualar el `padding-left:43px` de #content (el cuerpo arranca en x:43) → el
   título queda alineado con el contenido. text-align:left FORZADO porque #featuredbox.centered impone
   text-align:center (eso hacía que el título se viera "no alineado a la izquierda"). */
.single-directory #featuredbox.centered .pagetitle,
.single-directory #featuredbox .pagetitle { display:block !important; position:static !important; transform:none !important; width:auto !important; height:auto !important; min-height:0 !important; text-align:left !important; padding:8px 43px 0 !important; }
/* Título en CASO NORMAL (no MAYÚSCULAS del theme), con margen inferior (no pegado al cuerpo) y un acento
   amarillo RACC corto y alineado a la izquierda (::after) en vez de borde a todo el ancho. */
.single-directory #featuredbox .pagetitle > h1.entry-title { display:block !important; position:static !important; width:auto !important; max-width:none !important; white-space:normal !important; text-transform:none !important; font-size:30px !important; font-weight:700 !important; color:#111111 !important; text-align:left !important; margin:0 0 22px !important; padding:0 !important; line-height:1.25 !important; border:0 !important; }
.single-directory #featuredbox .pagetitle > h1.entry-title::after { content:'' !important; display:block !important; width:64px !important; height:3px !important; background:#ffcf00 !important; margin-top:12px !important; }
/* Cabecera sutil (opción elegida por el cliente, sin franja de color): rótulo "OFERTA DE EMPLEO"
   encima del título, en gris discreto. Da contexto sin meter una banda de color. */
.single-directory #featuredbox .pagetitle > h1.entry-title::before { content:'Oferta de empleo' !important; display:block !important; font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important; color:#8a8f99 !important; margin:0 0 8px !important; }
/* Texto del contenido de la oferta: gris RACC (#555) en vez del azul/lavanda del theme (#8993BA);
   negritas y títulos de sección (FUNCIONES, COMPETENCIAS…) en negro. La oferta NO usa `.blog-content`,
   por eso el fix global de #555 no le llegaba → lo aplicamos sobre `.col-md-6`. */
.single-directory #content .col-md-6,
.single-directory #content .col-md-6 p,
.single-directory #content .col-md-6 li,
.single-directory #content .col-md-6 td,
.single-directory #content .col-md-6 span:not([class]) { color:#555555 !important; }
.single-directory #content .col-md-6 strong,
.single-directory #content .col-md-6 b { color:#111111 !important; }
/* un poco más de aire entre párrafos y listas del cuerpo de la oferta */
.single-directory #content .col-md-6 p,
.single-directory #content .col-md-6 ul { margin-bottom:14px !important; }
/* Columnas 60/40 (descripción más ancha / requisitos más estrecho) en vez de 50/50 */
.single-directory #content .row > .col-md-6:first-child { flex:0 0 60% !important; max-width:60% !important; width:60% !important; }
.single-directory #content .row > .col-md-6:last-child { flex:0 0 40% !important; max-width:40% !important; width:40% !important; }
/* FONDO UNIFORME: la `section` era gris #EEEEEE y se veía alrededor/detrás del contenido; la igualamos
   al #F7F8FA del título y el contenido para que TODA la ficha tenga el mismo fondo (petición cliente). */
.single-directory section.with-sidebar { background:#f7f8fa !important; }
/* ...y el BODY: entre el menú y el contenido se veía el blanco del body (#fff) a través de la cabecera
   transparente (los ~86px de hueco) = "franja blanca arriba". Con el body en #f7f8fa esa franja queda
   del mismo claro y desaparece. */
body.single-directory { background:#f7f8fa !important; }
/* FRANJA VACÍA arriba: `#main-header` reserva ~86px en flujo bajo el navbar (que va en position:absolute),
   y en la ficha de oferta eso dejaba una franja vacía entre el menú y el contenido + empujaba el sidebar
   hacia abajo. NO se puede ocultar #main-header (contiene el navbar+logo absolutos → desaparecerían).
   Subimos la sección con margen negativo para pegarla al menú dejando ~20px de aire. Solo escritorio
   (en móvil la cabecera es otra). */
@media (min-width:993px){
  .single-directory section.with-sidebar { margin-top:-66px !important; }
}

/* --- CONSISTENCIA: texto del contenido en gris RACC (#555), no el teal claro (#7E88AF) por defecto de v54 --- */
#content-container .blog-content,
#content-container .blog-content p,
#content-container .blog-content li,
#content-container .blog-content td { color:#555555 !important; }
/* LINKS azul estándar (#1155cc) + subrayado SOLO en el cuerpo del artículo (`.single .blog-content`),
   para que se noten como enlaces. Acotado a `.single` para NO afectar a excertos de listados ni a
   títulos de tarjetas (el cliente avisó de que los títulos del grid salían azules como links). Incluye
   :visited y hover. Excluye botones. */
.single .blog-content a:not(.btn):not([class*="button"]),
.single .blog-content a:visited:not(.btn):not([class*="button"]) { color:#1155cc !important; text-decoration:underline !important; }
.single .blog-content a:not(.btn):not([class*="button"]):hover,
.single .blog-content a:not(.btn):not([class*="button"]):focus { color:#0a3d91 !important; text-decoration:underline !important; }
/* Títulos de las tarjetas de noticias del grid WPBakery ("Últimas noticias"): en NEGRO como el listado
   (el theme los pinta en su azul de link #3146C5 vía `#content-container a` inline, y mi `#000` sin
   !important perdía). Sin subrayado al hover. Excluye la Guía de embarque (page 25038), cuyo grid
   muestra los títulos claros sobre overlay oscuro. */
body:not(.page-id-25038) #content-container a.vc_gitem-link,
body:not(.page-id-25038) #content-container .vc_gitem-post-data-source-post_title a {
  color:#000000 !important; text-decoration:none !important;
}
body:not(.page-id-25038) #content-container a.vc_gitem-link:hover,
body:not(.page-id-25038) #content-container .vc_gitem-post-data-source-post_title a:hover {
  color:#000000 !important; text-decoration:none !important;
}
/* El título iba PEGADO a la fecha (gap 0) y ambos en oscuro → se juntaban. Separamos el título de la
   fecha y ponemos la fecha en gris (meta), distinta del título oscuro. (Excluye Guía de embarque.) */
body:not(.page-id-25038) #content-container .vc_gitem-post-data-source-post_title { margin-top:10px !important; }
body:not(.page-id-25038) #content-container .vc_gitem-post-data-source-post_date,
body:not(.page-id-25038) #content-container .vc_gitem-post-data-source-post_date * { color:#7a7f8c !important; }
/* Negrita DISTINGUIBLE: el cuerpo va en #555; el <strong>/<b> en oscuro + bold para que destaque
   (antes el strong se pintaba también en #555 = igual que el texto normal, no se notaba). */
#content-container .blog-content strong:not([style]), #content-container .blog-content b:not([style]),
.single .blog-content strong:not([style]), .single .blog-content b:not([style]) { color:#111111 !important; font-weight:700 !important; }

/* --- NOTICIA (single): quitar el text-transform:capitalize del cuerpo (salía "Cada Palabra En Mayúscula") --- */
.single .blog-content, .single .blog-content p, .single .blog-content li,
.single .blog-content span, .single .blog-content td, .single .blog-content div,
#content-container .blog-content p, #content-container .blog-content li{ text-transform:none !important; }
/* --- NOTICIA (single): texto principal +1 punto (14px → 15px), a petición de Comunicación --- */
.single .blog-content p, .single .blog-content li{ font-size:15px !important; }
/* --- NOTICIA (single): quitar SOLO el autor (avatar, nombre, nº de posts), MANTENIENDO la zona de likes
   completa: el texto "¿Te ha gustado esta noticia?" (.like-text, traducido vía mu-plugin racc-i18n-strings.php)
   + el icono y contador (.wiki-like). --- */
.single .blog-authorbox > img.avatar,
.single .blog-authorbox .blog-authorbox-right > h3,
.single .blog-authorbox .blog-authorbox-right > p{ display:none !important; }
/* el theme pone text-transform:capitalize en .like-text → mostraría "¿Te Ha Gustado Esta Noticia?";
   lo dejamos en frase normal como el resto del contenido. */
.single .blog-authorbox .blog-like-container .like-text{ text-transform:none !important; }

/* --- LISTADO de noticias (Post Grid de WPBakery): los títulos se cortaban a mitad de palabra ("ca"+"p")
   porque el theme aplica `#page-wrapper h1..h6 { word-break:break-all }` (style.css). Forzamos salto por
   PALABRA en los títulos de la rejilla; overflow-wrap:break-word solo parte una palabra si por sí sola no
   cabe (URLs largas), no las normales. --- */
.vc_gitem-post-data-source-post_title,
.vc_gitem-post-data-source-post_title *{ word-break:normal !important; overflow-wrap:break-word !important; }

/* ============ HEADER con la SIDEBAR OCULTA: mantener logo a la izquierda ============ */
/* v54, cuando el usuario oculta la sidebar (cookie Woffice_sidebar_position=sidebar-hidden),
   centra el logo (#nav-logo absolute left:50%) y mueve el bloque de usuario a la izquierda.
   Para RACC el header debe verse igual siempre: logo izquierda, usuario a la derecha. */
body.sidebar-hidden #nav-logo { position:relative !important; left:0 !important; margin-left:0 !important; float:left !important; }
body.sidebar-hidden #nav-left { text-align:left !important; }
body.sidebar-hidden #nav-user, body.sidebar-hidden #user-thumb { float:right !important; position:relative !important; }

/* --- LÍNEA BLANCA encima del slider al ocultar la sidebar (issue Comunicación): el #navbar es
   position:absolute, así que la CAJA en flujo de #main-header queda vacía/transparente pero sigue
   ocupando alto → empuja el slider hacia abajo y deja una franja blanca encima. Al ocultar la sidebar
   sacamos también #main-header del flujo (absolute) para que el slider suba y la franja desaparezca.
   El megamenú (#navigation) necesita z-index propio para seguir por ENCIMA del slider ya elevado
   (si no, el desplegable ENLACES queda tapado). Solo escritorio (≥993); en móvil el menú es el propio. */
@media only screen and (min-width:993px){
  body.sidebar-hidden #main-header { position:absolute !important; top:0 !important; left:0 !important; width:100% !important; }
  body.sidebar-hidden #navigation { z-index:100 !important; }
}

/* --- CABECERA (petición Comunicación): los datos de usuario ya están en la sidebar → quitarlos del top
   y dejar arriba solo la FLECHA (plegar sidebar) + la lupa. Además, esos botones SIEMPRE por encima del
   megamenú/RACClock para que la flecha sea clicable (antes el último item del menú la tapaba a anchos medios). */
#navbar #nav-user { display:none !important; }
#navbar #nav-buttons { z-index:999 !important; }
#navbar #nav-buttons a { position:relative !important; z-index:999 !important; }

/* --- MEGAMENÚ: el título de cada columna del submenú (.megatitle, barra amarilla) tenía el texto pegado
   al borde izquierdo (padding:0). Le damos relleno para que respire y alinee con los enlaces de debajo.
   (La fuente ya es la misma que el resto del sitio.) --- */
#mega-menu-primary .mega-sub-menu .megatitle { padding:5px 12px !important; }
/* Texto del título de columna (APLICATIVOS, EQUIPAMIENTO…) en NEGRO sobre la barra amarilla:
   salía en claro y se leía mal. Forzado en el .megatitle y sus hijos. */
#mega-menu-primary .mega-sub-menu .megatitle,
#mega-menu-primary .mega-sub-menu .megatitle * { color:#000000 !important; }

/* ============ COMENTARIOS: cuerpo NO en "Mayúscula Cada Palabra" ============ */
/* El theme pone text-transform:capitalize en `.comment-content p` (mismo problema que el cuerpo de
   las noticias, que ya se arregló en .blog-content). Forzamos texto normal en el cuerpo del comentario.
   (NO tocamos el nombre del autor, que va en mayúsculas a propósito.) */
#comments-container .comment-list .comment-body .comment-content,
#comments-container .comment-list .comment-body .comment-content p,
.wo_common_comment_wrapper .comment-content,
.wo_common_comment_wrapper .comment-content p { text-transform:none !important; }

/* ============ OFERTAS (directory): campos personalizados y títulos del listado ============ */
/* (1) El theme pone text-transform:capitalize en `.directory-item-fields ul .directory-item-field` →
   los campos salían "Cada Palabra En Mayúscula". Y los títulos de las tarjetas del listado igual
   ("Asesor/A Comercial De..."). Forzamos caso normal. */
.directory-item-fields ul .directory-item-field,
#content-container .directory-list-wrapper .card .card-body .directory-title { text-transform:none !important; }
/* (2) ICONOS de los campos: son nombres FA4 (`fa fa-gear`, `fa fa-car`, `fa fa-comments-o`...) pero la
   webfont FA5-Solid (peso 900) NO carga de forma fiable (hay 12 CSS de FontAwesome en conflicto; solo
   la Regular/400 carga) → solo se veía el icono regular y los sólidos quedaban en blanco. Los enrutamos
   a la fuente FA4 nativa (familia "FontAwesome", de Unyson), que tiene TODOS los glifos en un solo peso
   y cuyos codepoints coinciden con los ya puestos. OJO: esto depende de que UNYSON siga activo (aporta
   esa fuente FA4); si algún día se desactiva Unyson, hay que cargar otra fuente FA para estos iconos. */
.directory-item-field i.fa { font-family:"FontAwesome" !important; font-weight:400 !important; }

/* Aviso del formulario de comentarios ("Conectado como… Edita tu perfil. ¿Salir?" y "Los campos
   obligatorios están marcados con *") salía en MAYÚSCULAS (text-transform:uppercase del theme). A caso
   normal. (Los botones/labels del form en capitalize son UI del theme y se dejan tal cual.) */
.logged-in-as, .logged-in-as a, .required-field-message { text-transform:none !important; }

/* ============ BOTÓN "Quiero inscribirme" (vacantes): amarillo RACC, hover negro ============ */
/* El botón de inscripción de la ficha (.single-directory) y de las tarjetas del listado
   (.directory-list-wrapper) es un a.btn.btn-default dentro de un .center. Marca RACC. */
.single-directory .center > a.btn.btn-default,
.directory-list-wrapper .center > a.btn.btn-default {
  background-color:#ffcf00 !important; border-color:#ffcf00 !important; color:#111111 !important;
}
.single-directory .center > a.btn.btn-default:hover,
.single-directory .center > a.btn.btn-default:focus,
.directory-list-wrapper .center > a.btn.btn-default:hover,
.directory-list-wrapper .center > a.btn.btn-default:focus {
  background-color:#000000 !important; border-color:#000000 !important; color:#ffffff !important;
}

/* ============ GUÍA DE EMBARQUE (onboarding, page-id-25038): se mantiene el diseño ORIGINAL del grid
   (mosaico amarillo + icono, título/descripción en el hover overlay). El restyle de "título siempre
   visible" se DESCARTÓ (el cliente lo prefería como estaba). Solo subimos un poco la ALTURA de las
   cajas para dar más aire (sesión 2026-06-17). La imagen del mosaico es 1024×213 (amarillo #fcd003 con
   el icono centrado); con object-fit:cover sube la altura recortando los laterales (que son amarillo)
   y mantiene el icono centrado, sin deformarlo. Va en min-width:993px para no tocar el móvil. ============ */
@media (min-width:993px){
  .page-id-25038 .vc_gitem-zone-img{ height:155px !important; object-fit:cover !important; background:#fcd003 !important; }
}

/* ============ LOGIN: botón "Acceder" en AMARILLO RACC (era azul) ============ */
/* /login/ (plantilla Woffice). El submit #wp-submit.button-primary salía azul; lo pasamos a amarillo
   de marca con texto negro (el panel del formulario #woffice-login-right es blanco → contrasta bien). */
#woffice-login .login-submit input[type=submit],
#woffice-login .login-submit #wp-submit,
#wp-submit.button-primary{
  background-color:#ffcf00 !important;
  border-color:#ffcf00 !important;
  color:#111111 !important;
  text-shadow:none !important;
}
#woffice-login .login-submit input[type=submit]:hover,
#wp-submit.button-primary:hover{
  background-color:#e6ba00 !important;
  border-color:#e6ba00 !important;
  color:#000000 !important;
}

/* ============ TARJETAS de noticias (grid WPBakery): TODAS la misma altura (como v2.7) ============ */
/* v2.7 fijaba .vc_gitem-zone:240 + .vc_gitem-animated-block:200 + excerpt:90 overflow:hidden. Solo escritorio
   (en móvil van a 1 columna y no hace falta igualarlas). */
@media only screen and (min-width:993px){
  .home #content .vc_gitem-animated-block{ height:200px !important; }
  .home #content .vc_gitem-zone{ height:240px !important; }
  .home #content .vc_gitem-post-data-source-post_excerpt{ height:90px !important; overflow:hidden !important; }
}

/* ============ MÓVIL/tablet: la sidebar de widgets NO debe cubrir el contenido ============ */
/* En v54 la .is-right-sidebar se muestra como panel deslizante (absolute, z:15) en ≤992 y tapaba
   el contenido. La ocultamos con alta especificidad (la regla del theme la mostraba) y damos el 100%
   al contenido. Verificado en móvil real (~390-600px). */
@media only screen and (max-width:992px){
  body #page-wrapper #main-content .is-right-sidebar,
  body #main-content.with-sidebar .is-right-sidebar,
  body.home .is-right-sidebar { display:none !important; }
  body #main-content.with-sidebar #left-content { width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  /* En MÓVIL ocultamos el slider/banner de la home (a petición del usuario): así la 1ª noticia
     nunca queda tapada por el slider, y de paso sirve de diagnóstico de que este CSS llega. */
  body.page-id-2085 #left-content > #featuredbox,
  body.page-id-2085 #featuredbox,
  body.page-id-2085 #rev_slider_5_1_wrapper { display:none !important; }
  /* La caja de noticias a TODO el ancho, SIN margen negativo (alta especificidad para ganar a la regla de escritorio) */
  body.page-id-2085 #main-content #left-content #content-container,
  body.page-id-2085 #left-content #content-container,
  .page-id-2085 #content-container { margin:16px 0 24px !important; width:100% !important; max-width:none !important; padding:14px 4px !important; border-radius:0 !important; top:0 !important; }
  /* separación entre noticias (las tarjetas .vc_grid-item iban pegadas, margin-bottom:0) */
  .home #content .vc_grid-item, .page-id-2085 .vc_grid-item{ margin-bottom:14px !important; }
}

/* ============ MÓVIL: MENÚ PROPIO (lo monta racc-mobile-menu.js) ============
   El menú móvil del theme (modo horizontal) arrastra demasiadas limitaciones (off-canvas, max-height:140px,
   MMM ocultando items, su JS) y "hace cosas raras". Se SUSTITUYE por un menú PROPIO 100% controlado:
   hamburguesa centrada en la franja del logo (#navbar) + panel desplegable HACIA ABAJO (full-width, con
   scroll, submenús en acordeón), gold sobre negro. El JS (mu-plugin racc-mobile-menu.php) construye el
   botón (#racc-mm-btn) y el panel (#racc-mm-panel) clonando las secciones del menú; este CSS los maqueta
   y oculta el menú + hamburguesa del theme. */
@media only screen and (max-width:992px){
  /* ocultar el menú y la hamburguesa del THEME (usamos el propio) */
  #navigation, #left-content > #main-header, a#nav-trigger,
  #mega-menu-wrap-primary .mega-menu-toggle{ display:none !important; }
  /* HAMBURGUESA propia: centrada en la franja del logo (#navbar es position:absolute = contenedor) */
  #navbar #racc-mm-btn{ display:flex !important; align-items:center !important; justify-content:center !important; position:absolute !important; left:50% !important; top:50% !important; transform:translate(-50%,-50%) !important; width:48px !important; height:44px !important; background:transparent !important; border:0 !important; padding:0 !important; cursor:pointer !important; z-index:55 !important; }
  #racc-mm-btn .racc-mm-bars{ position:relative; display:block; width:28px; height:3px; background:#ffcc13; border-radius:2px; transition:.2s; }
  #racc-mm-btn .racc-mm-bars::before, #racc-mm-btn .racc-mm-bars::after{ content:''; position:absolute; left:0; width:28px; height:3px; background:#ffcc13; border-radius:2px; transition:.2s; }
  #racc-mm-btn .racc-mm-bars::before{ top:-9px; }
  #racc-mm-btn .racc-mm-bars::after{ top:9px; }
  /* X al abrir */
  body.racc-mm-open #racc-mm-btn .racc-mm-bars{ background:transparent; }
  body.racc-mm-open #racc-mm-btn .racc-mm-bars::before{ top:0; transform:rotate(45deg); }
  body.racc-mm-open #racc-mm-btn .racc-mm-bars::after{ top:0; transform:rotate(-45deg); }
  /* PANEL desplegable HACIA ABAJO (full-width, scroll). El JS fija 'top' justo bajo el #navbar. */
  #racc-mm-panel{ display:none; position:fixed; left:0; right:0; max-height:82vh; overflow-y:auto; -webkit-overflow-scrolling:touch; background:#000; z-index:99990; box-shadow:0 10px 18px rgba(0,0,0,.45); }
  body.racc-mm-open #racc-mm-panel{ display:block; }
  #racc-mm-panel ul{ list-style:none !important; margin:0 !important; padding:0 !important; }
  #racc-mm-panel > ul > li{ border-bottom:1px solid rgba(255,255,255,.10); }
  #racc-mm-panel a, #racc-mm-panel .racc-mm-parent{ display:flex; align-items:center; justify-content:space-between; gap:10px; color:#ffcc13 !important; font-size:16px; font-weight:700; text-decoration:none; padding:14px 22px; line-height:1.25; }
  #racc-mm-panel .racc-mm-parent{ cursor:pointer; }
  #racc-mm-panel .racc-mm-caret{ flex:0 0 auto; width:9px; height:9px; border:solid #ffcc13; border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s; }
  #racc-mm-panel li.open > .racc-mm-parent .racc-mm-caret{ transform:rotate(-135deg); }
  #racc-mm-panel .racc-mm-sub{ display:none; background:#111; }
  #racc-mm-panel li.open > .racc-mm-sub{ display:block; }
  #racc-mm-panel .racc-mm-sub a{ font-weight:400; font-size:15px; padding:11px 22px 11px 40px; }
  /* NIVEL 2: nombre de columna (EXPERIENCIA RACC, APLICATIVOS…) como sub-acordeón */
  #racc-mm-panel .racc-mm-sub .racc-mm-parent{ padding:12px 22px 12px 38px; font-size:15px; background:#111; }
  /* NIVEL 3: links dentro de cada columna */
  #racc-mm-panel .racc-mm-sub .racc-mm-sub{ background:#171717; }
  #racc-mm-panel .racc-mm-sub .racc-mm-sub a{ padding:10px 22px 10px 54px; font-size:14px; }
}
/* El botón y el panel propios NUNCA en escritorio */
@media only screen and (min-width:993px){ #racc-mm-btn, #racc-mm-panel{ display:none !important; } }

/* ============ ESCRITORIO ESTRECHO (993-1400px): el menú (11 items) no cabe en una fila y
   se rompía a 2-3 filas. Lo compactamos para que quede en UNA fila. Verificado a 1280px. ============ */
@media only screen and (min-width:993px) and (max-width:1400px){
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link{
    padding:0 5px !important; font-size:12.5px !important; white-space:nowrap !important; letter-spacing:0 !important;
  }
  /* En este rango el centrado a ancho completo se solaparía con el bloque de usuario:
     alineamos a la izquierda tras el logo (compacto, cabe en una fila). En pantallas grandes va centrado. */
  #mega-menu-wrap-primary{ width:auto !important; margin-left:190px !important; margin-right:0 !important; }
  #mega-menu-wrap-primary #mega-menu-primary{ justify-content:flex-start !important; width:auto !important; }
}