/* =====================================================
   01. Variables de personalización
   ===================================================== */

:root {
    /* Colores principales */
    --ea-color-primary: #5F7F6C;
    --ea-color-secondary: #153F8C;
    --ea-color-secondary-soft: #153F8C54;
    --ea-color-accent: #5EEAD4;

    /* Colores de texto, fondos y estados */
    --ea-color-white: #FFFFFF;
    --ea-color-soft-white: WhiteSmoke;
    --ea-color-black: #000000;
    --ea-color-text: #333333;
    --ea-color-text-dark: #212529;
    --ea-color-text-menu: rgba(0, 0, 0, 0.7);
    --ea-color-border-light: #F0F0F0;
    --ea-color-muted: #999999;
    --ea-color-warning: #F49E00;
    --ea-color-menu-active-bg: #F2F2F2;

    /* Enlaces */
    --ea-color-link: var(--ea-color-primary);
    --ea-color-footer-link: var(--ea-color-primary);
    --ea-color-footer-link-hover: var(--ea-color-black);

    /* Cabecera */
    --ea-header-min-height: 110px;
    --ea-header-logo-top: 30px;
    --ea-header-logo-left: 5px;
    --ea-header-logo-height: 50px;

    /* Pie */
    --ea-footer-logo-width: 70%;

    /* Jumbotron */
    --ea-jumbotron-min-height: 500px;

    /* Carrusel */
    --ea-carousel-control-top: 150px;
    --ea-carousel-control-max-height: 285px;
    --ea-carousel-item-min-height: 570px;
}

@media screen and (max-width: 767.98px) {
    :root {
        --ea-header-logo-top: 32px;
        --ea-header-logo-height: 45px;
    }
}

/* =====================================================
   02. Base, tipografía y enlaces
   ===================================================== */

/* Texto base general */
html,
body {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    color: var(--ea-color-black);
}

body,
button,
input,
select,
textarea,
table,
.navbar,
.dropdown-menu,
.panel-inicio,
footer {
    font-family: Arial, Helvetica, sans-serif !important;
}

.lnr {
  font-family: Linearicons !important;
}

/* Enlaces generales */
a {
    color: var(--ea-color-link);
}

/* Texto del contenido principal, sin afectar overlays, modales o cookies */
.main,
.panel-inicio {
    color: var(--ea-color-black);
    font-weight: 400;
}

.main p,
.main td,
.main dd,
.main li,
.main span,
.panel-inicio,
.panel-inicio p,
.panel-inicio div,
.panel-inicio td,
.panel-inicio dd,
.panel-inicio li,
.panel-inicio span {
    color: inherit;
    font-weight: 400;
}

.main strong,
.main b,
.panel-inicio strong,
.panel-inicio b {
    color: inherit;
    font-weight: 700;
}

h5,
.panel-inicio h5,
footer h5 {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: calc(1rem + 2pt);
    font-weight: 400;
    color: var(--ea-color-black);
}

/* =====================================================
   03. Cabecera
   ===================================================== */

header,
header .container {
    min-height: var(--ea-header-min-height);
}

header .logo {
    position: absolute;
    top: var(--ea-header-logo-top);
    left: var(--ea-header-logo-left);
    width: auto;
    height: var(--ea-header-logo-height);
}

@media screen and (max-width: 1007px) {
    header .container {
        background-image: none;
    }
}

/* =====================================================
   04. Navegación principal / Bootstrap actual
   ===================================================== */

/* Neutraliza el fondo grisáceo de la barra de menú. */
.navbar.bg-light {
    background-color: var(--ea-color-white) !important;
    border: 0;
    box-shadow: none;
}

/* Evita que el contenedor interior genere sensación de caja. */
.navbar.bg-light .container {
    background-color: transparent !important;
}

/* Oculta el icono de inicio/casita del menú principal. */
#navbarSupportedContent .navbar-nav > .nav-item:first-child {
    display: none !important;
}

/* Menú principal: Arial negrita al 70% de negro. */
.navbar-light .navbar-nav .nav-link {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 700;
    color: var(--ea-color-text-menu) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--ea-color-text-menu) !important;
}

/* Estado abierto/activo del menú principal en color neutro. */
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:active {
    color: var(--ea-color-text-dark) !important;
    background-color: var(--ea-color-menu-active-bg) !important;
}

