/* =========================
   Design tokens
   ========================= */
:root{
  --bg: #FFFFFF;
  --fg: #232F3E;
  --header-bg: #000000;
  --dropdown-bg: #000000;        /* negro sólido */
  --dropdown-hover: #E67E22;     /* hover naranja */
  --border-dark: #1f2937;
  --on-dark: rgba(255,255,255,0.96);
  --on-dark-soft: rgba(255,255,255,0.9);
  --accent: #E67E22;
  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 9999px;
  --shadow-lg: 0 10px 24px rgba(0,0,0,.35);
  --font: "Inter", system-ui, sans-serif;
}

/* =========================
   Base
   ========================= */
html, body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  margin: 0;
  padding: 0;
}

/* =========================
   Header + Navbar
   ========================= */
.theme-header,
.theme-navbar{
  background: var(--header-bg) !important;
  color: var(--on-dark);
  border: 0;
  box-shadow: none;
}
.theme-logo img{ max-height:44px; height:auto; width:auto; display:block; }

/* Iconos heredan color del contenedor */
.theme-portal-login,
.theme-search-and-mini-cart-group{ color: var(--on-dark-soft); }
.theme-portal-login svg,
.theme-search-and-mini-cart-group svg{ width:1em; height:1em; }
.theme-portal-login svg path,
.theme-search-and-mini-cart-group svg path{ fill: currentColor; }

/* =========================
   Menú principal
   ========================= */
.theme-menu :is(a, .theme-menu-content, .theme-menu-name){
  color: var(--on-dark);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color .2s ease, color .2s ease;
}

/* Dropdowns (Servicios, etc.) */
.theme-menu :is(.submenu, li ul){
  background: var(--dropdown-bg);
  border: 1px solid var(--border-dark);
  box-shadow: var(--shadow-lg);
}
.theme-menu li ul a{
  color: var(--on-dark);
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}
.theme-menu li ul a:hover{
  background: var(--dropdown-hover);
  color: #000; /* contraste sobre naranja */
}

/* Focus accesible */
.theme-menu a:focus-visible,
.theme-portal-login:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent), transparent 55%);
  border-radius: var(--radius-sm);
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 992px){
  .theme-navbar, .theme-header{ background: var(--header-bg); }
  .theme-menu li{ margin: 6px 0; }
  .theme-menu a{ display: block; padding: 10px 12px; }
  .theme-menu :is(.submenu, li ul){ background: var(--dropdown-bg); }
}

/* =========================
   Ocultar topbar (variantes Zoho)
   ========================= */
#theme-topbar, #theme-topbar *,
.theme-topbar, .theme-topbar *,
.theme-header-topbar, .theme-header-topbar *,
.theme-header-top, .theme-header-top *,
.theme-topbar-wrap, .theme-topbar-wrap *,
.theme-topbar-strip, .theme-topbar-strip *,
.theme-topbar-bar, .theme-topbar-bar *{
  display:none !important; visibility:hidden !important;
  height:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; border:0 !important;
  background:transparent !important;
}
body, .theme-header{ margin-top:0 !important; }

/* =========================
   Evitar espacio extra
   ========================= */
#main, .theme-banner, .theme-hero, .theme-content, .site-content{
  margin-top:0; padding-top:0;
}

/* =========================
   Ocultar search
   ========================= */
.theme-search,
.theme-search-and-mini-cart-group .theme-search{
  display:none !important; visibility:hidden !important;
}

/* =========================
   Trigger "Iniciar sesión" (pill)
   ========================= */
.theme-portal-login{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font:400 15px/1 var(--font);
  color:var(--on-dark);
  background:transparent; border:1px solid transparent;
  border-radius:var(--radius-pill); padding:6px 10px;
}
.theme-portal-login::after{
  content:"Iniciar sesión"; font:400 15px/1 var(--font); color:currentColor;
}
.theme-portal-login:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* =================================================================
   PORTAL LOGIN/SIGNUP — MISMO LAYOUT QUE "SERVICIOS"
   (fondo negro, texto blanco, hover naranja)
   Cubre "theme-*" y "zs-*"
   ================================================================= */

/* 1) CONTENEDOR / TARJETA del popup (quitar blanco) */
.theme-portal-content,
.theme-portal,                /* algunos temas envuelven aquí */
.theme-portal-container,
.theme-portal-popup,
.theme-portal-box,
#zs-user-account-popup,
#zs-user-account-popup .zs-popup-content,
#zs-user-account-popup .zs-modal-content,
#zs-user-account-popup .zs-dialog-content,
.zs-account-popup,
.zs-account-popup .zs-popup-content,
.zs-account-popup .zs-modal-content,
.zs-portal-content,
.zs-user-actions{
  background: var(--dropdown-bg) !important;
  background-image: none !important;
  border: 1px solid var(--border-dark) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius) !important;
  padding: 6px !important;
  min-width: 240px;
}

/* 2) Ítems (login / registro) como entradas de menú */
.theme-portal-content :is(a, button, .btn, .button),
#zs-user-account-popup :is(a, button),
.zs-account-popup :is(a, button),
.zs-portal-content :is(a, button),
.zs-user-actions :is(a, button){
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--on-dark) !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  text-decoration: none !important;
  font: 500 15px/1.25 var(--font) !important;
  padding: 10px 12px !important;
  border-radius: var(--radius-sm) !important;
  filter: none !important;
}

/* 3) Hover naranja */
.theme-portal-content :is(a, button, .btn, .button):is(:hover, :focus-visible),
#zs-user-account-popup :is(a, button):is(:hover, :focus-visible),
.zs-account-popup :is(a, button):is(:hover, :focus-visible),
.zs-portal-content :is(a, button):is(:hover, :focus-visible),
.zs-user-actions :is(a, button):is(:hover, :focus-visible){
  background: var(--dropdown-hover) !important;
  color: #000 !important;
  outline: none !important;
}

/* 4) Estados disabled (si los hay) */
.theme-portal-content :is(a[disabled], button[disabled], .btn[disabled], .button[disabled]),
#zs-user-account-popup :is(a[disabled], button[disabled]),
.zs-account-popup :is(a[disabled], button[disabled]),
.zs-portal-content :is(a[disabled], button[disabled]),
.zs-user-actions :is(a[disabled], button[disabled]){
  opacity: .45 !important; cursor: not-allowed !important;
}

/* 5) Limpieza de clases de botón nativas de Zoho */
.theme-portal-content :is(.zs-btn, .zs-primary, .zs-secondary, .primary, .secondary),
#zs-user-account-popup :is(.zs-btn, .zs-primary, .zs-secondary, .primary, .secondary),
.zs-account-popup :is(.zs-btn, .zs-primary, .zs-secondary, .primary, .secondary){
  background: transparent !important;
  color: var(--on-dark) !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
}

/* 6) Si vienen en lista <li> */
.theme-portal-content li,
#zs-user-account-popup li,
.zs-account-popup li{ list-style:none; margin:0; }

/* 7) Backdrop (oscurecer el fondo de la página) */
.zs-overlay,
.zs-backdrop,
.theme-portal-overlay{
  background: rgba(0,0,0,.4) !important;
}