/* =====================================================================
   TimeTac nav restyle — adapt old nav markup to the new "pill" design
   SCOPED TO SPANISH PAGES via :lang(es)
   :lang(es) matches lang="es" AND any sub-language (es-ES, es-MX, ...)
   so it's robust against WPML's es-ES setting and browser quirks.
   ===================================================================== */
/* ---- Tokens ---- */
html:lang(es) {
--nav-body-bg: #eeeeef; /* the gray that body / surroundings use */
--nav-pill-bg: #f7f8fa; /* the rounded nav container — LIGHTER  */
--nav-dropdown-bg: #ffffff; /* dropdown panel — pure white          */
--nav-text: #111827; /* dark slate for links                 */
--nav-text-hover: #1d4ed8; /* hover/active link color (unused now) */
--nav-blue: #1e6bff; /* primary brand blue (buttons)         */
--nav-blue-hover: #1957d6;
--nav-radius-pill: 28px;
--nav-radius-btn: 10px;
--nav-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* =====================================================================
   Body / page background: make the area around the pill the same light
   gray so the top doesn't look "white" — matches the rest of the page.
   ===================================================================== */
html:lang(es),
html:lang(es) body {
background-color: var(--nav-body-bg) !important;
}
/* =====================================================================
   Fix the blue bar AND give the spacer enough height so content
   starts 60px BELOW the bottom of the pill (not under it).
   The fixed pill needs ~120px; +60px desired gap = 180px spacer.
   ===================================================================== */
html:lang(es) .nav-fixed-spacer,
html:lang(es) #nav-spacer {
background-color: transparent !important;
height: 180px !important;
}
/* ---- Outer wrapper: fully transparent so the body bg shows through ---- */
html:lang(es) #sticky-nav,
html:lang(es) #sticky-nav.sticking {
background-color: transparent !important;
box-shadow: none !important;
padding: clamp(20px, 2.5vw, 40px) clamp(16px, 2vw, 40px) 0 !important;
}
/* ---- The nav itself: rounded "pill" card, max 1500px, centered ---- */
html:lang(es) #main-menu.navbar {
background-color: var(--nav-pill-bg);
border-radius: var(--nav-radius-pill);
box-shadow: var(--nav-shadow);
padding: 18px 36px !important;
max-width: 1500px;
margin: 0 auto;
}
/* Kill Bootstrap's container-fluid padding and any inherited bg */
html:lang(es) #main-menu .container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100%;
background-color: transparent !important;
}
/* ---- Strip any white background from the collapse area / nav lists ---- */
html:lang(es) #main-menu #main-nav,
html:lang(es) #main-menu .navbar-collapse,
html:lang(es) #main-menu .navbar-nav,
html:lang(es) #main-menu .nav-tabs,
html:lang(es) #main-menu .nav-item {
background-color: transparent !important;
border: 0 !important;
}
/* ---- Brand ---- */
html:lang(es) .navbar-brand {
padding: 8px 0 !important;
margin-right: 1.5rem !important;
}
html:lang(es) .navbar-brand img {
width: 150px;
height: auto;
}
/* ---- Primary nav links ---- */
/* hyphens:none + white-space:nowrap → defensive against style.css's
   global "hyphens: auto" rule on body, which otherwise breaks nav labels
   like "Precios" → "Pre-cios" when something narrows the row.           */
html:lang(es) #main-menu .navbar-nav .nav-link {
color: var(--nav-text) !important;
font-weight: 600;
font-size: 1rem;
padding: 0.6rem 1rem !important;
background: transparent !important;
border: 0 !important;
transition: color 0.15s ease;
white-space: nowrap !important;
hyphens: none !important;
-webkit-hyphens: none !important;
-ms-hyphens: none !important;
word-break: keep-all !important;
}
html:lang(es) #main-menu .navbar-nav .nav-link:hover,
html:lang(es) #main-menu .navbar-nav .nav-link:focus,
html:lang(es) #main-menu .navbar-nav .show > .nav-link {
color: var(--nav-text-hover) !important;
}
/* Remove tab-style underline on hover */
html:lang(es) #main-menu .nav-tabs {
border: 0 !important;
}
html:lang(es) #main-menu .nav-tabs .nav-link.active,
html:lang(es) #main-menu .nav-tabs .nav-link:hover {
border: 0 !important;
background: transparent !important;
}
/* ---- Dropdown chevron — solid little arrow, slightly offset ---- */
html:lang(es) #main-menu .dropdown-toggle::after {
border-top: 0.32em solid currentColor;
border-right: 0.32em solid transparent;
border-left: 0.32em solid transparent;
border-bottom: 0;
margin-left: 0.4em;
vertical-align: 0.15em;
opacity: 0.75;
}
/* ---- Dropdown menus: WHITE bg, no shadow, dark text ---- */
html:lang(es) #main-menu .dropdown-menu {
background-color: var(--nav-dropdown-bg) !important;
background-image: none !important;
color: var(--nav-text) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: none !important;
padding: 0.5rem 0;
margin-top: 0.5rem;
}
html:lang(es) #main-menu .dropdown-item {
background-color: transparent !important;
color: var(--nav-text) !important;
border-radius: 0;
padding: 0.55rem 0.75rem;
font-weight: 500;
}
html:lang(es) #main-menu .dropdown-item:hover,
html:lang(es) #main-menu .dropdown-item:focus {
background-color: transparent !important;
color: var(--nav-text) !important;
text-decoration: underline;
}
html:lang(es) #main-menu .dropdown-divider {
margin: 0.4rem 0.25rem;
opacity: 0.5;
}
/* Kill the hover/active "card" effect on the parent dropdown toggle */
html:lang(es) #main-menu .nav-item.dropdown:hover > .nav-link,
html:lang(es) #main-menu .nav-item.dropdown.show > .nav-link,
html:lang(es) #main-menu .nav-item .nav-link.show,
html:lang(es) #main-menu .nav-link.dropdown-toggle:focus,
html:lang(es) #main-menu .nav-link.dropdown-toggle:active {
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
/* =====================================================================
   Right-hand side: Login (outlined button) + CTA (filled blue button)
   ===================================================================== */
