/*
  Theme system
  - Default: grayscale (more readable)
  - Toggle:   color (same layout, more vivid accents)
*/

:root{
  /* Base (grayscale, light) */
  --bg:#f5f6f8;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#4b5563;

  --border:rgba(17,24,39,.12);
    --grid:rgba(17,24,39,.22);
  --grid-strong:rgba(17,24,39,.32);
--shadow:rgba(17,24,39,.06);

  --btn-bg:rgba(17,24,39,.04);
  --btn-border:rgba(17,24,39,.12);
  --btn-bg-primary:rgba(17,24,39,.06);
  --btn-border-primary:rgba(17,24,39,.18);

  --input-bg:#ffffff;
  --input-border:rgba(17,24,39,.14);

  --nav-bg:#ffffff;
  --nav-border:rgba(17,24,39,.10);

  /* Status colors (kept subtle in gray theme) */
  --danger:#b91c1c;
  --ok:#15803d;
  --warn:#92400e;

  /* Calendar event colors (gray theme) */
  --ev-vac-bg:rgba(22,163,74,.10);
  --ev-vac-border:rgba(22,163,74,.32);
  --ev-ap-bg:rgba(37,99,235,.08);
  --ev-ap-border:rgba(37,99,235,.28);
  --ev-ot-bg:rgba(217,119,6,.10);
  --ev-ot-border:rgba(217,119,6,.32);

  --holiday-bg:rgba(245,158,11,.10);
  --holiday-border:rgba(245,158,11,.30);
  --holiday-text:#92400e;

  --today-border:rgba(17,24,39,.28);
  --today-glow:rgba(17,24,39,.10);
}

