@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --primary:#143f97;
  --primary-dark:#0f2f6b;
  --secondary:#006fdd;
  --accent:#08b8d5;
  --success:#22c55e;
  --warning:#ff9f1c;
  --danger:#ef2f45;
  --bg:#f5faff;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#5d6d83;
  --border:#dce8f4;
  --soft:#f1f7fd;
  --shadow:0 12px 32px rgba(15,47,107,.075);
  --shadow-strong:0 22px 55px rgba(15,47,107,.15);
  --gradient:linear-gradient(100deg,#153b96 0%,#0075dd 62%,#08b8d5 100%);
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:16px;line-height:1.45}
a{color:inherit}button,input,select,textarea{font-family:inherit}

/* LOGIN */
.login-body{min-height:100vh;background:#f6fbff}.login-container{min-height:100vh;display:grid;grid-template-columns:1.07fr .93fr;background:linear-gradient(90deg,#124499 0%,#057de0 44%,#bff3f6 73%,#f6fbff 100%)}
.login-left{color:#fff;padding:74px 72px 56px;display:flex;flex-direction:column;justify-content:flex-start;position:relative;overflow:hidden}.login-left::before{content:"";position:absolute;right:-120px;top:-170px;width:560px;height:560px;border-radius:50%;background:rgba(255,255,255,.13)}.login-left::after{content:"";position:absolute;left:-90px;bottom:-160px;width:360px;height:360px;border-radius:50%;background:rgba(6,182,212,.18)}
.brand-box,.login-info-card,.login-hero-copy,.login-copyright{position:relative;z-index:2}.brand-icon{width:76px;height:76px;border-radius:24px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18);box-shadow:0 18px 42px rgba(2,38,104,.22);display:grid;place-items:center;font-size:36px;margin-bottom:30px}.brand-box h1{font-size:3rem;letter-spacing:-1.2px;font-weight:900}.brand-box p{margin-top:10px;font-size:1.16rem;font-weight:700;opacity:.92}.login-info-card{margin-top:48px;max-width:620px;padding:36px;border-radius:30px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 24px 56px rgba(0,0,0,.13);backdrop-filter:blur(14px)}.login-info-card i{font-size:42px;display:block;margin-bottom:18px}.login-info-card h3{font-size:1.55rem;font-weight:900;margin-bottom:12px}.login-info-card p{max-width:540px;color:rgba(255,255,255,.9);font-size:1.05rem;font-weight:600;line-height:1.85}
.login-right{display:flex;align-items:center;justify-content:center;padding:44px;background:rgba(246,251,255,.72)}.login-card{width:100%;max-width:560px}.login-card-box{background:rgba(255,255,255,.92);border:1px solid rgba(217,229,242,.96);border-radius:32px;padding:42px;box-shadow:var(--shadow-strong);backdrop-filter:blur(16px)}.security-badge,.login-badge{display:inline-flex;align-items:center;gap:8px;background:#ecfdf5;color:#16a34a;border-radius:999px;padding:9px 15px;font-size:.9rem;font-weight:900;margin-bottom:22px}.login-card h2{font-size:2.18rem;letter-spacing:-.7px;font-weight:900;margin-bottom:10px}.login-subtitle{color:var(--muted);font-size:1rem;font-weight:600;margin-bottom:28px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:9px;font-weight:850}.input-icon{position:relative}.input-icon i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#90a1b8;font-size:18px}.input-icon input{width:100%;height:58px;padding:0 18px 0 52px;border:1px solid var(--border);border-radius:21px;background:#f8fcff;outline:0;font-size:1rem;font-weight:600;color:var(--text);transition:.22s}.input-icon input:focus{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.13)}.btn-login{width:100%;height:60px;border:0;border-radius:22px;background:var(--gradient);color:#fff;font-weight:900;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;box-shadow:0 18px 34px rgba(0,111,221,.23);transition:.22s}.btn-login:hover{transform:translateY(-2px);box-shadow:0 24px 44px rgba(0,111,221,.32)}.alert-error{background:#fee2e2;color:#b91c1c;padding:14px 16px;border-radius:16px;margin-bottom:20px;font-weight:800;display:flex;gap:10px}.login-demo{margin-top:26px;border:1px dashed var(--border);border-radius:24px;padding:18px;background:#f8fbff}.login-demo span{display:block;margin-bottom:12px;color:var(--muted);font-size:.76rem;font-weight:900;letter-spacing:.8px}.login-demo p{background:#fff;border:1px solid var(--border);border-radius:14px;padding:11px 13px;margin-bottom:10px}.login-demo p:last-child{margin-bottom:0}

/* APP SHELL */
.app-layout{min-height:100vh;display:grid;grid-template-columns:320px 1fr;background:var(--bg)}.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--border);padding:28px 24px;display:flex;flex-direction:column;gap:28px;z-index:30}.sidebar-logo{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid #1fa9eb}.logo-icon{width:52px;height:52px;border-radius:18px;background:var(--gradient);color:#fff;display:grid;place-items:center;font-size:23px;box-shadow:0 14px 28px rgba(0,111,221,.18)}.sidebar-logo h2{font-size:1.22rem;font-weight:900;letter-spacing:-.3px}.sidebar-logo span{display:block;margin-top:2px;color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:3px}.sidebar-user{padding:14px 16px;border-left:1px solid #1446a4;border-right:1px solid #10b6d4}.sidebar-user small{display:block;color:var(--muted);font-size:.73rem;font-weight:900;letter-spacing:.75px}.sidebar-user strong{display:block;margin-top:5px;font-size:1.02rem}.sidebar-menu{display:grid;gap:13px}.sidebar-menu a,.logout-btn{min-height:50px;border-radius:22px;padding:13px 18px;display:flex;align-items:center;gap:13px;text-decoration:none;color:#46556b;font-weight:850;transition:.2s}.sidebar-menu a i,.logout-btn i{font-size:1.18rem}.sidebar-menu a:hover,.sidebar-menu a.active{color:#fff;background:var(--gradient);box-shadow:0 16px 34px rgba(5,121,223,.2)}.logout-btn{margin-top:auto;border-radius:0;background:#fff;color:#46556b;border-top:1px solid var(--border);margin-left:-24px;margin-right:-24px;margin-bottom:-28px;padding:24px 32px}.logout-btn:hover{color:#dc2626;background:#fff5f5}
.main-content{min-width:0;background:var(--bg);padding:0}.topbar{min-height:82px;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.76);backdrop-filter:blur(12px);position:sticky;top:0;z-index:15}.topbar h1{font-size:1.48rem;font-weight:900;letter-spacing:-.3px}.topbar p{color:var(--muted);font-size:.88rem;font-weight:650;margin-top:4px}.topbar-actions{display:flex;align-items:center;gap:14px}.search-box{width:320px;height:50px;border:1px solid var(--border);border-radius:24px;background:#fff;display:flex;align-items:center;gap:10px;padding:0 15px;color:#66758b}.search-box input{border:0;outline:0;background:transparent;width:100%;font-size:.95rem}.circle-btn{width:50px;height:50px;border:1px solid var(--border);border-radius:50%;background:#fff;color:#24364f;display:grid;place-items:center;cursor:pointer;font-size:1.16rem;position:relative}.notification-btn span{position:absolute;right:-6px;top:-8px;min-width:23px;height:23px;border-radius:50%;background:var(--danger);color:white;font-size:.75rem;font-weight:900;display:grid;place-items:center;border:2px solid white}.menu-toggle{display:none}.user-chip{height:50px;border:1px solid var(--border);border-radius:24px;background:#fff;padding:6px 12px 6px 6px;display:flex;align-items:center;gap:10px}.avatar,.avatar-sm,.emp-avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--gradient);color:#fff;font-weight:900;box-shadow:0 8px 20px rgba(0,111,221,.18)}.avatar-sm,.emp-avatar{width:46px;height:46px}.user-chip small{display:block;color:var(--muted);font-size:.75rem;font-weight:700}

.main-content > section,.main-content > .hero-card,.main-content > .stats-grid,.main-content > .dashboard-grid,.main-content > .profile-grid,.main-content > .calendar-grid{margin-left:30px;margin-right:30px}.main-content > section:first-of-type,.main-content > .hero-card:first-of-type,.main-content > .calendar-grid:first-of-type{margin-top:30px}.hero-card,.panel-card,.stat-card,.calendar-item,.request-card,.employee-request-card{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.hero-card{min-height:200px;padding:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#fff;background:var(--gradient);border-radius:34px;box-shadow:0 22px 48px rgba(23,63,158,.16);margin-bottom:28px}.hero-card h2{color:#fff;font-size:2.25rem;font-weight:900;margin:14px 0 8px;letter-spacing:-.8px}.hero-card p{color:rgba(255,255,255,.86);font-weight:650}.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-radius:999px;color:#e7f7ff;padding:8px 15px;font-weight:900;font-size:.86rem}.hero-btn,.btn-primary,.btn-secondary,.btn-danger,.btn-outline,.btn-soft{min-height:46px;border:0;border-radius:22px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-weight:900;cursor:pointer;transition:.2s}.hero-btn{background:#fff;color:#143c97}.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 12px 26px rgba(0,111,221,.18)}.btn-secondary,.btn-soft{background:#edf4fb;color:#0f172a}.btn-danger{background:linear-gradient(135deg,#ff3d5a,#ef233c);color:#fff}.btn-outline{background:#fff;border:1px solid var(--border);color:#25344b}.btn-primary:hover,.btn-danger:hover,.hero-btn:hover{transform:translateY(-1px);filter:saturate(1.04)}

.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:28px}.stat-card{min-height:124px;padding:26px;display:flex;align-items:center;justify-content:space-between}.stat-card span{display:block;color:var(--muted);font-size:.84rem;font-weight:900;letter-spacing:.8px}.stat-card h3{font-size:2.2rem;font-weight:900;margin:6px 0}.stat-card p{color:var(--muted);font-weight:650}.stat-icon{width:56px;height:56px;border-radius:18px;color:#fff;display:grid;place-items:center;font-size:24px;box-shadow:0 10px 20px rgba(15,47,107,.18)}.blue,.indigo{background:#1747ad}.green{background:#16b866}.orange{background:#ff8f0e}.red{background:#ef2f45}.cyan{background:#00a9c8}.blue-soft,.indigo-soft{background:linear-gradient(100deg,#fff 0%,#eef4ff 100%)}.green-soft{background:linear-gradient(100deg,#fff 0%,#eafbef 100%)}.orange-soft{background:linear-gradient(100deg,#fff 0%,#fff4e8 100%)}.red-soft{background:linear-gradient(100deg,#fff 0%,#fff0f1 100%)}

.dashboard-grid,.profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}.panel-card{padding:26px;margin-bottom:28px}.panel-card h2,.panel-card h3{font-weight:900;letter-spacing:-.3px;margin-bottom:6px}.panel-card p{color:var(--muted);font-weight:650}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px}.section-heading h2{font-size:1.45rem}.tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tabs a{text-decoration:none;min-height:42px;border:1px solid var(--border);background:#fff;border-radius:999px;padding:0 18px;display:inline-flex;align-items:center;gap:8px;color:#0f172a;font-weight:850}.tabs a:hover,.tabs a.active{background:var(--gradient);color:#fff;border-color:transparent}.tabs .count{background:#e8f0f8;color:#60728a;border-radius:999px;padding:2px 8px;font-size:.75rem}.tabs a.active .count,.tabs a:hover .count{background:rgba(255,255,255,.22);color:#fff}

.filters{display:grid;grid-template-columns:1fr 250px auto;gap:14px;align-items:center;margin-bottom:24px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid label{font-weight:850;color:#0f172a}.form-grid input,.form-grid select,.form-grid textarea,.filters input,.filters select,.decision-form textarea,.modal-card input,.modal-card select,.modal-card textarea{width:100%;min-height:54px;margin-top:8px;border:1px solid var(--border);border-radius:20px;background:#fbfdff;padding:12px 16px;outline:0;font:inherit;color:#0f172a;font-weight:650;transition:.18s}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filters input:focus,.filters select:focus,.decision-form textarea:focus,.modal-card input:focus,.modal-card select:focus{border-color:#4d8dff;box-shadow:0 0 0 4px rgba(37,99,235,.12);background:#fff}.form-grid .full{grid-column:1/-1}

.table-wrap{overflow-x:auto;border-radius:24px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow)}.data-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden}.data-table th{background:#f1f6fb;color:#5b6b82;text-align:left;font-size:.82rem;letter-spacing:.7px;font-weight:900;padding:18px 20px;text-transform:uppercase}.data-table td{padding:18px 20px;border-bottom:1px solid var(--border);vertical-align:middle;color:#1f2937}.data-table tbody tr:nth-child(even){background:#eaf9ff}.data-table tbody tr:hover{background:#f1fbff}.data-table tbody tr:last-child td{border-bottom:0}.data-table small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}.employee-cell,.request-employee{display:flex;align-items:center;gap:14px}.department-pill,.badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:7px 12px;font-size:.82rem;font-weight:900}.department-pill{background:#d8f3ff;color:#1747ad}.badge.aprobada,.badge.green{background:#dcfce7;color:#16a34a;border:1px solid #86efac}.badge.rechazada,.badge.red{background:#fee2e2;color:#ef2f45;border:1px solid #fca5a5}.badge.pendiente,.badge.orange{background:#ffedd5;color:#f97316;border:1px solid #fdba74}.badge.blue{background:#d8f3ff;color:#1747ad;border:1px solid #bee6ff}.badge i{font-size:.9rem}.actions{display:flex;align-items:center;gap:12px}.icon-link,.action-icon{width:34px;height:34px;border:0;background:transparent;color:#516278;display:inline-grid;place-items:center;border-radius:50%;text-decoration:none;cursor:pointer;font-size:1.04rem}.icon-link:hover,.action-icon:hover{background:#eef6ff;color:#1747ad}.icon-link.danger:hover,.action-icon.danger:hover{background:#fff0f0;color:#ef2f45}

/* Solicitudes estilo Lovable */
.requests-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 18px}.request-search{width:320px}.request-table .data-table td{height:74px}.request-period{color:#60728a;font-weight:650}.request-days{font-weight:900;color:#0f172a}.request-motive{color:#60728a;font-weight:650}.decision-inline{display:flex;align-items:center;justify-content:flex-end;gap:12px}.decision-inline textarea{width:260px;min-height:42px;height:42px;margin:0;border-radius:16px;resize:none;padding:10px 14px}.decision-buttons{display:flex;align-items:center;gap:9px}.small-decision{width:34px;height:34px;border-radius:50%;border:1px solid transparent;background:#fff;display:grid;place-items:center;cursor:pointer;font-size:1rem}.small-decision.approve{color:#16a34a;border-color:#bbf7d0}.small-decision.approve:hover{background:#dcfce7}.small-decision.reject{color:#ef2f45;border-color:#fecaca}.small-decision.reject:hover{background:#fee2e2}.view-only{color:#516278}.request-card{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:18px;align-items:center;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--border)}.request-card h3{margin:8px 0 2px;font-weight:900}.request-list{display:grid;gap:14px}.admin-comment{background:#f8fbff;border:1px solid var(--border);border-radius:16px;padding:14px;color:var(--muted);font-weight:650}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(2,6,23,.76);display:none;align-items:center;justify-content:center;padding:24px;z-index:100}.modal.open{display:flex}.modal-card{width:min(650px,96vw);background:#fff;border:1px solid var(--border);border-radius:26px;padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modal-head h2{font-size:1.45rem;font-weight:900}.modal-close{width:36px;height:36px;border:0;background:#fff;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;cursor:pointer;color:#516278}.modal-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px}

.fake-chart{height:270px;display:flex;align-items:end;gap:18px;margin-top:24px;border-left:2px solid #8aa0ba;border-bottom:2px solid #8aa0ba;background:repeating-linear-gradient(to bottom, transparent 0 65px, #dce8f5 66px 67px);padding:0 28px}.fake-chart div{flex:1;border-radius:999px 999px 0 0;background:linear-gradient(180deg,#08b8d5,#006fdd)}.donut{width:190px;height:190px;border-radius:50%;margin:24px auto;background:conic-gradient(#2fbf70 0 48%,#ff9f1c 48% 75%,#ef2f45 75% 100%);position:relative}.donut::after{content:"";position:absolute;inset:48px;border-radius:50%;background:#fff}.legend{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-weight:800}.legend b{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}.green-dot{background:var(--success)}.orange-dot{background:var(--warning)}.red-dot{background:var(--danger)}
.calendar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}.calendar-item{padding:20px;border-left:8px solid var(--secondary)}.calendar-item.pendiente{border-left-color:var(--warning)}.calendar-item.aprobada{border-left-color:var(--success)}.calendar-item.rechazada{border-left-color:var(--danger)}.profile-avatar{width:92px;height:92px;border-radius:28px;display:grid;place-items:center;background:var(--gradient);color:#fff;font-size:2rem;font-weight:900}.profile-card{text-align:center}.details-list p,.timeline div{padding:12px 0;border-bottom:1px solid var(--border)}.balance-strip{display:grid;grid-template-columns:repeat(4,auto);gap:12px;align-items:center;width:max-content;max-width:100%;margin-bottom:20px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:12px 16px}.hidden{display:none}.progress{width:100%;height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(135deg,var(--secondary),var(--accent))}

body.dark-mode{--bg:#0f172a;--surface:#111827;--text:#e5e7eb;--muted:#94a3b8;--border:#263449;--soft:#172033;background:#0f172a;color:#e5e7eb}body.dark-mode .sidebar,body.dark-mode .topbar,body.dark-mode .search-box,body.dark-mode .circle-btn,body.dark-mode .user-chip,body.dark-mode .panel-card,body.dark-mode .stat-card,body.dark-mode .calendar-item,body.dark-mode .request-card,body.dark-mode .table-wrap,body.dark-mode .modal-card{background:#111827;color:#e5e7eb}body.dark-mode .data-table th{background:#172033}body.dark-mode .data-table tbody tr:nth-child(even),body.dark-mode .data-table tbody tr:hover{background:#162338}body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#0f172a!important;color:#e5e7eb!important}

/* Perfil estilo Lovable - Administrador y empleado */
.profile-hero{
  margin:30px;
  min-height:190px;
  border-radius:34px;
  background:var(--gradient);
  color:#fff;
  display:flex;
  align-items:center;
  gap:28px;
  padding:34px 42px;
  box-shadow:0 22px 48px rgba(23,63,158,.16);
  border:1px solid rgba(255,255,255,.18);
}
.profile-hero-avatar{
  width:108px;
  height:108px;
  border-radius:30px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  border:5px solid rgba(255,255,255,.10);
  color:#fff;
  font-size:2.2rem;
  font-weight:900;
  flex:0 0 auto;
}
.profile-hero-info h2{
  color:#fff;
  font-size:2.2rem;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.8px;
  margin:10px 0 6px;
}
.profile-hero-info p{
  color:rgba(255,255,255,.9);
  font-weight:650;
  font-size:1.02rem;
}
.profile-role-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  color:#fff;
  font-size:.78rem;
  font-weight:900;
}
.profile-lovable-grid{
  margin:0 30px 30px;
  display:grid;
  grid-template-columns:minmax(300px,430px) 1fr;
  gap:24px;
  align-items:start;
}
.profile-info-card{
  min-height:320px;
}
.profile-info-card h3,
.profile-history-card h3{
  font-size:1.12rem;
  margin-bottom:22px;
}
.profile-info-row{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.profile-info-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#d8f3ff;
  color:#1747ad;
  font-size:1.2rem;
  flex:0 0 auto;
}
.profile-info-row span{
  display:block;
  color:#60728a;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.6px;
}
.profile-info-row strong{
  display:block;
  color:#0f172a;
  font-size:1rem;
  margin-top:2px;
}
.profile-summary-area{
  display:grid;
  gap:20px;
}
.profile-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.profile-stat-card{
  min-height:118px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.profile-stat-card span{
  display:block;
  color:#60728a;
  font-size:.8rem;
  letter-spacing:.8px;
  font-weight:900;
}
.profile-stat-card h3{
  font-size:2rem;
  margin-top:8px;
  font-weight:900;
}
.profile-history-card{
  min-height:148px;
}
.empty-text{
  color:#60728a;
  font-weight:650;
}
.profile-history-list{
  display:grid;
  gap:0;
}
.profile-history-item{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:16px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--border);
}
.profile-history-item:last-child{
  border-bottom:0;
}
.history-main strong{
  display:block;
  color:#0f172a;
  font-weight:900;
}
.history-main span,
.history-main small{
  display:block;
  color:#60728a;
  margin-top:2px;
  font-weight:650;
}

/* ===== REPORTES LOVABLE STYLE ===== */
.cyan-soft{background:linear-gradient(100deg,#fff 0%,#e8fbff 100%)}
.report-actions{
  margin:28px 30px 26px!important;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.report-actions .btn-primary,
.report-actions .btn-outline{
  min-height:48px;
  border-radius:22px;
  padding:0 22px;
  font-size:.95rem;
}
.report-stats{margin-top:0!important}
.report-stats .stat-card{
  min-height:124px;
  border-radius:24px;
  padding:26px;
}
.reports-grid{
  margin:0 30px 28px!important;
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  align-items:stretch;
}
.report-chart-card,
.report-donut-card{
  min-height:390px;
  padding:26px;
  border-radius:24px;
}
.report-chart-card h3,
.report-donut-card h3,
.report-detail-card h3{
  font-size:1.05rem;
  font-weight:900;
  color:#0f172a;
  margin-bottom:16px;
}
.bar-chart-box{
  position:relative;
  height:280px;
  display:grid;
  grid-template-columns:50px 1fr;
  gap:10px;
  margin-top:8px;
  overflow:hidden;
}
.chart-lines{
  position:absolute;
  left:50px;
  right:0;
  top:12px;
  bottom:40px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 58px, #dce8f5 59px 60px),
    repeating-linear-gradient(to right, transparent 0 205px, #dce8f5 206px 207px);
  border-left:2px solid #8fa2bb;
  border-bottom:2px solid #8fa2bb;
  pointer-events:none;
}
.chart-y-axis{
  position:relative;
  z-index:2;
  height:240px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:5px 8px 34px 0;
  text-align:right;
  color:#60728a;
  font-size:.85rem;
  font-weight:700;
}
.chart-bars{
  position:relative;
  z-index:3;
  height:240px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:end;
  gap:34px;
  padding:12px 26px 34px 10px;
}
.bar-group{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.bar-stack{
  width:100%;
  max-width:150px;
  min-height:8px;
  display:flex;
  flex-direction:column-reverse;
  overflow:hidden;
  border-radius:10px 10px 0 0;
  transition:.2s ease;
}
.bar-group:hover .bar-stack{filter:brightness(.98);transform:translateY(-2px)}
.bar-green{display:block;background:#2fbf70;width:100%}
.bar-orange{display:block;background:#ff9f1c;width:100%}
.bar-red{display:block;background:#ef2f45;width:100%}
.bar-group small{
  color:#60728a;
  font-weight:700;
  white-space:nowrap;
}
.report-legend{margin-top:6px;color:#16a34a}
.report-legend span{color:#0f172a;font-size:.9rem}
.report-donut-card{display:flex;flex-direction:column}
.report-donut{
  width:235px;
  height:235px;
  margin:24px auto 26px;
}
.report-donut::after{inset:58px}
.report-detail-card{
  margin:0 30px 30px!important;
  padding:0;
  overflow:hidden;
  border-radius:24px;
}
.report-detail-head{
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 26px;
  border-bottom:1px solid var(--border);
}
.icon-action{
  width:42px;
  height:42px;
  border:0;
  background:#fff;
  color:#475569;
  border-radius:14px;
  cursor:pointer;
  font-size:1.15rem;
}
.icon-action:hover{background:#edf4fb;color:#0f2f6b}
.report-table th{
  font-size:.82rem;
  letter-spacing:.7px;
  color:#60728a;
  background:#f1f6fb;
}
.report-table td{height:64px}
.report-consumption{
  display:grid;
  grid-template-columns:1fr 48px;
  gap:14px;
  align-items:center;
}
.report-consumption .progress{height:10px;background:#e6eef6}
.report-consumption strong{color:#60728a;font-size:.9rem;text-align:right}
@media(max-width:1100px){
  .reports-grid{grid-template-columns:1fr}
  .report-donut{width:210px;height:210px}
  .chart-bars{gap:20px}
}
@media(max-width:768px){
  .report-actions,.reports-grid,.report-detail-card{margin-left:18px!important;margin-right:18px!important}
  .report-actions{gap:10px}
  .report-actions .btn-primary,.report-actions .btn-outline{width:100%;justify-content:center}
  .bar-chart-box{height:250px;grid-template-columns:38px 1fr}
  .chart-lines{left:38px}
  .chart-bars{gap:12px;padding-right:12px;padding-left:8px}
  .bar-group small{font-size:.7rem;transform:rotate(-18deg)}
  .report-detail-head{padding:0 18px}
  .report-consumption{grid-template-columns:1fr 42px}
}
/* Encabezado profesional solo para impresión */
.print-report-header{display:none;}

@media print{
  @page{size:A4 landscape;margin:10mm;}
  body{background:#fff!important;color:#0f172a!important;font-family:Arial,Helvetica,sans-serif!important;}
  body *{visibility:hidden!important;box-shadow:none!important;text-shadow:none!important;}
  #reportTable, #reportTable *{visibility:visible!important;}
  #reportTable{position:absolute!important;left:0!important;top:0!important;width:100%!important;border-collapse:collapse!important;table-layout:fixed!important;font-size:11px!important;background:#fff!important;}
  #reportTable thead{display:table-header-group!important;}
  #reportTable tr{page-break-inside:avoid!important;}
  #reportTable th{background:#0f2f6b!important;color:#fff!important;border:1px solid #0b2454!important;padding:8px 7px!important;text-align:left!important;text-transform:uppercase!important;letter-spacing:.3px!important;font-weight:800!important;}
  #reportTable td{border:1px solid #cfe2f5!important;padding:8px 7px!important;vertical-align:middle!important;background:#fff!important;color:#0f172a!important;word-break:break-word!important;}
  #reportTable tbody tr:nth-child(even) td{background:#eefaff!important;}
  #reportTable small, #reportTable button, #reportTable i{display:none!important;}
  #reportTable .saldo-pill,#reportTable .badge{display:inline-block!important;min-width:36px!important;text-align:center!important;border:1px solid #9cc8ea!important;border-radius:999px!important;padding:4px 8px!important;background:#fff!important;color:#0f172a!important;font-weight:800!important;}
}

/* CALENDARIO LOVABLE */
.calendar-page{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px;
    align-items:start;
}
.calendar-main-card,
.side-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:28px;
    box-shadow:var(--shadow);
}
.calendar-main-card{
    padding:28px;
}
.calendar-header-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:28px;
}
.calendar-header-row h2{
    font-size:1.45rem;
    font-weight:900;
    color:#0f172a;
}
.calendar-nav{
    display:flex;
    gap:8px;
    align-items:center;
}
.calendar-nav-btn,
.calendar-today-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-decoration:none;
    color:#0f172a;
    background:#fff;
    border:1px solid var(--border);
    font-weight:800;
    transition:.2s ease;
}
.calendar-today-btn{
    width:auto;
    padding:0 18px;
    border-radius:999px;
}
.calendar-nav-btn:hover,
.calendar-today-btn:hover{
    border-color:#2563eb;
    color:#2563eb;
    transform:translateY(-1px);
}
.calendar-weekdays{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
    margin-bottom:10px;
    color:#64748b;
    font-size:.78rem;
    font-weight:900;
    text-align:center;
}
.calendar-month-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:6px;
}
.calendar-day{
    min-height:126px;
    border:1px solid #e5edf5;
    border-radius:15px;
    background:#fff;
    padding:12px 9px;
    position:relative;
    overflow:hidden;
    transition:.2s ease;
}
.calendar-day.empty{
    background:transparent;
    border:0;
}
.calendar-day.today{
    border-color:#123f91;
    background:#f7f9ff;
    box-shadow:inset 0 0 0 1px rgba(15,47,107,.10);
}
.calendar-day.has-event{
    background:#eafaff;
    border-color:#c8f2fb;
}
.calendar-day:hover:not(.empty){
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(15,47,107,.08);
}
.day-number{
    font-weight:800;
    color:#0f172a;
    font-size:.94rem;
}
.calendar-events{
    margin-top:74px;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.calendar-pill{
    display:block;
    width:100%;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    border-radius:6px;
    padding:3px 6px;
    font-size:.72rem;
    font-weight:800;
    color:#7c4a03;
    background:#f8ead0;
}
.calendar-pill.aprobada{background:#dcfce7;color:#15803d;}
.calendar-pill.pendiente{background:#ffedd5;color:#c2410c;}
.calendar-pill.rechazada{background:#fee2e2;color:#dc2626;}
.calendar-more{
    display:inline-flex;
    width:max-content;
    padding:2px 7px;
    border-radius:999px;
    background:#e2e8f0;
    color:#475569;
    font-size:.7rem;
    font-weight:900;
}
.calendar-side{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.side-card{
    padding:24px;
}
.side-card h3{
    font-size:1.05rem;
    font-weight:900;
    margin-bottom:16px;
}
.absence-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}
.absence-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
}
.avatar.mini{
    width:42px;
    height:42px;
    border-radius:13px;
    font-size:.88rem;
    flex:0 0 auto;
}
.absence-item strong{
    display:block;
    font-weight:900;
    color:#0f172a;
    margin-bottom:2px;
}
.absence-item span{
    display:block;
    color:#64748b;
    font-size:.85rem;
    margin-bottom:6px;
}
.legend-card p{
    display:flex;
    align-items:center;
    gap:9px;
    color:#334155;
    margin:10px 0;
    font-weight:600;
}
.dot{
    width:13px;
    height:13px;
    border-radius:50%;
    display:inline-block;
}
.dot.green{background:#22c55e;}
.dot.orange{background:#f59e0b;}
.dot.red{background:#ef4444;}
.empty-text{
    color:#64748b;
    font-weight:600;
}
@media(max-width:1100px){
    .calendar-page{grid-template-columns:1fr;}
}
@media(max-width:720px){
    .calendar-main-card{padding:20px;border-radius:24px;}
    .calendar-header-row{align-items:flex-start;flex-direction:column;}
    .calendar-weekdays{gap:4px;font-size:.68rem;}
    .calendar-month-grid{gap:4px;}
    .calendar-day{min-height:54px;border-radius:14px;padding:8px 6px;text-align:center;}
    .calendar-day.empty{display:none;}
    .calendar-events{margin-top:8px;}
    .calendar-pill{font-size:.62rem;padding:2px 4px;border-radius:7px;max-width:34px;margin:0 auto;}
    .side-card{padding:20px;border-radius:24px;}
}

/* Dashboard empleado - estilo Lovable */
.employee-dashboard-page .topbar{
  background:rgba(255,255,255,.88);
}
.employee-hero-card{
  margin:30px 30px 28px;
  min-height:220px;
  border-radius:34px;
  padding:38px 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  background:linear-gradient(135deg,#143c97 0%,#0b63d9 52%,#07b8cf 100%);
  box-shadow:0 22px 48px rgba(23,63,158,.16);
  color:#fff;
}
.employee-balance-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#dff6ff;
  font-size:.86rem;
  font-weight:900;
  letter-spacing:.5px;
  margin-bottom:16px;
}
.employee-hero-card h2{
  color:#fff;
  font-size:2.15rem;
  font-weight:950;
  letter-spacing:-.6px;
  margin:0 0 12px;
}
.employee-hero-card h2 small{
  font-size:1.05rem;
  color:rgba(255,255,255,.75);
  font-weight:850;
}
.employee-hero-card p{
  color:rgba(255,255,255,.9);
  font-weight:650;
  margin:0 0 18px;
}
.employee-progress{
  width:100%;
  max-width:520px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.22);
  overflow:hidden;
}
.employee-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:#fff;
}
.employee-new-request{
  min-height:52px;
  padding:0 28px;
  border-radius:28px;
  background:#fff;
  color:#143c97;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 18px 30px rgba(3,44,110,.14);
  white-space:nowrap;
}
.employee-new-request:hover{transform:translateY(-1px)}
.employee-stats-grid{
  margin:0 30px 28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.employee-stat-card{
  min-height:126px;
  border:1px solid var(--border);
  border-radius:24px;
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  box-shadow:var(--shadow);
}
.employee-stat-card.soft-cyan{background:linear-gradient(100deg,#fff 0%,#e8fbff 100%)}
.employee-stat-card.soft-green{background:linear-gradient(100deg,#fff 0%,#e9fbef 100%)}
.employee-stat-card.soft-indigo{background:linear-gradient(100deg,#fff 0%,#eef4ff 100%)}
.employee-stat-card span{
  display:block;
  color:var(--muted);
  font-size:.84rem;
  font-weight:900;
  letter-spacing:.85px;
}
.employee-stat-card h3{
  margin-top:9px;
  font-size:2.2rem;
  font-weight:950;
  letter-spacing:-.7px;
}
.employee-stat-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:25px;
  box-shadow:0 12px 22px rgba(0,111,221,.2);
}
.employee-stat-icon.cyan{background:#06aeca}
.employee-stat-icon.green{background:#16b866}
.employee-stat-icon.indigo{background:#1747ad}
.employee-history-card{
  margin:0 30px 30px;
  border:1px solid var(--border);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:26px 28px;
}
.employee-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}
.employee-history-head h2{
  font-size:1.1rem;
  font-weight:900;
  margin:0 0 3px;
}
.employee-history-head p{
  margin:0;
  color:var(--muted);
  font-weight:650;
}
.employee-history-head a{
  color:#143c97;
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}
.employee-history-list{display:grid;gap:0}
.employee-history-row{
  min-height:76px;
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.employee-history-row:last-child{border-bottom:0}
.history-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  color:#1747ad;
  background:#d8f3ff;
  font-size:20px;
}
.history-info h3{
  font-size:1rem;
  font-weight:900;
  margin:0 0 4px;
  color:#0f172a;
}
.history-info p{
  margin:0;
  color:#60728a;
  font-weight:650;
  font-size:.9rem;
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:7px 13px;
  font-size:.84rem;
  font-weight:900;
  white-space:nowrap;
}
.status-pill.aprobada{background:#dcfce7;color:#16a34a;border:1px solid #86efac}
.status-pill.rechazada{background:#fee2e2;color:#ef2f45;border:1px solid #fca5a5}
.status-pill.pendiente{background:#ffedd5;color:#b45309;border:1px solid #fdba74}
.employee-empty-history{
  min-height:110px;
  display:grid;
  place-items:center;
  gap:8px;
  color:#64748b;
  font-weight:700;
}
.employee-empty-history i{font-size:28px;color:#06aeca}
@media(max-width:900px){
  .employee-hero-card{margin:20px 18px;display:block;padding:28px;border-radius:28px;min-height:auto}
  .employee-new-request{margin-top:22px;width:100%}
  .employee-stats-grid{grid-template-columns:1fr;margin:0 18px 20px}
  .employee-history-card{margin:0 18px 22px;padding:22px}
  .employee-history-row{grid-template-columns:44px 1fr;align-items:start}
  .employee-history-row .status-pill{grid-column:2;justify-self:start;margin-top:2px}
}
@media(max-width:520px){
  .employee-hero-card{padding:26px 24px;border-radius:26px}
  .employee-hero-card h2{font-size:1.95rem}
  .employee-hero-card h2 small{display:inline;font-size:.95rem}
  .employee-stat-card{min-height:108px;padding:24px}
  .employee-history-head{align-items:flex-start}
  .history-info h3{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}

/* ===============================
   EMPLEADO - NUEVA SOLICITUD LOVABLE
   =============================== */
.vacation-alert{
  width:min(980px,calc(100% - 60px));
  margin:0 auto 18px!important;
  background:#fff7ed;
  border:1px solid #fed7aa;
  color:#9a3412;
  border-radius:20px;
  padding:16px 18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  box-shadow:var(--shadow);
}
.vacation-alert i{font-size:24px;color:#f97316}
.vacation-alert p{margin:2px 0 0;color:#9a3412;font-weight:650}
.vacation-request-card{
  width:min(980px,calc(100% - 60px));
  margin:0 auto 36px!important;
  background:#fff;
  border:1px solid var(--border);
  border-radius:30px;
  padding:36px 42px;
  box-shadow:0 28px 70px rgba(15,47,107,.11);
}
.vacation-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  margin-bottom:24px;
}
.vacation-card-head h2{
  font-size:1.65rem;
  font-weight:950;
  letter-spacing:-.5px;
  margin:0 0 6px;
  color:#0f172a;
}
.vacation-card-head p{
  margin:0;
  color:#5d6d83;
  font-weight:650;
  max-width:590px;
}
.mini-balance-pill{
  min-width:145px;
  border-radius:20px;
  background:#eef7ff;
  border:1px solid #bfdbfe;
  padding:13px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.mini-balance-pill span{
  color:#5d6d83;
  font-weight:900;
  font-size:.78rem;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.mini-balance-pill strong{font-size:1.45rem;color:#0f172a}
.mode-switch{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:22px;
}
.mode-option{
  cursor:pointer;
}
.mode-option input{display:none}
.mode-option span{
  min-height:56px;
  border:1px solid var(--border);
  border-radius:18px;
  background:#f8fcff;
  color:#314158;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px;
  font-weight:900;
  transition:.2s;
}
.mode-option span i{font-size:20px;color:#1747ad}
.mode-option.active span{
  color:#fff;
  background:var(--gradient);
  border-color:transparent;
  box-shadow:0 14px 28px rgba(0,111,221,.18);
}
.mode-option.active span i{color:#fff}
.vacation-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.field-card,
.reason-box{
  display:block;
  color:#0f172a;
  font-weight:900;
  margin:0;
}
.field-card input,
.field-card select,
.reason-box textarea{
  width:100%;
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:20px;
  background:#f8fcff;
  outline:0;
  color:#0f172a;
  font-size:1rem;
  font-weight:700;
  transition:.2s;
}
.field-card input,
.field-card select{height:58px;padding:0 18px}
.reason-box textarea{
  min-height:120px;
  resize:vertical;
  padding:18px;
  line-height:1.5;
}
.field-card input:focus,
.field-card select:focus,
.reason-box textarea:focus{
  border-color:#3b82f6;
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.custom-dates-box{
  border:1px solid var(--border);
  border-radius:24px;
  padding:20px;
  margin-bottom:18px;
  background:linear-gradient(120deg,#fff 0%,#f8fcff 100%);
}
.custom-date-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  margin-top:10px;
}
.custom-date-row input{margin-top:0!important}
.btn-add-date{
  height:58px;
  border:0;
  border-radius:18px;
  background:#edf4fb;
  color:#143c97;
  padding:0 18px;
  font-weight:950;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn-add-date:hover{background:#d8f3ff}
.selected-dates{
  margin-top:14px;
  min-height:44px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.empty-dates{
  color:#64748b;
  background:#eef4fb;
  border-radius:999px;
  padding:9px 13px;
  font-size:.9rem;
  font-weight:750;
}
.date-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#d8f3ff;
  color:#143c97;
  border:1px solid #bee6ff;
  border-radius:999px;
  padding:9px 10px 9px 13px;
  font-size:.9rem;
  font-weight:900;
}
.date-chip button{
  width:22px;
  height:22px;
  border:0;
  border-radius:50%;
  background:rgba(20,63,151,.12);
  color:#143c97;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.vacation-summary-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  gap:16px;
  margin:20px 0 22px;
}
.summary-card{
  min-height:104px;
  border:1px solid var(--border);
  border-radius:22px;
  padding:18px 20px;
  background:#f8fcff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.summary-card.requested{
  background:var(--gradient);
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 42px rgba(0,111,221,.16);
}
.summary-card span{
  color:#5d6d83;
  font-size:.78rem;
  font-weight:950;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin-bottom:7px;
}
.summary-card.requested span{color:rgba(255,255,255,.82)}
.summary-card strong,
.summary-card input{
  font-size:1.9rem;
  font-weight:950;
  color:#0f172a;
}
.summary-card input{
  width:100%;
  border:0;
  background:transparent;
  outline:0;
  color:#fff;
  padding:0;
}
.vacation-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:22px;
}
.vacation-submit{
  min-width:230px;
}
.hidden{display:none!important}
@media(max-width:900px){
  .vacation-request-card,.vacation-alert{width:calc(100% - 36px)}
  .vacation-request-card{padding:28px 24px;border-radius:28px}
  .vacation-card-head{display:block}
  .mini-balance-pill{margin-top:18px;width:100%}
  .mode-switch,.vacation-fields,.vacation-summary-grid{grid-template-columns:1fr}
  .custom-date-row{grid-template-columns:1fr}
  .vacation-actions{display:grid;grid-template-columns:1fr;}
  .vacation-submit,.vacation-actions .btn-outline{width:100%}
}
@media(max-width:520px){
  .vacation-request-card{padding:24px 20px;border-radius:26px}
  .vacation-card-head h2{font-size:1.45rem}
  .summary-card{min-height:94px}
}

/* Mis solicitudes empleado - estilo Lovable */
.employee-requests-page{
  padding:28px 30px 60px;
}
.request-tabs{
  margin-bottom:24px;
}
.employee-request-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.employee-request-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:28px;
  padding:24px 26px;
  min-height:150px;
  box-shadow:var(--shadow);
  display:flex;
  gap:20px;
  align-items:flex-start;
}
.request-card-icon{
  width:58px;
  height:58px;
  border-radius:18px;
  background:var(--gradient);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.35rem;
  flex:0 0 auto;
  box-shadow:0 18px 34px rgba(0,111,221,.18);
}
.request-card-body{
  width:100%;
  min-width:0;
}
.request-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.request-card-head h3{
  font-size:1.02rem;
  font-weight:900;
  letter-spacing:-.2px;
  margin-bottom:4px;
  color:#0f172a;
}
.request-card-head p{
  color:#60728a;
  font-weight:650;
  font-size:.92rem;
}
.request-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:15px;
}
.request-chips span{
  background:#eaf2fb;
  color:#0f172a;
  border-radius:999px;
  padding:7px 13px;
  font-size:.84rem;
  font-weight:850;
  display:inline-flex;
  align-items:center;
}
.request-decision-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}
.request-decision-info small{
  display:block;
  color:#60728a;
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:3px;
}
.request-decision-info strong{
  color:#0f172a;
  font-size:.9rem;
  font-weight:800;
}
.empty-state{
  text-align:center;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:12px;
}
.empty-icon{
  width:72px;
  height:72px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:#d8f3ff;
  color:#143f97;
  font-size:2rem;
}
@media(max-width:900px){
  .employee-request-grid{grid-template-columns:1fr}
  .employee-requests-page{padding:22px 18px 50px}
}
@media(max-width:520px){
  .employee-request-card{padding:20px;gap:14px;border-radius:24px}
  .request-card-icon{width:54px;height:54px}
  .request-card-head{align-items:flex-start}
  .request-card-head .badge{position:absolute;right:18px;top:18px}
  .employee-request-card{position:relative}
  .request-card-head{padding-right:110px}
  .request-decision-info{grid-template-columns:1fr}
  .request-tabs{gap:8px}
  .tabs a{padding:0 14px;min-height:38px;font-size:.88rem}
}

/* Ajuste final perfil empleado estilo Lovable */
.employee-profile-grid .profile-history-card{
  min-height:160px;
}
.employee-profile-hero .profile-hero-avatar{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.employee-profile-grid .profile-info-card{
  align-self:stretch;
}
.profile-stat-card .stat-icon{
  flex:0 0 auto;
}

.notifications-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
}
.notification-count.is-empty{
  display:none;
}
.notifications-panel{
  position:absolute;
  right:0;
  top:62px;
  width:min(390px,calc(100vw - 28px));
  max-height:520px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 70px rgba(15,47,107,.18);
  z-index:80;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.notifications-panel.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.notifications-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--border);
}
.notifications-head h3{
  font-size:1rem;
  font-weight:950;
  margin:0 0 3px;
}
.notifications-head p{
  margin:0;
  color:var(--muted);
  font-size:.82rem;
  font-weight:750;
}
.mark-read-btn{
  border:0;
  border-radius:999px;
  background:#eaf7ff;
  color:#143f97;
  cursor:pointer;
  font-size:.78rem;
  font-weight:900;
  padding:9px 12px;
}
.mark-read-btn:hover{
  background:#d8f3ff;
}
.push-device-card{
  margin:14px 14px 12px;
  padding:14px;
  border:1px solid #dbeafe;
  border-radius:18px;
  background:linear-gradient(135deg,#f8fbff,#eefaff);
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:12px;
  align-items:center;
}
.push-device-icon{
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#1747ad,#06b6d4);
  color:#fff;
  font-size:1.1rem;
  box-shadow:0 12px 24px rgba(6,115,220,.18);
}
.push-device-copy{
  min-width:0;
}
.push-device-copy strong{
  display:block;
  color:#0f172a;
  font-size:.9rem;
  font-weight:950;
}
.push-device-copy p{
  margin:3px 0 0;
  color:#5b6b82;
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
}
.push-device-btn{
  min-height:38px;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#1747ad,#06b6d4);
  color:#fff;
  cursor:pointer;
  font-weight:950;
  padding:0 14px;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(6,115,220,.16);
}
.push-device-btn:disabled{
  cursor:default;
  box-shadow:none;
  opacity:.78;
}
.push-device-card[data-push-state="active"]{
  border-color:#bbf7d0;
  background:linear-gradient(135deg,#f0fdf4,#ecfeff);
}
.push-device-card[data-push-state="active"] .push-device-icon{
  background:linear-gradient(135deg,#16a34a,#0d9488);
}
.push-device-card[data-push-state="active"] .push-device-btn{
  background:#dcfce7;
  color:#166534;
  cursor:pointer;
}
.push-device-card[data-push-state="active"] .push-device-btn:hover{
  background:#bbf7d0;
}
.push-device-card[data-push-state="blocked"],
.push-device-card[data-push-state="error"]{
  border-color:#fecdd3;
  background:linear-gradient(135deg,#fff7f7,#fff1f2);
}
.push-device-card[data-push-state="blocked"] .push-device-icon,
.push-device-card[data-push-state="error"] .push-device-icon{
  background:linear-gradient(135deg,#dc2626,#f97316);
}
.push-device-card[data-push-state="blocked"] .push-device-btn,
.push-device-card[data-push-state="error"] .push-device-btn{
  background:#fee2e2;
  color:#991b1b;
}
.push-device-card[data-push-state="loading"] .push-device-icon i{
  animation:pushSpin .9s linear infinite;
}
@keyframes pushSpin{to{transform:rotate(360deg)}}
.notifications-list{
  display:grid;
  gap:0;
}
.notification-item{
  display:grid;
  grid-template-columns:12px 1fr;
  gap:12px;
  padding:15px 18px;
  border-bottom:1px solid #edf4fb;
  transition:background .2s ease;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
.notification-item:hover{background:#f8fcff}
.notification-item:last-child{
  border-bottom:0;
}
.notification-item.unread{
  background:#f1fbff;
}
.notification-item strong{
  display:block;
  color:#0f172a;
  font-size:.92rem;
  font-weight:950;
}
.notification-item p{
  margin:4px 0 6px;
  color:#516278;
  font-size:.86rem;
  font-weight:650;
  line-height:1.4;
}
.notification-item small{
  color:#7b8aa0;
  font-size:.76rem;
  font-weight:750;
}
.notification-dot{
  width:10px;
  height:10px;
  margin-top:6px;
  border-radius:50%;
  background:#0ea5e9;
}
.notification-dot.success{background:var(--success)}
.notification-dot.warning{background:var(--warning)}
.notification-dot.danger{background:var(--danger)}
.notifications-empty{
  min-height:150px;
  display:grid;
  place-items:center;
  gap:8px;
  color:#64748b;
  font-weight:750;
  text-align:center;
  padding:24px;
}
.notifications-empty i{
  color:#08b8d5;
  font-size:2rem;
}
.chart-tooltip{
  position:fixed;
  min-width:156px;
  max-width:260px;
  z-index:9999;
  pointer-events:none;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid #dbe7f4;
  background:#fff;
  color:#0f172a;
  box-shadow:0 18px 44px rgba(15,47,107,.18);
  opacity:0;
  transform:translateY(4px) scale(.98);
  transition:opacity .14s ease, transform .14s ease;
}
.chart-tooltip.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
.chart-tooltip strong{
  display:block;
  margin-bottom:8px;
  color:#0f172a;
  font-size:1rem;
  font-weight:850;
}
.chart-tooltip span{
  display:block;
  color:#516278;
  font-size:.95rem;
  font-weight:750;
  line-height:1.75;
}
.chart-tooltip span.success{
  color:#16a34a;
}
.chart-tooltip span.warning{
  color:#ff8a00;
}
.chart-tooltip span.danger{
  color:#ef2f45;
}

/* Correcciones finales de alineacion, modal y animaciones */
.topbar-actions{
  flex-shrink:0;
}
.topbar-actions .search-box{
  display:none!important;
}
.employees-header-card{
  margin-bottom:22px;
}
body.modal-open{
  overflow:hidden;
}
.modal{
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.modal.open{
  opacity:1;
  pointer-events:auto;
}
.modal-card{
  transform:translateY(12px) scale(.98);
  transition:transform .24s ease;
}
.modal.open .modal-card{
  transform:translateY(0) scale(1);
}
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-outline,
.btn-soft,
.hero-btn,
.employee-new-request,
.btn-add-date,
.circle-btn,
.icon-link,
.action-icon,
.small-decision{
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary:hover,
.hero-btn:hover,
.employee-new-request:hover,
.btn-add-date:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(0,111,221,.22);
}
.btn-outline:hover,
.btn-secondary:hover,
.btn-soft:hover,
.circle-btn:hover{
  transform:translateY(-1px);
  border-color:#93c5fd;
  color:#143f97;
  background:#eef8ff;
}
.panel-card,
.stat-card,
.employee-stat-card,
.employee-history-card,
.calendar-main-card,
.side-card,
.calendar-item,
.employee-request-card,
.profile-info-card,
.profile-history-card,
.profile-stat-card{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.panel-card:hover,
.stat-card:hover,
.employee-stat-card:hover,
.employee-history-card:hover,
.calendar-main-card:hover,
.side-card:hover,
.calendar-item:hover,
.employee-request-card:hover,
.profile-info-card:hover,
.profile-history-card:hover,
.profile-stat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(15,47,107,.11);
  border-color:#c7dff4;
}
.sidebar,
.sidebar-menu a{
  transition:left .26s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.badge,
.status-pill,
.department-pill,
.date-chip{
  transition:transform .18s ease, filter .18s ease;
}
.badge:hover,
.status-pill:hover,
.department-pill:hover,
.date-chip:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
}
.bar-stack{
  transform-origin:bottom;
  animation:chartGrow .9s cubic-bezier(.2,.75,.25,1) both;
}
.fake-chart div{
  transform-origin:bottom;
  animation:chartGrow .85s cubic-bezier(.2,.75,.25,1) both;
}
.progress span,
.employee-progress span,
.hero-progress span{
  transform-origin:left;
  animation:progressGrow .85s cubic-bezier(.2,.75,.25,1) both;
}
.report-donut,
.donut{
  animation:donutPop .65s ease both;
}
@keyframes chartGrow{
  from{transform:scaleY(0);opacity:.55}
  to{transform:scaleY(1);opacity:1}
}
@keyframes progressGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes donutPop{
  from{transform:scale(.88);opacity:.35}
  to{transform:scale(1);opacity:1}
}
.vacation-request-card{
  margin-top:30px!important;
}
.vacation-card-head,
.vacation-summary-grid,
.vacation-actions{
  width:100%;
}
.vacation-actions .btn-outline,
.vacation-actions .btn-primary{
  min-height:52px;
}
.request-search{
  display:flex!important;
}

.readonly-pill,
.saldo-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:8px 13px;
  font-size:.82rem;
  font-weight:950;
}
.readonly-pill{
  background:#eef6ff;
  color:#1747ad;
  border:1px solid #d7e9ff;
}
.saldo-pill.green{
  background:#dcfce7;
  color:#16a34a;
  border:1px solid #86efac;
}
.saldo-pill.yellow,
.badge.yellow{
  background:#fef3c7;
  color:#b45309;
  border:1px solid #fcd34d;
}
.saldo-pill.red{
  background:#fee2e2;
  color:#ef2f45;
  border:1px solid #fca5a5;
}
.excel-wrap{
  border-radius:18px;
}
.excel-table th,
.excel-table td{
  white-space:nowrap;
  padding:14px 16px;
}
.holiday-form{
  margin:18px 0 24px;
}
.inline-delete{
  display:inline-flex;
  margin:0;
}
.inline-delete button{
  border:0;
}
.vacation-alert.anticipada{
  background:#eef6ff;
  border-color:#cfe7ff;
}
.vacation-alert.anticipada i{
  color:#1747ad;
}
.vacation-alert.anticipada p{
  color:#516278;
}
.date-chip.muted{
  opacity:.58;
  filter:grayscale(.2);
}
@media(max-width:900px){
  .request-search{
    display:flex!important;
  }
  .modal.open{
    align-items:flex-end;
  }
}
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* Fase 3: vacaciones colectivas, pulido de diseño y preparación profesional */
.collective-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(290px,.75fr);
  gap:24px;
  margin-top:28px;
}
.collective-form-card,
.collective-info-card,
.collective-table-card{
  animation:cardFadeUp .45s ease both;
}
.collective-form{display:grid;gap:18px;margin-top:20px}
.collective-form label{
  display:grid;
  gap:9px;
  color:#1e293b;
  font-weight:850;
}
.collective-form input,
.collective-form select,
.collective-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
  background:#fbfdff;
  color:#0f172a;
  font:inherit;
  outline:none;
  transition:.22s ease;
}
.collective-form input:focus,
.collective-form select:focus,
.collective-form textarea:focus{
  border-color:#0ea5e9;
  box-shadow:0 0 0 4px rgba(14,165,233,.13);
  background:#fff;
}
.form-grid.two{grid-template-columns:1fr 1fr}
.readonly-box{
  margin-top:20px;
  border:1px solid #dbeafe;
  background:linear-gradient(135deg,#eff6ff,#f8fbff);
  color:#1747ad;
  border-radius:22px;
  padding:24px;
  display:grid;
  gap:8px;
}
.readonly-box i{font-size:2rem;color:#0ea5e9}
.readonly-box p{color:#516278;font-weight:700}
.soft-list{list-style:none;display:grid;gap:14px;margin-top:18px;color:#516278;font-weight:750}
.soft-list li{display:flex;align-items:flex-start;gap:10px}
.soft-list i{color:#0ea5e9;font-size:1.1rem;margin-top:2px}
.saldo-pill.blue{
  background:#dbeafe;
  color:#1d4ed8;
  border:1px solid #93c5fd;
}
.vacation-alert.success{
  background:#ecfdf5;
  border-color:#bbf7d0;
}
.vacation-alert.success i{color:#16a34a}
.vacation-alert.success strong{color:#166534}
.vacation-alert.success p{color:#166534}
.btn-primary,
.btn-outline,
.circle-btn,
.hero-btn,
.small-decision,
.icon-action,
.action-icon,
.sidebar-menu a,
.stat-card,
.panel-card,
.request-card,
.calendar-item{
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease, filter .22s ease;
}
.btn-primary:hover,
.hero-btn:hover{
  filter:saturate(1.08) brightness(1.02);
  box-shadow:0 20px 42px rgba(0,111,221,.24);
}
.btn-outline:hover,
.circle-btn:hover,
.icon-action:hover,
.action-icon:hover{
  border-color:#bfdbfe;
  background:#eff6ff;
  color:#0f5bd7;
  box-shadow:0 12px 28px rgba(14,165,233,.12);
}
.stat-card:hover,
.panel-card:hover,
.request-card:hover,
.calendar-item:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(15,47,107,.12);
}
.sidebar-menu a:hover{
  background:linear-gradient(135deg,#eef6ff,#f8fbff);
  color:#0f5bd7;
  transform:translateX(3px);
}
@keyframes cardFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1000px){.collective-grid{grid-template-columns:1fr}.form-grid.two{grid-template-columns:1fr}}
@media(max-width:640px){.collective-grid{margin-left:18px;margin-right:18px}.collective-form-card,.collective-info-card,.collective-table-card{border-radius:22px}.collective-form .btn-primary{width:100%}}

/* Ajustes finales: menú de usuario, configuración y tabla compacta de empleados */
.sidebar{padding-bottom:28px}.sidebar .logout-btn{display:none!important}.sidebar-menu a[href="dias_festivos.php"],.sidebar-menu a[href="vacaciones_colectivas.php"],.sidebar-menu a[href="perfil.php"]{display:none!important}
.user-menu{position:relative}.user-chip-btn{border:1px solid var(--border);cursor:pointer;font:inherit;color:inherit;min-width:230px;justify-content:flex-start;transition:.2s}.user-chip-btn:hover,.user-menu.open .user-chip-btn{border-color:#7dd3fc;box-shadow:0 12px 28px rgba(6,182,212,.14);transform:translateY(-1px)}.user-chevron{margin-left:auto;color:#64748b;font-size:.9rem;transition:.2s}.user-menu.open .user-chevron{transform:rotate(180deg)}.user-dropdown{position:absolute;right:0;top:calc(100% + 12px);width:245px;background:#fff;border:1px solid var(--border);border-radius:22px;box-shadow:0 24px 60px rgba(15,23,42,.18);padding:10px;display:none;z-index:80}.user-dropdown.open{display:grid;animation:dropdownIn .16s ease-out}.user-dropdown a{display:flex;align-items:center;gap:11px;text-decoration:none;color:#334155;font-weight:850;padding:13px 14px;border-radius:16px;transition:.18s}.user-dropdown a:hover{background:linear-gradient(135deg,rgba(29,78,216,.12),rgba(6,182,212,.14));color:#1747ad}.user-dropdown a.danger{color:#dc2626}.user-dropdown a.danger:hover{background:#fff1f2;color:#b91c1c}@keyframes dropdownIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.employee-compact-wrap{overflow-x:visible}.employee-compact-table th,.employee-compact-table td{white-space:normal}.employee-compact-table th:nth-child(1){width:120px}.employee-compact-table th:nth-child(3){width:180px}.employee-compact-table th:nth-child(4){width:190px}.employee-compact-table th:nth-child(5){width:130px}.employee-compact-table th:nth-child(6){width:250px}.employee-cell.compact .emp-avatar{flex:0 0 46px}.employee-actions{gap:8px;flex-wrap:wrap}.btn-detail{min-height:40px;border:0;border-radius:999px;background:linear-gradient(135deg,#1747ad,#07b6d5);color:#fff;padding:0 14px;display:inline-flex;align-items:center;gap:8px;font-weight:900;cursor:pointer;box-shadow:0 12px 24px rgba(6,115,220,.2);transition:.2s}.btn-detail:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(6,115,220,.28);filter:saturate(1.08)}.employee-detail-modal{width:min(900px,96vw)}.employee-detail-hero{display:flex;align-items:center;gap:18px;border-radius:26px;background:linear-gradient(135deg,#153f99,#09b8d4);color:#fff;padding:24px;margin-bottom:20px;box-shadow:0 18px 38px rgba(23,71,173,.2)}.employee-detail-avatar{width:86px;height:86px;border-radius:28px;background:rgba(255,255,255,.16);border:4px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:1.7rem;font-weight:950}.employee-detail-hero h3{font-size:1.8rem;font-weight:950}.employee-detail-hero p{margin:4px 0 9px;color:rgba(255,255,255,.85);font-weight:700}.employee-detail-hero .department-pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);color:#fff}.employee-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.detail-box{border:1px solid var(--border);background:#f8fbff;border-radius:20px;padding:16px}.detail-box small{display:block;text-transform:uppercase;color:#64748b;font-size:.72rem;font-weight:950;letter-spacing:.65px;margin-bottom:6px}.detail-box strong{font-size:1.05rem;color:#0f172a}.detail-box.highlight{background:linear-gradient(135deg,#eff6ff,#e0fbff);border-color:#bae6fd}.detail-box.highlight strong{font-size:1.5rem;color:#1747ad}.settings-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:28px}.settings-hero h2{font-size:2rem;font-weight:950;margin:12px 0 6px}.settings-hero p{color:var(--muted);max-width:760px;font-weight:650}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 28px 28px}.settings-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;min-height:190px}.settings-card h3{font-size:1.35rem;font-weight:950;margin-bottom:6px}.settings-card p{color:var(--muted);font-weight:650;line-height:1.55}.settings-icon{width:62px;height:62px;border-radius:22px;display:grid;place-items:center;color:#fff;font-size:1.55rem;box-shadow:0 16px 28px rgba(6,115,220,.22)}.settings-icon.blue{background:linear-gradient(135deg,#1747ad,#2563eb)}.settings-icon.cyan{background:linear-gradient(135deg,#0ea5e9,#06b6d4)}.settings-stat{background:#f1f7ff;border:1px solid var(--border);border-radius:20px;padding:14px 18px;text-align:center}.settings-stat strong{display:block;font-size:1.8rem;font-weight:950;color:#0f172a}.settings-stat span{display:block;color:#64748b;font-size:.8rem;font-weight:850}.settings-card .btn-primary{grid-column:1/-1;justify-content:center}.settings-rules{margin:0 28px 28px}.rules-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:18px 0}.rules-grid div{border:1px solid var(--border);border-radius:20px;background:linear-gradient(135deg,#fff,#f1fbff);padding:18px}.rules-grid strong{display:block;font-size:1.45rem;color:#1747ad}.rules-grid span{color:#64748b;font-weight:800}.config-list{margin-top:18px}
body.dark-mode .user-dropdown,body.dark-mode .detail-box,body.dark-mode .settings-stat,body.dark-mode .rules-grid div{background:#111827;color:#e5e7eb}body.dark-mode .detail-box strong,body.dark-mode .settings-stat strong{color:#e5e7eb}
.settings-icon.purple{background:linear-gradient(135deg,#155eef,#06b6d4)}.page-return-actions{display:flex;align-items:center;justify-content:flex-start;margin:28px 30px 18px!important}.page-return-actions+.panel-card,.page-return-actions+.vacation-alert,.page-return-actions+.collective-grid{margin-top:0!important}.employee-collective-section{margin:26px 30px 34px!important;padding:0;overflow:hidden}.employee-collective-section .report-detail-head{height:auto;min-height:78px;align-items:center}.employee-collective-section .report-detail-head small{display:block;margin-top:4px;color:#64748b;font-weight:750}.collective-employee-table{border:0;border-radius:0;box-shadow:none}.report-detail-priority{margin-bottom:28px!important}
body.dark-mode .employee-collective-section .report-detail-head small{color:#c2d0e2!important}
@media(max-width:1100px){.settings-grid{grid-template-columns:1fr}.settings-card{grid-template-columns:auto 1fr}.settings-stat{grid-column:1/-1}.employee-compact-wrap{overflow-x:auto}.employee-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.user-chip-btn{min-width:0;width:54px;height:54px;border-radius:50%;padding:6px}.user-chip-btn>div:not(.avatar),.user-chevron{display:none}.user-dropdown{right:-6px}.employee-detail-hero{align-items:flex-start;flex-direction:column}.employee-detail-grid{grid-template-columns:1fr}.settings-hero,.settings-rules,.settings-grid,.page-return-actions,.employee-collective-section{margin-left:16px!important;margin-right:16px!important}.settings-card{grid-template-columns:1fr}.settings-icon{width:54px;height:54px}.rules-grid{grid-template-columns:1fr}.btn-detail{width:100%;justify-content:center}.employee-actions{align-items:stretch}.employee-compact-table td[data-label="Acciones"]{display:grid;grid-template-columns:1fr auto auto;gap:8px}.page-return-actions .btn-secondary{width:100%}}

/* Fix final: estabilidad de modales sin parpadeos */
.modal.open{
  display:flex!important;
  opacity:1!important;
  pointer-events:auto!important;
  animation:none!important;
  isolation:isolate;
}
.modal:not(.open){
  opacity:0!important;
  pointer-events:none!important;
}
.modal-card{
  position:relative;
  z-index:101;
  transform:translateY(0) scale(1)!important;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  will-change:auto;
  contain:layout paint;
}
.modal-card:hover,
.modal-card .panel-card:hover,
.modal-card .stat-card:hover,
.modal-card .profile-info-card:hover,
.modal-card .profile-history-card:hover,
.modal-card .profile-stat-card:hover,
.modal-card .detail-box:hover,
.modal-card .employee-detail-hero:hover{
  transform:none!important;
  box-shadow:inherit;
}
.employee-detail-modal,
#employeeModal .modal-card,
#holidayModal .modal-card,
#collectiveModal .modal-card{
  max-height:calc(100vh - 56px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.employee-detail-modal .employee-detail-hero,
.employee-detail-modal .detail-box{
  transform:none!important;
  animation:none!important;
}
.employee-detail-modal .department-pill:hover,
.employee-detail-modal .badge:hover,
.employee-detail-modal .status-pill:hover{
  transform:none!important;
}
body.modal-open .chart-tooltip{
  display:none!important;
}
.modal-close:hover{
  background:#eef6ff;
  color:#1747ad;
  transform:none!important;
}

/* Ajustes finales: detalles sin modal, acciones alineadas y edición premium */
.employee-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:nowrap!important;
  min-width:300px;
}
.employee-actions .btn-detail{
  text-decoration:none;
  white-space:nowrap;
  flex:0 0 auto;
}
.employee-actions .icon-link{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  border-radius:15px!important;
  display:inline-grid!important;
  place-items:center!important;
  background:#f2f8ff!important;
  border:1px solid #d9e8fb!important;
  color:#1747ad!important;
  text-decoration:none!important;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease!important;
}
.employee-actions .icon-link:hover{
  background:#e6f6ff!important;
  border-color:#9bdcf3!important;
  box-shadow:0 12px 22px rgba(6,115,220,.14)!important;
  transform:none!important;
}
.employee-actions .icon-link.danger{
  color:#ef4444!important;
  background:#fff5f5!important;
  border-color:#ffd4d4!important;
}
.employee-actions .icon-link.danger:hover{
  background:#ffecec!important;
  border-color:#ffb4b4!important;
}
.employee-compact-table th:nth-child(6),
.employee-compact-table td:nth-child(6){
  width:330px;
}

/* Nueva página de detalle del empleado: evita parpadeos de modal */
.detail-page-wrap,
.edit-employee-page{
  padding:28px;
}
.detail-page-hero,
.edit-hero-card{
  display:flex;
  align-items:center;
  gap:22px;
  border-radius:30px;
  padding:28px;
  background:linear-gradient(135deg,#153f99 0%,#0877d9 48%,#09b8d4 100%);
  color:#fff;
  box-shadow:0 22px 48px rgba(6,115,220,.22);
  margin-bottom:24px;
}
.detail-page-hero .employee-detail-avatar,
.edit-hero-card .employee-detail-avatar{
  flex:0 0 92px;
  width:92px;
  height:92px;
}
.detail-page-title,
.edit-hero-card > div:nth-child(2){
  flex:1;
}
.detail-page-title h2,
.edit-hero-card h2{
  font-size:2.1rem;
  line-height:1.1;
  font-weight:950;
  margin:8px 0 5px;
}
.detail-page-title p,
.edit-hero-card p{
  color:rgba(255,255,255,.88);
  font-weight:700;
}
.detail-page-actions{
  display:flex;
  gap:12px;
  align-items:center;
}
.detail-page-hero .btn-secondary,
.edit-hero-card .btn-secondary{
  background:#fff!important;
  color:#123b8a!important;
  border:0!important;
  text-decoration:none!important;
  box-shadow:0 14px 24px rgba(0,0,0,.12);
}
.detail-page-hero .btn-primary{
  text-decoration:none!important;
}
.detail-metrics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}
.detail-note-card{
  margin:0;
}
.detail-note-card h3{
  font-size:1.25rem;
  font-weight:950;
  margin-bottom:8px;
}
.detail-note-card p{
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
}

/* Página editar empleado */
.edit-hero-card{
  background:linear-gradient(135deg,#143e98,#08b5d3);
}
.edit-hero-card .btn-secondary{
  margin-left:auto;
}
.edit-employee-grid{
  display:grid;
  gap:22px;
}
.edit-form-card{
  margin:0!important;
  padding:26px!important;
}
.edit-form-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.25rem;
  font-weight:950;
  color:#0f172a;
  margin-bottom:18px;
}
.edit-form-card h3 i{
  width:42px;
  height:42px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#e9f4ff,#dcfbff);
  color:#1747ad;
}
.edit-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.edit-summary-card p{
  margin-top:14px;
  color:var(--muted);
  font-weight:650;
}
.edit-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.edit-summary-grid div{
  border:1px solid var(--border);
  background:#f8fbff;
  border-radius:20px;
  padding:16px;
}
.edit-summary-grid small{
  display:block;
  text-transform:uppercase;
  color:#64748b;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.55px;
  margin-bottom:6px;
}
.edit-summary-grid strong{
  font-size:1.6rem;
  color:#0f172a;
  font-weight:950;
}
.edit-summary-grid .highlight{
  background:linear-gradient(135deg,#eff6ff,#e0fbff);
  border-color:#bae6fd;
}
.edit-summary-grid .highlight strong{
  color:#1747ad;
}
.edit-actions-bar{
  position:sticky;
  bottom:18px;
  z-index:5;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:24px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 36px rgba(15,23,42,.12);
}
.edit-actions-bar a{
  text-decoration:none!important;
}

/* Modal estable: sin efectos hover internos que causen parpadeo */
.modal.open .modal-card,
.modal.open .modal-card *,
.modal.open .modal-card *::before,
.modal.open .modal-card *::after{
  animation-play-state:paused!important;
}
.modal.open .modal-card:hover,
.modal.open .modal-card *:hover{
  transform:none!important;
}

@media(max-width:1100px){
  .detail-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .detail-page-hero,.edit-hero-card{align-items:flex-start;flex-direction:column;}
  .detail-page-actions{width:100%;}
  .detail-page-actions .btn-primary,.detail-page-actions .btn-secondary,.edit-hero-card .btn-secondary{width:100%;justify-content:center;}
  .edit-grid-2,.edit-summary-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .detail-page-wrap,.edit-employee-page{padding:16px;}
  .detail-metrics-grid{grid-template-columns:1fr;}
  .employee-actions{min-width:0;display:grid!important;grid-template-columns:1fr 44px 44px!important;width:100%;}
  .employee-compact-table th:nth-child(6),.employee-compact-table td:nth-child(6){width:auto;}
}

/* Ajuste solicitado: login limpio, logo PixelPro y modo oscuro legible */
.login-left-clean{
  justify-content:center!important;
  padding:70px 68px!important;
  background:linear-gradient(135deg,#143f97 0%,#006fdd 58%,#08b8d5 100%)!important;
}
.login-left-clean::before{right:-150px!important;top:-120px!important;width:540px!important;height:540px!important;background:rgba(255,255,255,.16)!important}
.login-left-clean::after{left:-125px!important;bottom:-170px!important;width:380px!important;height:380px!important;background:rgba(15,47,107,.18)!important}
.login-brand-main{position:relative;z-index:2;max-width:620px;margin-bottom:42px}
.login-brand-icon{width:96px;height:96px;border-radius:28px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);box-shadow:0 22px 48px rgba(2,38,104,.24);display:grid;place-items:center;color:#fff;font-size:42px;margin-bottom:28px}
.login-brand-main h1{font-size:4.1rem;line-height:.95;font-weight:950;letter-spacing:-2px;color:#fff;text-shadow:0 18px 38px rgba(2,38,104,.18)}
.login-brand-main h1 span{color:#38bdf8;text-shadow:none}
.login-brand-main p{margin-top:18px;color:#fff;font-size:1.16rem;font-weight:950;letter-spacing:3px}
.clean-copy{position:relative;z-index:2;max-width:720px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:30px;padding:30px 34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 48px rgba(0,0,0,.10);backdrop-filter:blur(10px)}
.clean-copy h2{font-size:2rem;line-height:1.16;font-weight:950;color:#fff;margin:16px 0 10px;max-width:680px}
.clean-copy p{font-size:1.02rem;color:rgba(255,255,255,.92);font-weight:650;line-height:1.65;max-width:680px}
.clean-copyright{position:relative;z-index:2;margin-top:auto;color:rgba(255,255,255,.86);font-weight:700}
.login-right{background:linear-gradient(135deg,#f8fcff 0%,#ffffff 50%,#eef9ff 100%)!important}
.login-card-box{box-shadow:0 28px 70px rgba(15,47,107,.16)!important}
.login-card h2{font-size:2.4rem!important}.security-badge{background:#ecfeff!important;color:#087f9c!important;border:1px solid #bae6fd!important}
.btn-login::after{content:'\F138';font-family:'bootstrap-icons';font-size:1rem;margin-left:4px}

/* Logo del sidebar como imagen de empresa */
.sidebar-logo-image{height:78px;padding-bottom:18px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;overflow:hidden}
.sidebar-logo-image img{width:220px;max-width:100%;height:auto;display:block}
body.dark-mode .sidebar-logo-image img{filter:brightness(1.08) contrast(1.06)}

/* Ficha del usuario en sidebar más bonita para admin, supervisor y empleado */
.sidebar-user{
  border:1px solid rgba(14,165,233,.32)!important;
  border-left:3px solid #1747ad!important;
  border-right:3px solid #08b8d5!important;
  border-radius:20px!important;
  padding:18px 18px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f3f9ff 100%)!important;
  box-shadow:0 14px 28px rgba(15,47,107,.055)!important;
}
.sidebar-user small{color:#5b6d84!important;letter-spacing:.85px!important}
.sidebar-user strong{color:#0f172a!important;font-size:1.03rem!important;line-height:1.25!important}
.sidebar-user:hover{box-shadow:0 18px 36px rgba(6,115,220,.10)!important;transform:translateY(-1px)}

/* Modo oscuro legible en todas las pantallas */
body.dark-mode{--bg:#07111f;--surface:#0f1b2d;--text:#f8fafc;--muted:#c2d0e2;--border:#263a55;--soft:#142238;background:#07111f!important;color:#f8fafc!important}
body.dark-mode .main-content,
body.dark-mode .app-layout{background:#07111f!important;color:#f8fafc!important}
body.dark-mode .topbar{background:rgba(15,27,45,.88)!important;border-color:#263a55!important;color:#f8fafc!important}
body.dark-mode .topbar h1,
body.dark-mode .topbar p,
body.dark-mode h1,body.dark-mode h2,body.dark-mode h3,
body.dark-mode .panel-card h2,body.dark-mode .panel-card h3,
body.dark-mode .table-wrap h2,body.dark-mode .table-wrap h3,
body.dark-mode .stat-card strong,
body.dark-mode .data-table td,
body.dark-mode .data-table th,
body.dark-mode label{color:#f8fafc!important}
body.dark-mode .sidebar{background:#0b1424!important;border-color:#263a55!important}
body.dark-mode .sidebar-user{background:linear-gradient(135deg,#101d31,#0b1424)!important;border-color:#244264!important;box-shadow:none!important}
body.dark-mode .sidebar-user small{color:#93a9c4!important}
body.dark-mode .sidebar-user strong{color:#f8fafc!important}
body.dark-mode .sidebar-menu a{color:#cbd5e1!important}
body.dark-mode .sidebar-menu a:hover,body.dark-mode .sidebar-menu a.active{color:#fff!important;background:var(--gradient)!important}
body.dark-mode .panel-card,
body.dark-mode .table-wrap,
body.dark-mode .stat-card,
body.dark-mode .request-card,
body.dark-mode .calendar-card,
body.dark-mode .profile-info-card,
body.dark-mode .profile-history-card,
body.dark-mode .profile-stat-card,
body.dark-mode .settings-card,
body.dark-mode .collective-form-card,
body.dark-mode .collective-info-card,
body.dark-mode .collective-table-card,
body.dark-mode .edit-form-card,
body.dark-mode .detail-page-card{background:#0f1b2d!important;color:#f8fafc!important;border-color:#263a55!important}
body.dark-mode .data-table th{background:#16243a!important;color:#dbeafe!important}
body.dark-mode .data-table tbody tr{background:#0f1b2d!important;color:#f8fafc!important}
body.dark-mode .data-table tbody tr:nth-child(even),body.dark-mode .data-table tbody tr:hover{background:#13233a!important}
body.dark-mode .muted,body.dark-mode .text-muted,body.dark-mode .login-subtitle,body.dark-mode small,body.dark-mode .card-subtitle,body.dark-mode .detail-box small,body.dark-mode .settings-card p{color:#c2d0e2!important}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#0b1424!important;color:#f8fafc!important;border-color:#2e4565!important}
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{color:#94a3b8!important}
body.dark-mode .circle-btn,body.dark-mode .user-chip,body.dark-mode .user-chip-btn,body.dark-mode .search-box{background:#0f1b2d!important;color:#f8fafc!important;border-color:#2e4565!important}
body.dark-mode .user-dropdown,body.dark-mode .notifications-panel{background:#0f1b2d!important;border-color:#2e4565!important;color:#f8fafc!important}
body.dark-mode .push-device-card{background:#10223a!important;border-color:#2e4565!important}
body.dark-mode .push-device-copy strong{color:#f8fafc!important}
body.dark-mode .push-device-copy p{color:#c2d0e2!important}
body.dark-mode .user-dropdown a{color:#e2e8f0!important}
body.dark-mode .user-dropdown a:hover{background:#132b49!important;color:#7dd3fc!important}
body.dark-mode .notification-item{background:#0f1b2d!important;border-color:#263a55!important;color:#f8fafc!important}
body.dark-mode .notification-item p{color:#c2d0e2!important}
body.dark-mode .detail-box{background:#111f34!important;border-color:#2e4565!important;color:#f8fafc!important}
body.dark-mode .detail-box strong{color:#fff!important}
body.dark-mode .detail-box.highlight{background:linear-gradient(135deg,#10294a,#0b3a4d)!important;border-color:#1d7fa7!important}
body.dark-mode .status-pill,
body.dark-mode .saldo-pill,
body.dark-mode .department-pill{filter:brightness(.95) saturate(1.05)}

@media(max-width:900px){
  .login-container{grid-template-columns:1fr!important;background:#f6fbff!important}
  .login-left-clean{min-height:360px!important;padding:42px 24px!important}
  .login-brand-main h1{font-size:3rem}.clean-copy{padding:24px;border-radius:24px}.clean-copy h2{font-size:1.55rem}
  .login-copyright{display:none}
  .login-right{padding:28px 18px!important}.login-card-box{padding:30px 22px;border-radius:26px}
}
@media(max-width:520px){.login-brand-icon{width:76px;height:76px;font-size:34px}.login-brand-main h1{font-size:2.55rem}.login-brand-main p{font-size:.95rem}.clean-copy h2{font-size:1.35rem}.login-card h2{font-size:1.85rem!important}}


/* Ajustes finales solicitados: login con logo real, texto PixelPro grande y graficos legibles */
.login-brand-main{max-width:720px!important;margin-bottom:38px!important}
.login-brand-icon{display:none!important}
.login-company-logo{
  width:150px;
  max-width:34vw;
  height:auto;
  display:block;
  margin:0 0 22px 0;
  filter:drop-shadow(0 20px 36px rgba(2,38,104,.22));
}
.login-brand-main h1{
  font-size:5.15rem!important;
  line-height:.92!important;
  font-weight:950!important;
  letter-spacing:-3.5px!important;
  margin:0!important;
  color:#fff!important;
}
.login-brand-main h1 .brand-pixel{color:#fff!important}
.login-brand-main h1 .brand-pro{color:#38bdf8!important;text-shadow:none!important}
.login-brand-main p{
  margin-top:18px!important;
  font-size:1.28rem!important;
  letter-spacing:5px!important;
  font-weight:950!important;
}
.clean-copy{margin-top:34px!important}
.sidebar-logo-image{height:86px!important}
.sidebar-logo-image img{width:238px!important}
.bar-chart-box{height:300px!important;overflow:visible!important}
.chart-lines{bottom:62px!important}
.chart-y-axis{height:238px!important;padding-bottom:56px!important}
.chart-bars{height:238px!important;padding-bottom:56px!important;align-items:end!important}
.bar-group small{
  position:relative;
  z-index:4;
  margin-top:8px;
  color:#5f7189!important;
  font-size:.86rem;
  line-height:1.1;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}
.report-legend span{color:#0f172a!important;font-weight:850!important}
body.dark-mode .report-chart-card h3,
body.dark-mode .report-donut-card h3,
body.dark-mode .report-detail-card h3{color:#f8fafc!important}
body.dark-mode .report-legend span{color:#e5e7eb!important}
body.dark-mode .bar-group small{color:#dbeafe!important}
body.dark-mode .chart-y-axis{color:#cbd5e1!important}
body.dark-mode .chart-lines{
  background:
    repeating-linear-gradient(to bottom, transparent 0 58px, rgba(148,163,184,.38) 59px 60px),
    repeating-linear-gradient(to right, transparent 0 205px, rgba(148,163,184,.32) 206px 207px)!important;
  border-left-color:#94a3b8!important;
  border-bottom-color:#94a3b8!important;
}
body.dark-mode .donut::after{background:#0f1b2d!important}
@media(max-width:900px){
  .login-company-logo{width:122px;margin:0 auto 18px}
  .login-brand-main h1{font-size:3.8rem!important;text-align:center}
  .login-brand-main p{text-align:center;font-size:1rem!important;letter-spacing:4px!important}
  .reports-grid{grid-template-columns:1fr!important}
  .bar-chart-box{height:270px!important}
  .chart-bars{gap:14px!important}
}


/* ===== Ajustes solicitados 18/06: login más lleno, logo empresa en sidebar y gráfico corregido ===== */
.login-left-clean{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  gap:0!important;
  padding:58px 68px!important;
}
.login-company-logo{display:none!important}
.login-brand-main{
  margin-bottom:30px!important;
  max-width:760px!important;
}
.login-brand-main h1{
  font-size:5.25rem!important;
  letter-spacing:-4px!important;
}
.login-brand-main p{
  font-size:1.34rem!important;
  letter-spacing:7px!important;
  margin-top:14px!important;
}
.clean-copy{
  width:min(720px,100%)!important;
  margin-top:26px!important;
  padding:34px 38px!important;
  border-radius:30px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.09))!important;
  border:1px solid rgba(255,255,255,.25)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 26px 56px rgba(0,34,96,.18)!important;
}
.clean-copy h2{
  font-size:2.05rem!important;
  line-height:1.12!important;
  margin:16px 0 12px!important;
}
.login-benefit-grid{
  position:relative;
  z-index:2;
  width:min(720px,100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:24px;
}
.login-benefit-card{
  min-height:86px;
  padding:18px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 38px rgba(0,34,96,.10);
  backdrop-filter:blur(10px);
}
.login-benefit-card strong{
  display:block;
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  font-weight:950;
  letter-spacing:-1px;
}
.login-benefit-card span{
  display:block;
  margin-top:8px;
  color:rgba(255,255,255,.88);
  font-size:.86rem;
  font-weight:750;
}
.clean-copyright{
  margin-top:42px!important;
}

/* Sidebar: mostrar el logo real de la empresa como imagen y mantener texto PixelPro ordenado */
.sidebar-logo-image{
  height:auto!important;
  min-height:94px!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  padding:0 0 18px!important;
  overflow:visible!important;
}
.sidebar-logo-image .sidebar-company-mark{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  object-fit:contain!important;
  border-radius:18px!important;
  box-shadow:0 14px 28px rgba(2,132,199,.14)!important;
  background:#fff!important;
  padding:4px!important;
}
.sidebar-logo-text{display:flex;flex-direction:column;line-height:1.05}
.sidebar-logo-text strong{font-size:1.45rem;font-weight:950;letter-spacing:-.8px;color:#0f172a}
.sidebar-logo-text strong span{color:#0284c7}
.sidebar-logo-text small{margin-top:7px;font-size:.72rem;font-weight:950;letter-spacing:5px;color:#334155}
body.dark-mode .sidebar-logo-text strong{color:#fff!important}
body.dark-mode .sidebar-logo-text strong span{color:#38bdf8!important}
body.dark-mode .sidebar-logo-text small{color:#dbeafe!important}
body.dark-mode .sidebar-logo-image .sidebar-company-mark{background:#eaf8ff!important;filter:none!important}

/* Gráfico de reportes: eje inicia en 0, barras más centradas y etiquetas sin encimar */
.report-chart-card{overflow:visible!important;}
.bar-chart-box{
  height:330px!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  gap:14px!important;
  overflow:visible!important;
  padding:4px 16px 0 0!important;
}
.chart-lines{
  left:46px!important;
  right:18px!important;
  top:8px!important;
  bottom:72px!important;
  border-left:1.5px solid #8fa2bb!important;
  border-bottom:1.5px solid #8fa2bb!important;
  background:
    linear-gradient(to top, #dbe8f5 0 1px, transparent 1px),
    repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), #dce8f5 calc(25% - 1px) 25%),
    repeating-linear-gradient(to right, transparent 0 24%, #dce8f5 24% calc(24% + 1px), transparent calc(24% + 1px) 25%)!important;
}
.chart-y-axis{
  height:252px!important;
  padding:2px 8px 72px 0!important;
  justify-content:space-between!important;
  color:#536780!important;
}
.chart-bars{
  height:252px!important;
  padding:8px 34px 72px 18px!important;
  gap:46px!important;
  align-items:end!important;
}
.bar-group{gap:12px!important;min-width:0!important;}
.bar-stack{
  max-width:140px!important;
  width:72%!important;
  min-height:0!important;
  border-radius:10px 10px 0 0!important;
}
.bar-group small{
  position:absolute!important;
  bottom:45px!important;
  transform:translateY(100%)!important;
  max-width:140px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  color:#5b6f89!important;
  font-size:.86rem!important;
  line-height:1.1!important;
}
.report-legend{margin-top:18px!important;display:flex!important;justify-content:center!important;gap:18px!important;flex-wrap:wrap!important;}
body.dark-mode .chart-lines{
  background:
    linear-gradient(to top, rgba(148,163,184,.58) 0 1px, transparent 1px),
    repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), rgba(148,163,184,.34) calc(25% - 1px) 25%),
    repeating-linear-gradient(to right, transparent 0 24%, rgba(148,163,184,.25) 24% calc(24% + 1px), transparent calc(24% + 1px) 25%)!important;
}

@media(max-width:900px){
  .login-left-clean{padding:42px 22px!important;min-height:520px!important;text-align:center!important;align-items:center!important;}
  .login-brand-main h1{font-size:3.8rem!important;letter-spacing:-2px!important;}
  .login-benefit-grid{grid-template-columns:1fr;gap:10px;}
  .login-benefit-card{min-height:auto;padding:14px 16px;}
  .sidebar-logo-image{min-height:86px!important;}
  .sidebar-logo-image .sidebar-company-mark{width:52px!important;height:52px!important;min-width:52px!important;}
  .sidebar-logo-text strong{font-size:1.28rem;}
  .bar-chart-box{height:300px!important;padding-right:0!important;}
  .chart-bars{gap:16px!important;padding-left:12px!important;padding-right:12px!important;}
  .bar-stack{width:82%!important;}
  .bar-group small{font-size:.72rem!important;max-width:80px!important;}
}

/* Departamentos: configuración y selects mejor ordenados */
.department-add-form{
  display:grid;
  grid-template-columns:minmax(260px, 1fr) auto;
  gap:16px;
  align-items:end;
  margin:16px 0 20px;
  padding:18px;
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(135deg, rgba(239,246,255,.9), rgba(236,254,255,.75));
}
.department-add-form label{font-weight:850;color:var(--text);display:grid;gap:8px;}
.department-add-form input,
.form-grid select,
.edit-form-card select{
  width:100%;
  min-height:50px;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.9);
  color:var(--text);
  padding:0 16px;
  font-weight:750;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.department-add-form input:focus,
.form-grid select:focus,
.edit-form-card select:focus{
  border-color:#38bdf8;
  box-shadow:0 0 0 4px rgba(14,165,233,.14);
}
.department-list{display:grid;gap:12px;margin-top:8px;}
.department-item{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:15px 16px;
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.86);
  box-shadow:0 12px 30px rgba(15,23,42,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.department-item:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(14,165,233,.12);border-color:rgba(14,165,233,.34);}
.department-item strong{display:block;color:var(--text);font-size:1rem;}
.department-item small{display:block;margin-top:4px;color:var(--muted);font-weight:700;}
.readonly-note{display:inline-flex;gap:8px;align-items:center;padding:12px 16px;border-radius:16px;background:#eef6ff;color:#0f3f75;font-weight:850;margin:12px 0;}
.settings-icon.green{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;}
body.dark-mode .department-add-form{background:linear-gradient(135deg, rgba(15,23,42,.88), rgba(8,47,73,.65));border-color:rgba(148,163,184,.22);}
body.dark-mode .department-add-form input,
body.dark-mode .form-grid select,
body.dark-mode .edit-form-card select{background:rgba(15,23,42,.85);border-color:rgba(148,163,184,.25);color:#e5f4ff;}
body.dark-mode .department-item{background:rgba(15,23,42,.82);border-color:rgba(148,163,184,.20);}
body.dark-mode .department-item strong{color:#f8fafc;}
body.dark-mode .department-item small{color:#a9bbcf;}
body.dark-mode .readonly-note{background:rgba(14,165,233,.12);color:#bae6fd;}

@media(max-width:760px){
  .department-add-form{grid-template-columns:1fr;padding:14px;}
  .department-item{grid-template-columns:1fr;align-items:start;}
  .department-item form,.department-item button{width:100%;}
}


/* Las reglas móviles finales están en responsive.css. */

/* =========================================================
   FIX SOLICITUDES / BADGES ORDENADOS
   ========================================================= */
.request-status-stack,
.solicitud-status-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}
.solicitud-status-stack .badge,
.request-status-stack .badge{
  margin:0 !important;
  width:max-content;
  max-width:100%;
}
.solicitud-status-stack .decision-note{
  display:block;
  max-width:220px;
  margin-top:2px;
  color:#60728a;
  font-size:.86rem;
  line-height:1.35;
  font-weight:650;
}
.request-days-clean{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  color:#0f172a;
}
.request-table .data-table th,
.request-table .data-table td{
  vertical-align:middle;
}
.request-table .data-table td[data-label="Días"]{
  text-align:left;
}
.request-table .data-table td[data-label="Estado"]{
  min-width:190px;
}
.employee-request-card .request-status-stack{
  align-items:flex-end;
  flex:0 0 auto;
  gap:7px;
}
.employee-request-card .request-card-head{
  align-items:flex-start;
}
.employee-request-card .request-card-head > div:first-child{
  min-width:0;
  flex:1 1 auto;
}
.employee-request-card .request-status-stack .badge{
  font-size:.84rem;
  padding:7px 12px;
  white-space:nowrap;
}

/* =========================================================
   AJUSTES FINALES CODEx COMPLETADO - CONFIG / REPORTES / EMPLEADOS
   ========================================================= */
.settings-icon.purple{
  background:linear-gradient(135deg,#7c3aed,#0ea5e9);
  color:#fff;
}
.page-return-actions{
  margin:22px 30px 0!important;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.config-return-shortcut{
  margin-bottom:0!important;
}
.employee-auto-note{
  margin-top:18px;
}
.employee-dashboard-page .employee-stats-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.employee-collective-section{
  margin:0 30px 30px!important;
}
.collective-employee-table .data-table td,
.collective-employee-table .data-table th{
  vertical-align:middle;
}
.report-detail-priority{
  margin-top:22px!important;
}
.report-detail-priority .table-wrap{
  border-radius:0 0 24px 24px;
}
.report-chart-card h3::after{
  content:' agrupada por año de ingreso';
  display:block;
  margin-top:6px;
  color:#60728a;
  font-size:.82rem;
  font-weight:700;
}
body.dark-mode .report-chart-card h3::after{color:#c2d0e2;}
@media(max-width:1200px){
  .employee-dashboard-page .employee-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .page-return-actions{margin:16px 16px 0!important;}
  .page-return-actions .btn-secondary{width:100%;justify-content:center;}
  .employee-dashboard-page .employee-stats-grid{grid-template-columns:1fr!important;}
  .employee-collective-section{margin:0 16px 22px!important;}
}


/* =========================================================
   FIX CHATGPT 22/06: sidebar fijo, notificaciones clicables y config
   ========================================================= */
@media (min-width: 901px){
  .app-layout{
    display:block!important;
    min-height:100vh!important;
    background:var(--bg)!important;
  }
  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    bottom:0!important;
    width:320px!important;
    height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    z-index:120!important;
  }
  .main-content{
    margin-left:320px!important;
    width:calc(100% - 320px)!important;
    min-height:100vh!important;
  }
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:90!important;
  }
}

/* Empleados ahora se administra desde Configuracion */
.sidebar-menu a[href="empleados.php"]{
  display:none!important;
}

/* Panel de notificaciones más limpio y siempre dentro de pantalla */
.notifications-wrap{position:relative!important;}
.notifications-panel{
  right:0!important;
  left:auto!important;
  width:min(430px, calc(100vw - 36px))!important;
  max-height:min(620px, calc(100vh - 110px))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  z-index:999!important;
}
.notification-item{
  text-decoration:none!important;
  overflow:hidden!important;
}
.notification-item > div{min-width:0!important;}
.notification-item strong,
.notification-item p,
.notification-item small{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.notification-item:hover strong{text-decoration:underline!important;}

.settings-icon.purple,
.settings-card .settings-icon.purple{
  background:linear-gradient(135deg,#7c3aed,#0ea5e9)!important;
  color:#fff!important;
}
.settings-icon.purple i,
.settings-card .settings-icon.purple i{
  display:block!important;
  color:#fff!important;
  opacity:1!important;
  font-size:1.55rem!important;
}

@media (max-width: 900px){
  .notifications-panel{
    position:fixed!important;
    top:calc(82px + env(safe-area-inset-top, 0px))!important;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    max-height:calc(100vh - 105px - env(safe-area-inset-top, 0px))!important;
    border-radius:24px!important;
  }
}

/* Correcciones calendario: +N ausencias y lista limpia */
.calendar-more{
    border:0;
    cursor:pointer;
    line-height:1.2;
}
.calendar-more:hover{
    background:#dbeafe;
    color:#1747ad;
}
.calendar-day-modal-card{
    width:min(620px, calc(100vw - 32px));
    max-height:82vh;
    overflow:auto;
}
.calendar-modal-list{
    display:grid;
    gap:12px;
    margin-top:16px;
}
.calendar-modal-item{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:14px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#f8fcff;
}
.calendar-modal-info strong,
.calendar-modal-info span,
.calendar-modal-info p{
    display:block;
    min-width:0;
}
.calendar-modal-info strong{
    font-weight:900;
    color:#0f172a;
}
.calendar-modal-info span{
    color:#64748b;
    margin-top:2px;
    font-size:.9rem;
}
.calendar-modal-info p{
    margin:5px 0 0;
    color:#334155;
    font-size:.88rem;
}
@media(max-width:620px){
    .calendar-modal-item{
        grid-template-columns:42px minmax(0,1fr);
    }
    .calendar-modal-item .status-badge{
        grid-column:2;
        width:max-content;
    }
}