html:lang(es) #sticky-nav .btn-secondary,
html:lang(es) #sticky-nav a.btn.btn-secondary.btn-shadow {
background-color: var(--nav-blue) !important;
border: 2px solid var(--nav-blue) !important;
color: #ffffff !important;
border-radius: var(--nav-radius-btn) !important;
padding: 10px 22px !important;
font-weight: 600;
box-shadow: none !important;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
html:lang(es) #sticky-nav .btn-secondary:hover,
html:lang(es) #sticky-nav a.btn.btn-secondary.btn-shadow:hover {
background-color: var(--nav-blue-hover) !important;
border-color: var(--nav-blue-hover) !important;
color: #ffffff !important;
}
html:lang(es) #sticky-nav .navbar .navbar-nav .nav-item .nav-link[href*="app.timetac.com"] {
display: inline-flex;
align-items: center;
border: 2px solid var(--nav-blue);
color: var(--nav-blue) !important;
background: transparent !important;
border-radius: var(--nav-radius-btn);
padding: 8px 22px !important;
font-weight: 600;
margin-right: 12px;
line-height: 1.2;
transition: background-color 0.15s ease, color 0.15s ease;
}
html:lang(es) #sticky-nav .navbar .navbar-nav .nav-item .nav-link[href*="app.timetac.com"]:hover {
background-color: var(--nav-blue) !important;
color: #ffffff !important;
}
html:lang(es) #sticky-nav .navbar .navbar-nav .nav-item .nav-link[href*="app.timetac.com"] img {
display: none;
}
/* ---- Language switcher: minimal, no button styling ---- */
html:lang(es) #sticky-nav .navbar .navbar-nav .nav-item.dropdown > .nav-link.dropdown-toggle {
color: var(--nav-text) !important;
font-weight: 600;
padding: 0.6rem 0.5rem !important;
}
/* =====================================================================
   Mobile / collapsed nav
   ===================================================================== */
@media (max-width: 1199.98px) {
html:lang(es) #sticky-nav {
padding: 14px 16px 0 !important;
}
html:lang(es) #main-menu.navbar {
padding: 10px 18px !important;
border-radius: 22px;
}
html:lang(es) .navbar-brand img {
width: 130px;
}
html:lang(es) #main-nav .dropdown-menu {
box-shadow: none;
padding: 0;
margin: 0;
}
html:lang(es) #sticky-nav .btn-secondary {
padding: 10px 18px !important;
}
}
/* ---- Hamburger ---- */
html:lang(es) .navbar-toggler {
border: 0 !important;
box-shadow: none !important;
}
html:lang(es) .navbar-toggler:focus {
box-shadow: none !important;
}
/* =====================================================================
   HARD OVERRIDES — beat the existing style.css selectors specifically
   ===================================================================== */
html:lang(es) #sticky-nav .navbar-nav,
html:lang(es) #sticky-nav .navbar-nav.nav-tabs {
background: transparent !important;
border: 0 !important;
}
/* Dropdown panel: solid WHITE bg, no border, no shadow                    */
html:lang(es) #sticky-nav .nav-item.dropdown .dropdown-menu,
html:lang(es) #sticky-nav .navbar-nav .dropdown-menu,
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.dropdown .dropdown-menu {
background-color: var(--nav-dropdown-bg) !important;
background-image: none !important;
color: var(--nav-text) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: none !important;
overflow: visible !important;
padding: 0.5rem 0 !important;
}
@media (min-width: 1200px) {
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.dropdown:hover .nav-link,
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.dropdown:hover > .nav-link,
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.dropdown.show .nav-link {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
/* Dropdown panel on hover: white, no shadow, rounded                   */
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.dropdown:hover .dropdown-menu,
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.dropdown.show .dropdown-menu {
border: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
border-radius: 12px !important;
background-color: var(--nav-dropdown-bg) !important;
}
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.active:before,
html:lang(es) #main-nav .navbar-nav.nav-tabs .nav-item.active-parent:before {
display: none !important;
}
}
html:lang(es) #sticky-nav .navbar-nav .nav-item .active,
html:lang(es) #sticky-nav .navbar-nav .nav-item .active::before,
html:lang(es) #sticky-nav .navbar-nav .dropdown-item .active,
html:lang(es) #sticky-nav .navbar-nav .dropdown-item.active {
background: transparent !important;
color: var(--nav-text) !important;
}
@media (max-width: 991.98px) {
html:lang(es) #main-nav .navbar-nav {
background: transparent !important;
padding: 0 !important;
}
html:lang(es) #main-nav .navbar-nav .nav-item {
background: transparent !important;
padding: 0.25rem 0 !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
color: var(--nav-text) !important;
}
}