html[data-theme="color"]{
    --grid:rgba(17,24,39,.20);
  --grid-strong:rgba(17,24,39,.30);
/* Light + vivid */
  --accent:#2563eb;
  --btn-bg-primary:rgba(37,99,235,.10);
  --btn-border-primary:rgba(37,99,235,.30);

  --danger:#dc2626;
  --ok:#16a34a;
  --warn:#d97706;

  --ev-vac-bg:rgba(22,163,74,.18);
  --ev-vac-border:rgba(22,163,74,.45);
  --ev-ap-bg:rgba(37,99,235,.16);
  --ev-ap-border:rgba(37,99,235,.42);
  --ev-ot-bg:rgba(217,119,6,.18);
  --ev-ot-border:rgba(217,119,6,.45);

  --holiday-bg:rgba(245,158,11,.18);
  --holiday-border:rgba(245,158,11,.42);
  --holiday-text:#92400e;

  --today-border:rgba(37,99,235,.35);
  --today-glow:rgba(37,99,235,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
a{color:var(--accent);text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:18px}
.nav{display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:flex-start;padding:12px 18px;background:var(--nav-bg);border-bottom:1px solid var(--nav-border);position:sticky;top:0;z-index:20;overflow-x:hidden}
.nav-row{width:100%}
.nav-row-top{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.nav-left{min-width:0}
.nav-welcome{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.welcome{font-weight:700}
.nav-brand{font-weight:700;color:var(--muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nav-actions{display:flex;align-items:center;gap:10px;justify-content:flex-end;flex-wrap:wrap}

.nav-row-menu{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;align-items:center;justify-content:space-between;width:100%;border-radius:12px}
.nav-toggle-main{display:inline-flex;align-items:center;gap:10px;font-weight:900}
.nav-toggle-caret{opacity:.8;font-weight:900;transition:transform .15s ease}
.nav-toggle.is-open .nav-toggle-caret{transform:rotate(180deg)}

.hamburger{display:inline-block;width:18px;height:12px;position:relative}
.hamburger::before,.hamburger::after,.hamburger span{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:999px}
.hamburger::before{top:0}
.hamburger span{top:5px;opacity:.9}
.hamburger::after{bottom:0}

.navlinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.inline{display:inline}
.nav-divider{display:none;height:1px;background:var(--nav-border);margin:6px 0}
.nav-mobile-actions{display:none;flex-direction:column;gap:10px}

@media(max-width:720px){
  .nav{padding:10px 12px}
  .nav-row-top{gap:10px}
  .nav-row-menu{flex-direction:column;align-items:stretch}
  .nav-toggle{display:flex}
  .nav-actions{display:none}
  .nav-divider{display:block}
  .nav-mobile-actions{display:flex}
  .nav-mobile-actions .theme-switch{width:100%;justify-content:space-between}
  .nav-mobile-actions .navbtn{width:100%;justify-content:flex-start}
  .navlinks{display:none;flex-direction:column;gap:8px;flex-wrap:nowrap}
  .navlinks.is-open{display:flex}
  .navlinks .navbtn{width:100%;justify-content:flex-start}
}

@media(max-width:480px){
  .nav-row-top{grid-template-columns:1fr;align-items:flex-start}
  .nav-actions{justify-content:flex-start}
}

/* Theme switch */
.theme-switch{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;padding:6px 10px;border-radius:999px;border:1px solid var(--btn-border);background:var(--btn-bg)}
.theme-switch input{position:absolute;opacity:0;pointer-events:none}
.switch-track{width:44px;height:24px;border-radius:999px;background:rgba(17,24,39,.10);border:1px solid var(--btn-border);position:relative;flex:0 0 auto}
.switch-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:999px;background:var(--card);border:1px solid var(--btn-border);transition:transform .18s ease, border-color .18s ease}
.theme-switch input:checked + .switch-track .switch-thumb{transform:translateX(20px)}
.theme-switch:focus-within{outline:2px solid var(--today-glow);outline-offset:2px}
.switch-text{font-size:12px;color:var(--muted);font-weight:800;min-width:44px;text-align:left}
html[data-theme="color"] .switch-track{background:rgba(37,99,235,.18)}

/* Nav buttons: icons + subtle category colors */
.navbtn::before{display:inline-block;width:18px;text-align:center;opacity:.9}
.navbtn[data-ico="dashboard"]::before{content:"🏠"}
.navbtn[data-ico="docs"]::before{content:"📄"}
.navbtn[data-ico="requests"]::before{content:"🗂"}
.navbtn[data-ico="plus"]::before{content:"➕"}
.navbtn[data-ico="pending"]::before{content:"⏳"}
.navbtn[data-ico="calendar"]::before{content:"📅"}
.navbtn[data-ico="users"]::before{content:"👥"}
.navbtn[data-ico="upload"]::before{content:"⬆"}
.navbtn[data-ico="payroll"]::before{content:"🧾"}
.navbtn[data-ico="balance"]::before{content:"📊"}
.navbtn[data-ico="holiday"]::before{content:"⭐"}
.navbtn[data-ico="exit"]::before{content:"🚪"}
.navbtn[data-ico="login"]::before{content:"🔐"}

/* Category accents */
.navbtn[data-cat="docs"]{background:rgba(37,99,235,.06);border-color:rgba(37,99,235,.20)}
.navbtn[data-cat="vac"]{background:rgba(22,163,74,.06);border-color:rgba(22,163,74,.20)}
.navbtn[data-cat="sup"]{background:rgba(147,51,234,.06);border-color:rgba(147,51,234,.20)}
.navbtn[data-cat="rrhh"]{background:rgba(217,119,6,.06);border-color:rgba(217,119,6,.22)}
html[data-theme="color"] .navbtn[data-cat="docs"]{background:rgba(37,99,235,.12);border-color:rgba(37,99,235,.35)}
html[data-theme="color"] .navbtn[data-cat="vac"]{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.35)}
html[data-theme="color"] .navbtn[data-cat="sup"]{background:rgba(147,51,234,.12);border-color:rgba(147,51,234,.35)}
html[data-theme="color"] .navbtn[data-cat="rrhh"]{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.35)}

.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px;margin:12px 0;box-shadow:0 1px 0 var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-3{grid-column:span 3}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media(max-width:900px){.col-3{grid-column:span 12}.col-6{grid-column:span 12}}
h1{font-size:22px;margin:0 0 10px}
h2{font-size:16px;margin:0 0 8px;color:var(--muted);font-weight:600}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
@media(max-width:700px){.table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.table th,.table td{white-space:nowrap}}
.badge{display:inline-block;padding:3px 8px;border-radius:999px;background:rgba(17,24,39,.06);color:var(--muted);font-size:12px;border:1px solid rgba(17,24,39,.08)}
.badge.ok{background:rgba(22,163,74,.10);color:var(--ok);border-color:rgba(22,163,74,.18)}
.badge.danger{background:rgba(220,38,38,.10);color:var(--danger);border-color:rgba(220,38,38,.18)}
.badge.warn{background:rgba(217,119,6,.10);color:var(--warn);border-color:rgba(217,119,6,.18)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--btn-bg-primary);border-color:var(--btn-border-primary)}
.btn.danger{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.22)}
.input, select, textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text)}
label{display:block;margin:8px 0 6px;color:var(--muted);font-size:12px}
.row{margin:10px 0}

/* Calendar filters dropdown */
.filterdrop{position:relative;display:inline-block}
.filterdrop summary{list-style:none}
.filterdrop summary::-webkit-details-marker{display:none}
.filterdrop .caret{transition:transform .15s ease; font-weight:900; opacity:.8}
.filterdrop[open] .caret{transform:rotate(180deg)}
.filterpanel{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card)}
.filteropts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.chk{display:flex;gap:8px;align-items:center;margin:0;font-size:13px;color:var(--text)}
.chk input{transform:translateY(1px)}

