/* =====================================================
   BLACK ÓR GLOBAL THEME SYSTEM
   DARK PREMIUM + LIGHT CLEAN
===================================================== */

:root{
  --gold:#d4af37;
  --gold2:#f7ef8a;
  --gold3:#bfa437;
  --gold-gradient:linear-gradient(90deg,#d4af37,#f7ef8a,#bfa437);

  --danger:#c8102e;
  --success:#31c26b;

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:30px;
  --radius-pill:999px;

  --maxw:1240px;
}

/* =====================================================
   DARK PREMIUM
   Black background + white text + gold accents
===================================================== */

html[data-theme="dark"],
body[data-theme="dark"]{
  --bg:#000000;
  --page-bg:#000000;

  --card:#000000;
  --card-soft:#050505;
  --card-strong:#000000;

  --text-main:#ffffff;
  --text-muted:rgba(255,255,255,.68);
  --text-soft:rgba(255,255,255,.52);
  --text-inverse:#000000;

  --line:rgba(212,175,55,.34);
  --line-soft:rgba(212,175,55,.20);
  --line-strong:#d4af37;

  --btn-primary-bg:linear-gradient(90deg,#d4af37,#f7ef8a,#bfa437);
  --btn-primary-text:#000000;

  --btn-secondary-bg:#000000;
  --btn-secondary-text:#ffffff;
  --btn-secondary-border:#d4af37;

  --input-bg:#000000;
  --input-text:#ffffff;
  --input-border:#d4af37;

  --nav-bg:#000000;
  --nav-border:#d4af37;
}

/* =====================================================
   LIGHT CLEAN
   White / ivory background + black text + gold accents
===================================================== */

html[data-theme="light"],
body[data-theme="light"]{
  --bg:#ffffff;
  --page-bg:#ffffff;

  --card:#ffffff;
  --card-soft:#f8f6ef;
  --card-strong:#ffffff;

  --text-main:#111111;
  --text-muted:rgba(0,0,0,.62);
  --text-soft:rgba(0,0,0,.48);
  --text-inverse:#ffffff;

  --line:rgba(212,175,55,.46);
  --line-soft:rgba(212,175,55,.26);
  --line-strong:#d4af37;

  --btn-primary-bg:linear-gradient(90deg,#d4af37,#f7ef8a,#bfa437);
  --btn-primary-text:#000000;

  --btn-secondary-bg:#ffffff;
  --btn-secondary-text:#111111;
  --btn-secondary-border:#d4af37;

  --input-bg:#ffffff;
  --input-text:#111111;
  --input-border:#d4af37;

  --nav-bg:#ffffff;
  --nav-border:#d4af37;
}

/* =====================================================
   GLOBAL BASE
===================================================== */

html,
body{
  background:var(--bg);
  color:var(--text-main);
}

body,
p,
span,
li,
td,
th,
label{
  color:var(--text-main);
}

h1,
h2,
h3,
h4,
h5{
  color:var(--text-main);
}

small,
.muted,
.hint,
.theme-muted{
  color:var(--text-muted);
}

a{
  color:inherit;
}

/* =====================================================
   GLOBAL CARDS / PANELS
===================================================== */

.theme-card,
.card,
.panel,
.box,
.table,
.table-container,
.employees-box,
.list,
.rows{
  background:var(--card);
  color:var(--text-main);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

.theme-soft-card{
  background:var(--card-soft);
  color:var(--text-main);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}

/* =====================================================
   GLOBAL BUTTONS
===================================================== */

button,
.btn{
  border-radius:var(--radius-pill);
  font-weight:700;
  cursor:pointer;
  font-family:inherit;
}

.btn.primary,
button.primary,
.theme-button-primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border:none;
}

.btn.secondary,
button.secondary,
.theme-button-secondary{
  background:var(--btn-secondary-bg);
  color:var(--btn-secondary-text);
  border:1px solid var(--btn-secondary-border);
}

/* =====================================================
   INPUTS / SELECTS
===================================================== */

input,
select,
textarea{
  background:var(--input-bg);
  color:var(--input-text);
  border:1px solid var(--input-border);
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--line-strong);
}

/* =====================================================
   GOLD HELPERS
===================================================== */

.gold-text{
  background:var(--gold-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.gold-bg{
  background:var(--gold-gradient);
  color:#000000;
}

.gold-border{
  border-color:var(--line-strong);
}

/* =====================================================
   HEADER / NAV HELPERS
===================================================== */

.theme-header,
header{
  background:var(--nav-bg);
  border-bottom:1px solid var(--nav-border);
}

.theme-drawer,
.drawer{
  background:var(--nav-bg);
  border-color:var(--nav-border);
}

/* =====================================================
   ACCESSIBILITY HELPERS
===================================================== */

.large-readable{
  font-size:1.05rem;
  line-height:1.6;
}

.clear-section{
  padding:20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:var(--card);
}
/* =====================================================
   BLACK ÓR GLOBAL PATCH
   HEADER ALWAYS BLACK IN DARK + LIGHT MODE
   Applies to all pages that load theme.css
===================================================== */

/* Header always stays pure black */
header,
.theme-header,
.header-wrap,
.header-inner,
.header-bar,
.navbar,
.topbar{
  background:#000000 !important;
  color:#ffffff !important;
  border-color:#d4af37 !important;
}

/* Header bottom line always gold */
header{
  border-bottom:1px solid #d4af37 !important;
}

/* Logo area stays clean on black */
.brand,
.nav-logo,
.logo,
.logo-wrap{
  background:transparent !important;
}

/* Header logo should not be affected by Light Mode */
.brand img,
.nav-logo img,
.logo img,
.logo-wrap img{
  background:transparent !important;
  filter:none !important;
}

/* Header text always white */
.brand-copy strong,
.brand-copy small,
header strong,
header small,
header span,
header a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Theme and menu buttons stay black with gold border */
.header-actions .theme-toggle,
.header-actions .hamburger,
.theme-toggle,
.hamburger,
.menu-toggle,
.burger{
  background:#000000 !important;
  color:#ffffff !important;
  border:1px solid #d4af37 !important;
}

/* Text inside header buttons */
.theme-toggle span,
.theme-toggle-icon,
.theme-toggle-text,
.hamburger,
.menu-toggle,
.burger{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Hamburger bars always white */
.hamburger .bars,
.hamburger .bars::before,
.hamburger .bars::after,
.burger .bars,
.burger .bars::before,
.burger .bars::after,
.menu-icon .bar{
  background:#ffffff !important;
}

/* When menu is open, keep X icon correct */
.hamburger[aria-expanded="true"] .bars,
.burger[aria-expanded="true"] .bars{
  background:transparent !important;
}

.hamburger[aria-expanded="true"] .bars::before,
.hamburger[aria-expanded="true"] .bars::after,
.burger[aria-expanded="true"] .bars::before,
.burger[aria-expanded="true"] .bars::after{
  background:#ffffff !important;
}

/* Drawer / mobile menu also stays black */
.drawer,
.mobile-menu,
.side-menu{
  background:#000000 !important;
  color:#ffffff !important;
  border-color:#d4af37 !important;
}

/* Drawer links stay readable */
.drawer a,
.mobile-menu a,
.side-menu a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Drawer primary buttons remain gold */
.drawer .primary,
.mobile-menu .primary,
.side-menu .primary,
.btn-nav.primary{
  background:linear-gradient(90deg,#d4af37,#f7ef8a,#bfa437) !important;
  color:#000000 !important;
  -webkit-text-fill-color:#000000 !important;
  border:none !important;
}
/* =====================================================
   BLACK ÓR GLOBAL LOGO SIZE
   Applies to all pages using .brand img
===================================================== */

.brand{
  background:#000000 !important;
  padding:6px 12px !important;
  border-radius:12px !important;
  border:1px solid rgba(212,175,55,.18) !important;
}

.brand img{
  height:68px !important;
  width:auto !important;
  display:block !important;
  background:transparent !important;
}

.header-inner{
  min-height:104px !important;
}

/* Mobile */
@media(max-width:720px){
  .brand{
    padding:4px 8px !important;
    border-radius:10px !important;
  }

  .brand img{
    height:46px !important;
  }

  .header-inner{
    min-height:76px !important;
  }
}
/* ===== REMOVE LOGO BOX IN HEADER ===== */

.brand{
  padding:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.brand img{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
/* ===== BLACK ÓR LOGO SIZE ===== */

.brand img{
  height:80px !important;
  width:auto !important;
  display:block !important;
}

/* Si el header queda apretado */
.header-inner{
  min-height:104px !important;
}

/* Mobile */
@media(max-width:720px){
  .brand img{
    height:46px !important;
  }

  .header-inner{
    min-height:76px !important;
  }
}
/* =====================================================
   BLACK ÓR GLOBAL DESKTOP NAV STYLE
===================================================== */

.desktop-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:22px !important;
  flex:1 !important;
}

.desktop-nav a{
  position:relative !important;
  color:rgba(255,255,255,.72) !important;
  font-size:13px !important;
  font-weight:700 !important;
  padding:12px 0 !important;
  white-space:nowrap !important;
  text-decoration:none !important;
}

.desktop-nav a:hover{
  color:#f7ef8a !important;
}

.desktop-nav a.active{
  color:#f7ef8a !important;
}

.desktop-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-17px;
  height:2px;
  background:#f7ef8a;
  box-shadow:0 0 16px rgba(247,239,138,.45);
}

/* Para laptops donde no quepa todo */
@media(max-width:1180px){
  .desktop-nav{
    gap:14px !important;
  }

  .desktop-nav a{
    font-size:12px !important;
  }
}

/* En móvil se puede ocultar porque ya usas bottom nav o menú móvil */
@media(max-width:720px){
  .desktop-nav{
    display:none !important;
  }
}
/* ===== REMOVE DESKTOP MENU ICONS / SYMBOLS ===== */

.desktop-nav a::before{
  content:none !important;
  display:none !important;
}

.desktop-nav a b,
.desktop-nav a i,
.desktop-nav a svg,
.desktop-nav a .nav-icon,
.desktop-nav a .menu-icon,
.desktop-nav a .icon{
  display:none !important;
}

.desktop-nav a{
  gap:0 !important;
}