/* Dropdowns del menú principal. */
.dropdown-item,
#navbarSupportedContent .dropdown-item {
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: 400;
    color: var(--ea-color-black) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
#navbarSupportedContent .dropdown-item:hover,
#navbarSupportedContent .dropdown-item:focus {
    color: var(--ea-color-text-dark) !important;
    background-color: transparent !important;
}

/* Navegación secundaria / pasos. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.sidebar-list li a.currentStep {
    background-color: var(--ea-color-primary);
}

/* =====================================================
   05. ActionBar: reubicación de Idioma / Accedir
   ===================================================== */

/* Oculta visualmente la barra superior, pero mantiene disponibles sus menús. */
.action-bar {
    position: relative;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    background: transparent !important;
    overflow: visible;
    z-index: 1050;
}

/* Oculta el acceso RSS de la barra superior. */
.action-bar .nav-social {
    display: none !important;
}

/* Coloca Idioma / Accedir en la barra de navegación. */
.action-bar .nav-idioma-login {
    position: absolute;
    top: calc(var(--ea-header-min-height) + 21px);
    right: max(15px, calc((100vw - 1140px) / 2 + 15px));
    height: auto;
    float: none !important;
    display: flex;
    align-items: center;
    transform: translateY(-50%);
    z-index: 1060;
}

/* Normaliza el UL generado por WebForms. */
#ActionBar_ulIdiomasLogin {
    display: flex;
    align-items: center;
    gap: 6px;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent !important;
    list-style: none;
}

/* Corrige los div insertados dentro del ul. */
#ActionBar_ulIdiomasLogin > div {
    display: flex;
    align-items: center;
    margin-right: 0 !important;
}

#ActionBar_ulIdiomasLogin li {
    list-style: none;
}

/* Enlaces Idioma / Accedir. */
#ActionBar_ulIdiomasLogin .dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    height: auto;
    padding: 0 8px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--ea-color-text-menu) !important;
    text-decoration: none;
    background: transparent !important;
    transform: none;
}

/* Oculta iconos de idioma / acceso. */
#ActionBar_ulIdiomasLogin .dropdown-toggle i {
    display: none !important;
}

#ActionBar_ulIdiomasLogin .dropdown-toggle:hover,
#ActionBar_ulIdiomasLogin .dropdown-toggle:focus {
    color: var(--ea-color-text-menu) !important;
    text-decoration: none;
}

/* Estado abierto/activo de Idioma / Accedir en color neutro. */
#ActionBar_panelIdiomas .dropdown.show > .dropdown-toggle,
#ActionBar_panelLogin .dropdown.show > .dropdown-toggle,
#ActionBar_panelIdiomas .dropdown.open > .dropdown-toggle,
#ActionBar_panelLogin .dropdown.open > .dropdown-toggle,
#ActionBar_ulIdiomasLogin .dropdown-toggle:active,
#ActionBar_panelIdiomas .dropdown-toggle:hover,
#ActionBar_panelIdiomas .dropdown-toggle:focus,
#ActionBar_panelLogin .dropdown-toggle:hover,
#ActionBar_panelLogin .dropdown-toggle:focus {
    color: var(--ea-color-text-dark) !important;
    background-color: var(--ea-color-menu-active-bg) !important;
    text-decoration: none;
}

/* Dropdowns compactos de Idioma / Accedir. */
#ActionBar_panelIdiomas .dropdown-menu,
#ActionBar_panelLogin .dropdown-menu {
    left: 0;
    right: auto;
    min-width: 120px;
    width: auto;
    margin-top: 0;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--ea-color-white);
}

#ActionBar_panelIdiomas .dropdown-menu-right,
#ActionBar_panelLogin .dropdown-menu-right {
    right: auto;
    left: 0;
}

#ActionBar_panelIdiomas .dropdown-item,
#ActionBar_panelLogin .dropdown-item,
#ActionBar_liIniciarSesion .dropdown-item {
    display: block;
    padding: 6px 12px;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--ea-color-black) !important;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--ea-color-white) !important;
}