@media(min-width:721px){
  .filterdrop .filterpanel{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    width:min(820px, calc(100vw - 64px));
    max-height:70vh;
    overflow:auto;
    box-shadow:0 16px 40px var(--shadow);
    z-index:60;
  }
}

@media(max-width:720px){
  .filterdrop{width:100%}
  .filterdrop summary.btn{width:100%;justify-content:space-between}
  .filterdrop .filterpanel{position:static;width:100%;max-height:none;box-shadow:none}
}
.flash{padding:10px;border-radius:12px;border:1px solid var(--border);margin:10px 0}
.flash.ok{border-color:rgba(22,163,74,.22);background:rgba(22,163,74,.08)}
.flash.err{border-color:rgba(220,38,38,.22);background:rgba(220,38,38,.08)}
small{color:var(--muted)}

/* Calendar */
.calendar{margin:12px 0}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}
.cal-weekday{font-weight:800;color:var(--muted);text-align:center;padding:8px 0;border-radius:10px;background:rgba(17,24,39,.03);border:1px solid rgba(17,24,39,.06)}

.cal-weeks{display:flex;flex-direction:column;gap:8px}

/* One week = 7 columns; row 1 is day header; remaining rows are event bars */
.cal-weekgrid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:38px repeat(var(--evrows,4), 22px);gap:8px}

.cal-daycell{background:rgba(17,24,39,.02);border:1px solid var(--border);border-radius:14px;padding:10px;overflow:hidden;position:relative;z-index:1}
.cal-daycell.muted{opacity:.55}
.cal-daycell.today{border-color:var(--today-border);box-shadow:0 0 0 2px var(--today-glow) inset}
.cal-daycell.holiday{background:linear-gradient(135deg,var(--holiday-bg) 0%, rgba(255,255,255,0) 70%), var(--holiday-bg);border-color:var(--holiday-border)}

.cal-dayhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-daynum{font-weight:900}
.cal-holiday{font-size:11px;color:var(--holiday-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;padding:2px 8px;border-radius:999px;border:1px solid var(--holiday-border);background:rgba(255,255,255,.60);appearance:none;font:inherit;cursor:pointer;text-align:left}

/* Multi-day bars */
.cal-bar{--type-accent: var(--border);padding:4px 8px;border-radius:12px;border:1px solid var(--border);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:space-between;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
.cal-bar .bar-name{font-weight:800;overflow:hidden;text-overflow:ellipsis}
.cal-bar .bar-pending{font-size:12px;opacity:.85}
.cal-bar.pending{border-style:dashed;opacity:.92}
.cal-bar.cont-left{border-top-left-radius:6px;border-bottom-left-radius:6px}
.cal-bar.cont-right{border-top-right-radius:6px;border-bottom-right-radius:6px}

.cal-bar.ev-vac{--type-accent: var(--ev-vac-border);background:var(--ev-vac-bg);border-color:var(--ev-vac-border)}
.cal-bar.ev-ap{--type-accent: var(--ev-ap-border);background:var(--ev-ap-bg);border-color:var(--ev-ap-border)}
.cal-bar.ev-ot{--type-accent: var(--ev-ot-border);background:var(--ev-ot-bg);border-color:var(--ev-ot-border)}

.cal-bar.empclr{background:hsla(var(--emp-h), 70%, 90%, 1);border-color:var(--type-accent);border-left:6px solid var(--type-accent)}

/* Make 1-day items compact */
.cal-bar[data-span="1"]{padding:4px 6px}

/* Mini calendar (dashboard) */
.calendar.mini .cal-weekday{padding:6px 0;font-size:12px}
.calendar.mini .cal-weekgrid{grid-template-rows:32px repeat(var(--evrows,4), 18px);gap:6px}
.calendar.mini .cal-daycell{padding:7px;border-radius:12px}
.calendar.mini .cal-holiday{display:none}
.calendar.mini .cal-bar{font-size:11px;padding:3px 6px;border-radius:10px}
.calendar.mini .cal-bar[data-span="1"]{padding:3px 5px}
@media(max-width:900px){
  .cal-weekgrid{grid-template-rows:34px repeat(var(--evrows,4), 20px)}
  .cal-holiday{max-width:90px}
}


/* Mobile / small screens */
@media(max-width:760px){
  .container{padding:12px}
  .nav{padding:10px 12px}
  .brand{flex:1 1 100%}
  .nav-right{align-items:flex-start;width:100%;max-width:none}
  .nav-top{width:100%;justify-content:space-between}
  .navlinks{width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding-bottom:6px}
  .navlinks::-webkit-scrollbar{height:6px}
  .navlinks::-webkit-scrollbar-thumb{background:rgba(17,24,39,.18);border-radius:999px}
  .switch-text{display:none}
  .card{padding:12px;overflow-x:auto}
  .btn{padding:9px 10px}
  .table{display:block;overflow-x:auto;white-space:nowrap}
  .table th,.table td{white-space:nowrap;padding:8px}
  .cal-weekgrid{gap:6px;grid-template-rows:56px repeat(var(--evrows,4), 18px)}
  .cal-daycell{padding:8px}
  .cal-holiday{max-width:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding:2px 6px}

  .cal-dayhead{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}
}


@media(min-width:721px){
  .nav-toggle{display:none !important}
  .navlinks{display:flex !important}
}


/* Calendar tooltip + detail modal */
.salchi-tooltip{
  position:fixed;
  z-index:9999;
  max-width:320px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow: var(--shadow);
  font-size:12px;
  line-height:1.3;
  pointer-events:none;
}
.salchi-tooltip .tt-title{font-weight:900;margin:0 0 4px}
.salchi-tooltip .tt-line{margin:2px 0}
.salchi-tooltip .tt-muted{color:var(--muted)}
.salchi-tooltip .tt-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
  font-size:11px;
  font-weight:800;
  margin-left:6px;
}

.salchi-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:9998;
}
.salchi-modal{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 24px));
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  z-index:9999;
}
.salchi-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
.salchi-modal-title{
  font-size:14px;
  font-weight:900;
}
.salchi-modal-body{padding:14px 16px}
.salchi-modal-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  padding:12px 16px 16px;
}
@media(max-width:720px){
  .salchi-modal{
    top:auto;
    bottom:12px;
    transform:translate(-50%,0);
    border-radius:18px;
  }
}


/* Year calendar (Vista anual) */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.year-table{border-collapse:separate;border-spacing:0}
.year-table th.ymonth{
  text-align:left;
  min-width:120px;
  position:sticky;
  left:0;
  z-index:4;
  background:var(--card);
}
.year-table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:var(--card);
}
.year-table thead th.ymonth{z-index:5}

.year-table th.yday{
  text-align:center;
  width:44px;
  min-width:44px;
}

.year-table td.ycell{
  vertical-align:top;
  padding:4px;
  min-width:44px;
  height:32px;
}

.year-table th, .year-table td{
  border-right:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
}
.year-table tr:first-child th{border-top:1px solid var(--grid);}
.year-table th:first-child, .year-table td:first-child{border-left:1px solid var(--grid);}
.year-table thead th{border-bottom:1px solid var(--grid-strong);}
.year-table th.ymonth{border-right:1px solid var(--grid-strong);}


.year-table td.ycell--na{background:rgba(17,24,39,.04)}
.year-table td.ycell--has{background:rgba(17,24,39,.01)}

.year-table td.ycell--vac{background:var(--ev-vac-bg)}
.year-table td.ycell--ap{background:var(--ev-ap-bg)}
.year-table td.ycell--ot{background:var(--ev-ot-bg)}
.year-table td.ycell--pend{background:rgba(217,119,6,.10)}
.year-table td.ycell--hol{outline:1px dashed rgba(99,102,241,.35);outline-offset:-2px}

.year-table .yhol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;height:16px;
  border-radius:6px;
  font-weight:900;
  font-size:10px;
  border:1px solid rgba(99,102,241,.30);
  background:rgba(99,102,241,.10);
}

.year-table .ybadges{display:flex;gap:2px;flex-direction:column;align-items:flex-start;margin-top:2px}
.year-table .ypill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1px 4px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  border:1px solid var(--border);
  background:rgba(255,255,255,.55);
}
.year-table .ypill.ev-vac{background:var(--ev-vac-bg);border-color:var(--ev-vac-border)}
.year-table .ypill.ev-ap{background:var(--ev-ap-bg);border-color:var(--ev-ap-border)}
.year-table .ypill.ev-ot{background:var(--ev-ot-bg);border-color:var(--ev-ot-border)}
.year-table .ypill.ypend{background:rgba(217,119,6,.12);border-color:rgba(217,119,6,.25);color:var(--warn)}



/* Legend (RRHH calendar) */
.legenddrop{position:relative}
.legenddrop .legendpanel{
  margin-top:8px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  min-width:260px;
  max-width:520px;
}
.legend-actions{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.legend-grid{display:grid; grid-template-columns:1fr; gap:8px; max-height:260px; overflow:auto; padding-right:4px}
.legend-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  background:rgba(0,0,0,0.02);
}
.legend-item:hover{background:rgba(0,0,0,0.04)}
.legend-swatch{
  width:16px; height:16px; border-radius:4px;
  border:1px solid rgba(0,0,0,0.12);
  flex:0 0 auto;
}
.legend-name{font-weight:600}
.legend-meta{color:var(--muted)}
@media (min-width: 720px){
  .legend-grid{grid-template-columns:1fr 1fr}
}