#ActionBar_panelIdiomas .dropdown-item:hover,
#ActionBar_panelIdiomas .dropdown-item:focus,
#ActionBar_panelLogin .dropdown-item:hover,
#ActionBar_panelLogin .dropdown-item:focus,
#ActionBar_liIniciarSesion .dropdown-item:hover,
#ActionBar_liIniciarSesion .dropdown-item:focus {
    color: var(--ea-color-text-dark) !important;
    background-color: transparent !important;
}

/* Responsive: posición de Idioma / Accedir. */
@media screen and (min-width: 1200px) {
    .action-bar .nav-idioma-login {
        right: max(15px, calc((100vw - 1140px) / 2 + 15px));
    }
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .action-bar .nav-idioma-login {
        right: max(15px, calc((100vw - 960px) / 2 + 15px));
    }
}

@media screen and (min-width: 992px) {
    .action-bar .nav-idioma-login {
        transform: translate(-45px, -50%);
    }
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .action-bar .nav-idioma-login {
        right: max(15px, calc((100vw - 720px) / 2 + 15px));
    }
}

@media screen and (min-width: 768px) {
    .action-bar .nav-idioma-login {
        top: calc(var(--ea-header-min-height) + 28px);
    }
}

@media screen and (max-width: 767.98px) {
    .action-bar .nav-idioma-login {
        top: calc(var(--ea-header-min-height) + 20px);
        right: 15px;
        height: auto;
        transform: translateY(-50%);
    }

    #ActionBar_ulIdiomasLogin {
        height: auto;
        min-height: 0;
        gap: 4px;
    }

    #ActionBar_ulIdiomasLogin .dropdown-toggle {
        height: auto;
        padding: 0 6px;
        font-size: 12px;
        transform: none;
    }

    #ActionBar_panelIdiomas .dropdown-menu,
    #ActionBar_panelLogin .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        min-width: 120px;
        max-width: calc(100vw - 30px);
    }

    #ActionBar_panelIdiomas .dropdown-item,
    #ActionBar_panelLogin .dropdown-item,
    #ActionBar_liIniciarSesion .dropdown-item {
        padding: 7px 12px;
        font-size: 12px;
        line-height: 1.35;
        white-space: nowrap;
    }
}

/* =====================================================
   06. Botones
   ===================================================== */

.btn-primary {
    background-color: var(--ea-color-primary);
    border-color: var(--ea-color-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: var(--ea-color-white);
    background-color: var(--ea-color-muted);
    border-color: var(--ea-color-muted);
}

.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--ea-color-primary);
    border-color: var(--ea-color-primary);
    opacity: 0.7;
}

/* =====================================================
   07. Inicio / jumbotron
   ===================================================== */

.jumbotron.inicio {
    min-height: var(--ea-jumbotron-min-height);
    padding: 0 !important;
}

.jumbotron.inicio .container {
    visibility: hidden;
}

/* =====================================================
   08. Alertas, validaciones y paginación
   ===================================================== */

.validation-summary-errors {
    border-left: 5px solid var(--ea-color-primary);
}

/* =====================================================
   09. Carrusel
   ===================================================== */

.carousel-control-prev,
.carousel-control-next {
    top: var(--ea-carousel-control-top) !important;
    max-height: var(--ea-carousel-control-max-height);
}

.carousel-item {
    min-height: var(--ea-carousel-item-min-height);
    background-size: cover;
}

/* =====================================================
   10. Pie de página y calendario
   ===================================================== */

footer .logo-pie {
    width: var(--ea-footer-logo-width);
    height: auto;
}

footer a,
footer .datos-contacto a,
footer nav a {
    color: var(--ea-color-footer-link) !important;
}

footer a:hover,
footer a:focus,
footer .datos-contacto a:hover,
footer .datos-contacto a:focus,
footer nav a:hover,
footer nav a:focus {
    color: var(--ea-color-footer-link-hover) !important;
    text-decoration: none;
}

footer .calendar .cal-today {
    color: var(--ea-color-primary) !important;
    font-weight: 700;
}

footer .calendar .cal-day {
    color: var(--ea-color-black);
}


/* AJUSTES ADICIONALES */

/* Ocultar únicamente los iconos de candidatos y empresas */
#cphPagina_panelDerecho .panel-inicio-sin-datos > img[src*="icon-candidatos"],
#cphPagina_panelDerecho .panel-inicio-sin-datos > img[src*="icon-empresas"] {
    display: none !important;
}