:root{
  --green:#0a5a1f;
  --green2:#128b3b;
  --green3:#e8f5ec;
  --green4:#c8e6d0;
  --red:#c0392b;
  --border:#d6ddd6;
  --text:#1c2b1e;
  --muted:#5a6b5b;
  --surface:#fff;
  --gray:#f4f5f4;
  --bg:#f0f2f0;
  --shadow:0 4px 20px rgba(10,90,31,.10);
  --shadow2:0 8px 32px rgba(10,90,31,.16);
  --r:12px;
  --r2:8px;
  --tr:all .22s cubic-bezier(.4,0,.2,1)
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#1a1f1b;
    --surface:#232a25;
    --text:#e8f0e9;
    --muted:#9aa79b;
    --border:#3a4a3c;
    --green3:#1a3a22;
    --green4:#264d30;
    --shadow:0 4px 20px rgba(0,0,0,.3);
    --shadow2:0 8px 32px rgba(0,0,0,.4)
  }
}

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

a,
button,
img,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.btn,
.stat-card,
.stat-card-link,
.dashboard-kpi-card{
  -webkit-user-drag:none;
  user-drag:none;
}

body{background:var(--bg);color:var(--text);font-size:15px;min-height:100vh;font-family:'Inter',Arial,sans-serif;line-height:1.5}

@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.animate-fade-down{animation:fadeDown .4s ease both}
.animate-fade-up{animation:fadeUp .4s ease both;animation-delay:.06s}
.animate-shake{animation:shake .4s ease both}

/* HEADER MODERNO */
.ugc-header{background:linear-gradient(135deg,#0a5a1f 0%,#0d7028 100%);color:#fff;display:flex;align-items:center;gap:24px;padding:0 32px;height:110px;position:sticky;top:0;z-index:100;box-shadow:0 4px 24px rgba(10,90,31,.4)}
.ugc-header .brand{font-size:14px;line-height:1.2;font-weight:700}
.ugc-header .brand small{font-weight:500;opacity:.9;display:block;font-size:11px;letter-spacing:.3px;text-transform:uppercase}
.logo-link{display:flex;align-items:center;text-decoration:none;cursor:pointer}
.header-logo{height:95px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));transition:transform .2s ease}
.logo-link:hover .header-logo{transform:scale(1.02)}

/* Logo en página de login */
.login-logo{width:160px;height:160px;object-fit:contain;border-radius:24px;box-shadow:0 16px 50px rgba(10,90,31,.5),0 0 0 4px rgba(255,255,255,.2);background:linear-gradient(135deg,#0a5a1f 0%,#0d7028 100%);padding:12px;transition:transform .3s ease,box-shadow .3s ease}
.login-brand:hover .login-logo{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 60px rgba(10,90,31,.6),0 0 0 6px rgba(255,255,255,.4)}
.user-chip{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:24px;padding:8px 18px;font-size:13px;display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:500}
.logout{
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  padding: 10px 18px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all .25s ease;
}

.logout:hover{
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

.logout:active{
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* LAYOUT */
.ugc-wrap{max-width:1200px;margin:0 auto;padding:28px 20px 40px;min-height:calc(100vh - 280px)}
.page-title{font-size:24px;font-weight:800;color:var(--green);margin-bottom:8px}

/* FOOTER */
.ugc-footer{background:linear-gradient(135deg,#0a5a1f 0%,#0d7028 100%);color:#fff;margin-top:60px}
.footer-content{max-width:1200px;margin:0 auto;padding:40px 20px 24px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:8px}
.footer-logo{font-size:28px;font-weight:900;letter-spacing:-1px}
.footer-name{font-size:14px;opacity:.9}
.footer-links{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.footer-links a{color:#fff;text-decoration:none;font-size:14px;font-weight:500;opacity:.9;transition:var(--tr)}
.footer-links a:hover{opacity:1;text-decoration:underline}
.footer-logout-form{display:inline-flex;margin:0;padding:0}
.footer-logout-btn{background:none;border:none;color:#fff;font-size:14px;font-weight:500;opacity:.9;cursor:pointer;padding:0;font-family:inherit;transition:var(--tr)}
.footer-logout-btn:hover{opacity:1;text-decoration:underline}
.footer-copy{grid-column:1/-1;text-align:center;font-size:13px;opacity:.7;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
@media(max-width:768px){
  .footer-content{grid-template-columns:1fr;text-align:center;gap:24px}
  .footer-links{justify-content:center}
}
.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
  gap:16px;
  flex-wrap:wrap;
}
.page-header .page-title{margin-bottom:0}

.page-header:has(+ .form-card){
  max-width:720px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
}

.page-header:has(+ .form-card) .page-title{
  width:100%;
  text-align:center;
}

.volver-wrap{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}

.btn-volver{
  padding:10px 18px;
  font-size:14px;
}
.section-header{display:flex;align-items:center;justify-content:space-between;margin:30px 0 14px;gap:16px;flex-wrap:wrap}
.section-header h2{font-size:17px;font-weight:800;color:var(--green);position:relative;padding-left:14px}
.section-header h2::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:18px;background:var(--green2);border-radius:4px}
.section-header--spaced{margin-top:36px}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px;margin-bottom:28px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);transition:var(--tr);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green2),var(--green))}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow2)}
.stat-card .num{font-size:36px;font-weight:900;color:var(--green);line-height:1}
.stat-card .lbl{font-size:12px;color:var(--muted);margin-top:6px;font-weight:500}

/* TABLA PROFESIONAL */
.ugc-table-wrap{background:#fff;border:1px solid #e1e8ed;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);overflow-x:auto;margin:20px 0}
.ugc-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.ugc-table thead th{background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);color:#ffffff;padding:16px 20px;text-align:left;font-weight:700;font-size:12px;letter-spacing:.5px;text-transform:uppercase;border-bottom:2px solid #e2e8f0;white-space:nowrap}
.ugc-table thead th:first-child{border-radius:12px 0 0 0}
.ugc-table thead th:last-child{border-radius:0 12px 0 0}
.ugc-table tbody tr{background:#fff;transition:all .15s ease}
.ugc-table tbody tr:hover{background:#f8fafc;box-shadow:0 2px 4px rgba(0,0,0,.04)}
.ugc-table tbody tr:not(:last-child){border-bottom:1px solid #f1f5f9}
.ugc-table td{padding:18px 20px;vertical-align:middle;color:#334155;font-weight:500}
.ugc-table tbody tr:last-child td:first-child{border-radius:0 0 0 12px}
.ugc-table tbody tr:last-child td:last-child{border-radius:0 0 12px 0}
@media(max-width:768px){
  .ugc-table thead{display:none}
  .ugc-table,.ugc-table tbody,.ugc-table tr,.ugc-table td{display:block;width:100%}
  .ugc-table tr{margin-bottom:12px;border:1px solid #e1e8ed;border-radius:12px;padding:16px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.04)}
  .ugc-table td{border:none;padding:10px 0;font-size:14px}
  .ugc-table td[data-label]::before{content:attr(data-label);font-weight:700;color:#64748b;display:block;font-size:11px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
}
.actions-cell{display:flex;gap:8px;flex-wrap:wrap}
.inline-form{display:inline}

/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700}
.badge-pendiente{background:#fff8e1;color:#b8860b;border:1px solid #ffe082}
.badge-aprobado{background:#e8f5ec;color:#1a6b2e;border:1px solid #a5d6b0}
.badge-rechazado{background:#fdecea;color:#b71c1c;border:1px solid #f9a8a8}
.badge-rrhh{background:#e3f2fd;color:#0d47a1;border:1px solid #90caf9}
.badge-cancelado-agenda{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.badge-info{background:var(--green3);color:var(--green);border:1px solid var(--green4);font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;margin-left:6px}
.badge-role-admin{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
.badge-role-rrhh{background:#dcfce7;color:#166534;border:1px solid #86efac}
.badge-role-jefe{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd}
.badge-role-empleado{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}

@media (prefers-color-scheme: dark){
  .badge-pendiente{background:#3d3008;color:#ffc107;border-color:#856404}
  .badge-aprobado{background:#1a3a22;color:#4caf50;border-color:#2e7d32}
  .badge-rechazado{background:#3d1512;color:#ef5350;border-color:#c62828}
  .badge-rrhh{background:#0d2949;color:#64b5f6;border-color:#1565c0}
  .badge-cancelado-agenda{background:#1f2937;color:#cbd5e1;border-color:#64748b}
  .badge-role-admin{background:#3d1512;color:#fca5a5;border-color:#991b1b}
  .badge-role-rrhh{background:#11351d;color:#86efac;border-color:#166534}
  .badge-role-jefe{background:#2e205c;color:#c4b5fd;border-color:#6d28d9}
  .badge-role-empleado{background:#102a52;color:#93c5fd;border-color:#1d4ed8}
}

/* BOTONES */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:var(--r2);padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:var(--tr);font-family:inherit;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn.is-disabled{opacity:.62;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
.btn-login:disabled,.btn-login.is-disabled,.btn-link:disabled,.btn-link.is-disabled,.btn-cambiar-modo:disabled,.btn-cambiar-modo.is-disabled,a[data-click-once].is-disabled,.stat-card-link.is-disabled,.logo-link.is-disabled{opacity:.62;cursor:not-allowed;pointer-events:none;transform:none;box-shadow:none}
.btn-green{background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;box-shadow:0 4px 12px rgba(18,139,59,.3)}
.btn-green:hover{box-shadow:0 6px 20px rgba(18,139,59,.45);transform:translateY(-1px)}
.btn-red{background:linear-gradient(135deg,#e53935,var(--red));color:#fff;box-shadow:0 4px 12px rgba(192,57,43,.3)}
.btn-red:hover{box-shadow:0 6px 20px rgba(192,57,43,.45);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn-outline:hover{background:var(--green3)}
.btn-gray{background:var(--gray);color:var(--text);border:1px solid var(--border)}
.btn-gray:hover{background:#dee2e6}
.btn-sm{padding:6px 13px;font-size:12px}
.ugc-pagination{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:16px 0 22px;padding:14px 16px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.ugc-pagination__meta{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap}
.ugc-pagination__controls{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.ugc-pagination__page,.ugc-pagination__step{min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
.ugc-pagination__step{min-width:92px;padding:0 12px}
.ugc-pagination__ellipsis{color:var(--muted);padding:0 4px;font-weight:700}
.ugc-pagination .is-disabled{opacity:.45;pointer-events:none}
.ugc-pagination .is-active{box-shadow:0 4px 12px rgba(18,139,59,.25)}
.btn-full{width:100%;justify-content:center;padding:13px;font-size:15px}

/* FORMS PROFESIONALES */
.form-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);
  padding:32px;
  max-width:720px;
  width:100%;
  margin:0 auto;
}
.form-group{margin-bottom:24px}
.form-group label{display:block;font-size:14px;font-weight:600;color:#475569;margin-bottom:8px}
.form-group label span{font-weight:400;color:#ef4444}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border:2px solid #e2e8f0;border-radius:10px;font-size:15px;font-family:inherit;background:#fff;transition:all .2s ease;color:#334155}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#0a5a1f;box-shadow:0 0 0 4px rgba(10,90,31,.08)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#94a3b8}
.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:20px;padding-right:44px}
.jefe-picker{position:relative}
.jefe-picker--ready .jefe-picker__native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}
.jefe-picker__trigger{width:100%;min-height:50px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 14px 13px 16px;border:2px solid #e2e8f0;border-radius:10px;background:#fff;color:#334155;font-family:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:all .2s ease}
.jefe-picker__trigger:hover{border-color:#b7d7c4;background:#fbfefd}
.jefe-picker__trigger:focus{outline:none;border-color:#0a5a1f;box-shadow:0 0 0 4px rgba(10,90,31,.08)}
.jefe-picker__trigger::after{content:"";width:20px;height:20px;flex:0 0 20px;background:no-repeat center/20px url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");transition:transform .18s ease}
.jefe-picker.is-open .jefe-picker__trigger::after{transform:rotate(180deg)}
.jefe-picker__trigger.is-placeholder{font-weight:500;color:#64748b}
.jefe-picker__panel{position:absolute;z-index:50;left:0;right:0;top:calc(100% + 8px);overflow:hidden;border:1px solid #cbd5e1;border-radius:12px;background:#fff;box-shadow:0 20px 45px rgba(15,23,42,.18)}
.jefe-picker__search-wrap{padding:10px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.jefe-picker__search{width:100%;height:40px;padding:9px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#1f2937;font-family:inherit;font-size:14px;font-weight:500}
.jefe-picker__search:focus{outline:none;border-color:#0a5a1f;box-shadow:0 0 0 3px rgba(10,90,31,.08)}
.jefe-picker__list{max-height:270px;overflow:auto;padding:6px;background:#fff;scrollbar-color:#94a3b8 #f1f5f9;scrollbar-width:thin}
.jefe-picker__option{width:100%;display:block;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#0f172a;font-family:inherit;font-size:14px;font-weight:600;line-height:1.25;text-align:left;cursor:pointer}
.jefe-picker__option:hover,.jefe-picker__option:focus{outline:none;background:#ecfdf5;color:#064e3b}
.jefe-picker__option.is-selected{background:#0a5a1f;color:#fff}
.jefe-picker__empty{padding:16px 12px;color:#64748b;font-size:13px;text-align:center}
.form-group textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-actions{display:flex;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid #f1f5f9}
.form-actions .btn{min-width:160px}
.field-hint{display:block;font-size:12px;color:#64748b;margin-top:6px;font-weight:500}
.form-section-box{border:1px solid #e2e8f0;border-radius:18px;padding:20px;background:#fff;margin-top:4px}
.form-section-title{font-size:16px;font-weight:800;color:#111827;margin-bottom:5px}
.form-section-subtitle{font-size:13px;color:#4b5563;margin-bottom:16px;line-height:1.45}
.duration-type-box{display:none}
.duration-header-line{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.duration-header-text{flex:1}
.hd-toggle-wrap{display:flex;align-items:center;gap:10px;padding-top:4px;white-space:nowrap}
.hd-toggle-label{font-size:13px;font-weight:800;color:#111827}
.hd-switch{position:relative;display:inline-block;width:58px;height:32px}
.hd-switch input{opacity:0;width:0;height:0}
.hd-slider{position:absolute;cursor:pointer;inset:0;background:#fff;border:2px solid #c9d9e2;border-radius:999px;transition:all .22s ease}
.hd-slider::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#9bd3df;border-radius:50%;transition:all .22s ease}
.hd-switch input:checked + .hd-slider{border-color:var(--green);background:var(--green3)}
.hd-switch input:checked + .hd-slider::before{transform:translateX(26px);background:var(--green)}
.duration-options{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:14px;margin-top:12px}
#control_tipo_duracion .duration-option,#control_tipo_duracion .duration-option *{color:#111827}
#control_tipo_duracion .duration-option-text{color:#4b5563}
.duration-option{position:relative;display:block;padding:18px;border:1px solid #dbe5ee;border-radius:18px;background:#fff;cursor:pointer;transition:all .22s ease;box-shadow:0 6px 18px rgba(15,23,42,.04);min-height:120px;overflow:hidden}
.duration-option::before,.duration-option::after{display:none!important;content:none!important}
.duration-option:hover{transform:translateY(-1px);border-color:var(--green);box-shadow:0 12px 26px rgba(15,23,42,.08)}
.duration-option.is-selected{border-color:var(--green);background:#f2faf5;box-shadow:0 0 0 3px rgba(0,92,43,.12)}
.duration-option input{position:absolute;opacity:0;pointer-events:none}
.duration-icon{width:42px;height:42px;border-radius:14px;background:#eef8f2;color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;margin-bottom:12px}
.duration-option.is-selected .duration-icon{background:var(--green);color:#fff}
.duration-option-title{display:block;font-weight:800;font-size:15px;line-height:1.2;margin-bottom:6px;color:#111827}
.duration-option-text{display:block;font-size:12.8px;line-height:1.45;color:#4b5563}
.duration-help{display:none;margin-top:14px;padding:13px 14px;border-radius:14px;background:#f8fafc;border:1px solid #dbe5ee;color:#4b5563;font-size:13px;line-height:1.5}
.smart-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.duration-summary{display:none;margin-top:14px;padding:12px 14px;border-radius:14px;background:#f8fafc;border:1px dashed #cbd5e1;color:#4b5563;font-size:13px;line-height:1.45}
.duration-summary strong{color:#111827}
.field-hidden{display:none!important}

/* Info jefe */
.info-jefe{background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border:1px solid #a7f3d0;border-radius:12px;padding:16px 20px;margin-bottom:24px;color:#065f46;font-weight:500}

/* DETALLE */
.detail-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.06);padding:28px 32px}
.detail-row{display:grid;grid-template-columns:200px 1fr;padding:18px 0;border-bottom:1px solid #f1f5f9;font-size:15px;align-items:center}
.detail-row:last-child{border-bottom:none}
.detail-row dt{color:#64748b;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.detail-row dd{margin:0;color:#334155;font-weight:600}

/* NUEVOS ESTILOS PARA VISTA DE DETALLE MEJORADA */
.detail-section-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f1f5f9}
.detail-section-icon{font-size:22px;line-height:1}
.detail-section-title{font-size:16px;font-weight:700;color:#1e293b;margin:0}

.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px 32px}
.detail-item{display:flex;flex-direction:column;gap:6px}
.detail-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.4px}
.detail-value{font-size:15px;font-weight:600;color:#1e293b}
.detail-value.date-value{color:#0a5a1f;background:#f0fdf4;padding:4px 10px;border-radius:6px;display:inline-block;width:fit-content;font-size:14px;border:1px solid #bbf7d0}
.detail-value.duration-value{color:#0369a1;background:#f0f9ff;padding:4px 10px;border-radius:6px;display:inline-block;width:fit-content;font-size:14px;border:1px solid #bae6fd}

.detail-status-box{display:flex;align-items:center;gap:16px;padding:16px 20px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);border-radius:12px;border:1px solid #e2e8f0}
.detail-status-label{font-size:14px;font-weight:600;color:#475569}
.detail-status-badge{display:flex;align-items:center}

.detail-meta-row{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 16px;background:#fafafa;border-radius:8px;font-size:13px}
.detail-meta-label{color:#64748b;font-weight:500}
.detail-meta-value{color:#334155;font-weight:600}

.archivo-adjunto-box{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border:1px solid #bbf7d0;border-radius:12px;flex-wrap:wrap}
.archivo-info-row{display:flex;align-items:center;gap:14px}
.archivo-icon-large{font-size:32px;line-height:1}
.archivo-icon-svg{width:40px;height:40px;color:var(--green);flex-shrink:0}
.archivo-details{display:flex;flex-direction:column;gap:4px}
.archivo-name{font-size:14px;font-weight:700;color:#166534}
.archivo-hint{font-size:12px;color:#16a34a}
.btn-ver-archivo{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;font-size:13px}

.observacion-block{margin-bottom:16px;padding:16px 20px;background:#f8fafc;border-left:4px solid #0a5a1f;border-radius:0 12px 12px 0}
.observacion-block:last-of-type{margin-bottom:0}
.observacion-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.observacion-badge{font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.observacion-badge.obs-solicitante{background:#e0f2fe;color:#0369a1;border:1px solid #7dd3fc}
.observacion-badge.obs-jefe{background:#f3e8ff;color:#7c3aed;border:1px solid #c4b5fd}
.observacion-badge.obs-rrhh{background:#dcfce7;color:#16a34a;border:1px solid #86efac}
.observacion-content{color:#334155;font-size:14px;line-height:1.7}
.observacion-content p{margin:0 0 8px 0}
.observacion-content p:last-child{margin-bottom:0}
.observacion-empty{text-align:center;padding:32px 20px;color:#94a3b8;font-style:italic}

@media (max-width:768px){
  .detail-card{padding:20px 24px}
  .detail-grid{grid-template-columns:1fr}
  .detail-section-header{margin-bottom:16px;padding-bottom:12px}
  .detail-section-title{font-size:15px}
  .archivo-adjunto-box{flex-direction:column;align-items:flex-start}
  .detail-status-box{flex-direction:column;align-items:flex-start;gap:10px}
}

@media (prefers-color-scheme:dark){
  .detail-section-title{color:#e8f0e9}
  .detail-value{color:#e8f0e9}
  .detail-value.date-value{background:#1a3a22;border-color:#2e7d32}
  .detail-value.duration-value{background:#0d2949;border-color:#1565c0}
  .detail-section-header{border-color:#3a4a3c}
  .detail-status-box{background:linear-gradient(135deg,#232a25 0%,#1a1f1b 100%);border-color:#3a4a3c}
  .detail-meta-row{background:#232a25}
  .detail-meta-value{color:#e8f0e9}
  .archivo-adjunto-box{background:linear-gradient(135deg,#1a3a22 0%,#264d30 100%);border-color:#2e7d32}
  .archivo-name{color:#86efac}
  .archivo-hint{color:#4ade80}
  .observacion-block{background:#232a25;border-left-color:#128b3b}
  .observacion-badge.obs-solicitante{background:#0d2949;color:#64b5f6;border-color:#1565c0}
  .observacion-badge.obs-jefe{background:#3d2c5c;color:#a78bfa;border-color:#7c3aed}
  .observacion-badge.obs-rrhh{background:#1a3a22;color:#4ade80;border-color:#16a34a}
  .observacion-content{color:#e8f0e9}
  .observacion-empty{color:#9aa79b}
}

/* GESTION */
.gestion-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.06);padding:24px 28px;margin-top:24px}
.gestion-card h3{font-size:16px;font-weight:700;color:#475569;margin-bottom:16px}

/* FLASH */
.flash{padding:13px 18px;border-radius:var(--r2);margin-bottom:20px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;transition:opacity .35s ease,transform .35s ease,max-height .35s ease,margin .35s ease,padding .35s ease}
.flash-exit{opacity:0;transform:translateY(-10px);max-height:0;margin-bottom:0;padding-top:0;padding-bottom:0;overflow:hidden;pointer-events:none}
.flash-ok{background:#e8f5ec;color:#1a6b2e;border:1px solid #a5d6b0}
.flash-err{background:#fdecea;color:#b71c1c;border:1px solid #f9a8a8}

@media (prefers-color-scheme: dark){
  .flash-ok{background:var(--green3);border-color:var(--green4)}
  .flash-err{background:#3d1512;border-color:#c62828;color:#ef5350}
}

/* EMPTY STATE MODERNO */
.empty-state{text-align:center;padding:80px 24px;background:linear-gradient(180deg,var(--surface) 0%,var(--gray) 100%);border-radius:20px;border:2px dashed var(--border);margin:20px 0}
.empty-state p{font-size:16px;color:var(--muted);line-height:1.6}
.empty-state strong{color:var(--green)}

/* LOGIN MODERNO - Glassmorphism *//* LOGIN CON FONDO ILUSTRADO + CAPIBARA GRANDE */
.login-container{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  overflow:hidden;
  background:#1f6f33 var(--ugc-login-bg-image, url("../img/login-fondo.png")) center center / cover no-repeat;
}

.login-card{
  width:100%;
  max-width:430px;
  background:rgba(255,255,255,.95);
  border-radius:26px;
  padding:36px 34px 28px;
  box-shadow:
    0 20px 45px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.2) inset;
  position:relative;
  z-index:2;
}

.login-brand{
  text-align:center;
  margin-bottom:26px;
}

.brand-icon{
  display:flex;
  justify-content:center;
  margin-bottom:18px;
}

.logo-capibara-wrap{
  position:relative;
  display:inline-flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
}

.login-brand img{
  user-select:none;
  -webkit-user-drag:none;
}

.login-logo{
  width:122px;
  height:122px;
  object-fit:contain;
  border-radius:24px;
  background:linear-gradient(135deg,#0b5a1f 0%,#0e6d29 100%);
  padding:14px;
  box-shadow:
    0 16px 34px rgba(10,90,31,.24),
    0 0 0 5px rgba(255,255,255,.22);
}

/* CAPIBARA DEL LOGIN */
.login-capibara{
  position:absolute;
  right:-70px;
  bottom:-8px;
  width:120px;
  max-width:none;
  height:auto;
  object-fit:contain;
  z-index:3;
  display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));
}

.brand-title{
  font-size:23px;
  font-weight:800;
  color:#1b3f1f;
  letter-spacing:-.4px;
  margin-bottom:6px;
}

.brand-subtitle{
  font-size:14px;
  color:#6e7d6f;
  font-weight:500;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.input-group{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.input-label{
  font-size:13px;
  font-weight:700;
  color:#2f3d30;
  margin-left:2px;
}

.input-wrap{
  display:flex;
  align-items:center;
  min-height:56px;
  background:#fbfcfb;
  border:1.5px solid #d8e4d9;
  border-radius:14px;
  padding:0 8px;
  transition:all .22s ease;
}

.input-wrap:focus-within{
  background:#fff;
  border-color:#1c8b38;
  box-shadow:0 0 0 4px rgba(28,139,56,.10);
}

.input-icon{
  color:#7a877a;
  padding:0 12px;
  display:flex;
  align-items:center;
}

.input-icon-svg{
  width:20px;
  height:20px;
  color:#7a877a;
  margin:0 12px;
  flex-shrink:0;
}

.toggle-icon{
  width:18px;
  height:18px;
  color:#7a877a;
}

.input-field{
  flex:1;
  border:none;
  background:transparent;
  padding:15px 8px 15px 2px;
  font-size:15px;
  color:#243424;
  font-family:inherit;
  outline:none;
}

.input-field::placeholder{
  color:#9ca89d;
}

.input-field{
  flex:1;
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  box-shadow:none;
}

.input-field:focus{
  border:none;
  outline:none;
  box-shadow:none;
}

.input-toggle{
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  color:#7a877a;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  transition:color .2s ease;
}

.input-toggle:hover{
  background:none;
  color:#0a5a1f;
}

.toggle-icon{
  width:20px;
  height:20px;
  display:block;
}

.eye-open{
  display:none;
}

.input-toggle.is-visible .eye-closed{
  display:none;
}

.input-toggle.is-visible .eye-open{
  display:block;
}

.btn-login{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:54px;
  margin-top:6px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg,#0B5A2B 0%,#3b8659 55%,#0B5A2B 100%);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(10,90,31,.22);
  transition:all .25s ease;
}

.btn-login:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 28px rgba(10,90,31,.28);
}

.btn-icon{
  display:flex;
  transition:transform .22s ease;
}

.btn-login:hover .btn-icon{
  transform:translateX(4px);
}

.alert{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  margin-bottom:18px;
}

.alert-error{
  background:#fff2f0;
  color:#c0392b;
  border:1px solid #f3c1bb;
}

@media (max-width:640px){
  .login-card{
    max-width:100%;
    padding:28px 20px 22px;
    border-radius:22px;
  }

  .login-logo{
    width:108px;
    height:108px;
  }

  .login-capibara{
    width:90px;
    right:-48px;
    bottom:-6px;
  }

  .brand-title{
    font-size:20px;
  }
}

/* STATS CARDS MODERNOS */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}
.stat-card{background:var(--surface);border-radius:16px;padding:24px;box-shadow:0 4px 20px rgba(10,90,31,.08);transition:var(--tr);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;border:1px solid var(--border)}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(10,90,31,.15)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green2),var(--green))}
.stat-icon{width:44px;height:44px;border-radius:12px;background:var(--green3);display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:4px}
.stat-card .num{font-size:32px;font-weight:800;color:var(--green);line-height:1}
.stat-card .lbl{font-size:13px;color:var(--muted);font-weight:500}

.dashboard-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:32px}
.dashboard-kpi-row--compact{margin-bottom:0}
.dashboard-kpi-card{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  min-height:132px;
  padding:16px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r2);
  color:var(--text);
  transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;
}
.dashboard-kpi-card:hover{
  transform:translateY(-3px);
  border-color:var(--stat-color);
  box-shadow:0 10px 24px rgba(10,90,31,.12);
}
.dashboard-kpi-card.is-active{
  border-color:var(--stat-color);
  box-shadow:0 0 0 3px var(--stat-bg),0 10px 24px rgba(10,90,31,.12);
}
.dashboard-kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.dashboard-kpi-icon{
  width:34px;
  height:34px;
  border-radius:8px;
  background:var(--stat-bg);
  color:var(--stat-color);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.dashboard-kpi-badge{
  font-size:9px;
  font-weight:800;
  color:var(--stat-color);
  background:var(--stat-bg);
  border:1px solid var(--stat-color);
  border-radius:99px;
  padding:1px 7px;
  letter-spacing:.4px;
  line-height:1.4;
}
.dashboard-kpi-body{min-width:0}
.dashboard-kpi-value{font-size:24px;font-weight:800;color:var(--text);line-height:1}
.dashboard-kpi-label{font-size:11px;color:var(--muted);margin-top:3px;font-weight:500;line-height:1.25}

/* MEJORAS TABLA */
.ugc-table thead th{background:linear-gradient(180deg,var(--green),#0d7028);padding:14px 18px}
.ugc-table tbody tr:hover{background:#f0f7f2}
.ugc-table td{padding:14px 18px}

/* RESPONSIVE */
@media(max-width:900px){
  .login-card{padding:36px 28px;margin:16px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .dashboard-kpi-row{grid-template-columns:repeat(2,1fr)}
  .ugc-header{padding:0 14px}
}

@media(max-width:768px){
  .user-chip{display:none}
  .stats-row{grid-template-columns:1fr}
  .dashboard-kpi-row{grid-template-columns:1fr}
  .stat-card{flex-direction:row;align-items:center;gap:16px}
  .stat-icon{margin-bottom:0}
  .detail-row{grid-template-columns:1fr;gap:6px}
  .detail-row dt{color:var(--green)}
}

@media(max-width:600px){
  .brand-title{font-size:20px}
  .login-card{padding:28px 20px}
  .ugc-wrap{padding:16px 12px 48px}
  .form-card{padding:24px 20px}
  .form-row{grid-template-columns:1fr}
  .duration-header-line{flex-direction:column}
  .hd-toggle-wrap{width:100%;justify-content:space-between;padding-top:0}
  .duration-options,.smart-form-row{grid-template-columns:1fr}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}
  .section-header{flex-direction:column;align-items:flex-start;gap:10px}
  .ugc-table thead{display:none}
  .ugc-table,.ugc-table tbody,.ugc-table tr,.ugc-table td{display:block;width:100%}
  .ugc-table tr{margin-bottom:12px;border:1px solid var(--border);border-radius:var(--r2);padding:12px;background:var(--surface)}
  .ugc-table td{border:none;padding:8px 0;font-size:13px}
  .ugc-table td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--muted);display:block;font-size:11px;margin-bottom:2px}
  .actions-cell{flex-direction:column}
  .actions-cell .btn{width:100%}
  .ugc-pagination{align-items:stretch;flex-direction:column}
  .ugc-pagination__meta{text-align:center}
  .ugc-pagination__controls{justify-content:center}
}

.pdf-preview-container {
  margin-top: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.pdf-preview-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.pdf-preview-header .pdf-icon{
  width:20px;
  height:20px;
  color:#64748b;
  flex-shrink:0;
}

.pdf-preview-header .pdf-filename {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdf-preview-header .pdf-size {
  font-size: 11px;
  color: #64748b;
  background: #e2e8f0;
  padding: 2px 8px;
  border-radius: 20px;
}

.pdf-preview-header .remove-pdf-btn {
  background: #fee2e2;
  color: #dc2626;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
}

.pdf-preview-header .remove-pdf-btn:hover {
  background: #fecaca;
}

.pdf-preview-content {
  height: 320px;
  background: #f1f5f9;
}

.pdf-preview-content iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.file-error {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .pdf-preview-container {
    background: var(--surface);
    border-color: var(--border);
  }

  .pdf-preview-header {
    background: var(--green3);
    border-color: var(--border);
  }

  .pdf-preview-header .pdf-filename {
    color: #e8f0e9;
  }

  .pdf-preview-content {
    background: #1a1f1b;
  }

  .file-error {
    background: #3d1512;
    border-color: #c62828;
    color: #ef5350;
  }

}

@media (max-width: 768px) {
  .pdf-preview-content {
    height: 240px;
  }
}

/* Documento actual cargado - Mejora visual */
.pdf-current-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pdf-current-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pdf-current-header .pdf-icon {
  width: 24px;
  height: 24px;
  color: #16a34a;
  flex-shrink: 0;
}

.pdf-current-label {
  font-size: 14px;
  font-weight: 600;
  color: #166534;
}

.pdf-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
  transition: all 0.2s ease;
  cursor: pointer;
}

.pdf-view-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22, 163, 74, 0.4);
}

.pdf-view-btn svg {
  width: 16px;
  height: 16px;
}

@media (prefers-color-scheme: dark) {
  .pdf-current-file {
    background: linear-gradient(135deg, #1a3a22 0%, #264d30 100%);
    border-color: #2e7d32;
  }

  .pdf-current-header .pdf-icon {
    color: #4ade80;
  }

  .pdf-current-label {
    color: #86efac;
  }

  .pdf-view-btn {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  }

  .pdf-view-btn:hover {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
  }
}

@media (max-width: 768px) {
  .pdf-current-file {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .pdf-view-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   SISTEMA DE NOTIFICACIONES
   ============================================ */
.notificacion-wrap {
  position: relative;
  margin-left: auto;
  margin-right: 8px;
}

.notificacion-bell {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--tr);
  position: relative;
  color: #fff;
}

.notificacion-bell:hover {
  background: rgba(255,255,255,.25);
  transform: scale(1.05);
}

.notificacion-bell svg {
  width: 20px;
  height: 20px;
}

.notificacion-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 6px rgba(239,68,68,.4);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.notificacion-badge:empty,
.notificacion-badge[data-count="0"] {
  display: none;
}

.notificacion-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  max-height: 450px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow2);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all .2s ease;
  overflow: hidden;
}

.notificacion-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.notificacion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--green3) 0%, var(--green4) 100%);
  border-radius: 16px 16px 0 0;
}

.notificacion-header h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  margin: 0;
}

.notificacion-header .mark-all {
  font-size: 12px;
  color: var(--green2);
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--tr);
}

.notificacion-header .mark-all:hover {
  background: rgba(255,255,255,.5);
}

.notificacion-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
}

.notificacion-list::-webkit-scrollbar {
  width: 6px;
}

.notificacion-list::-webkit-scrollbar-track {
  background: transparent;
}

.notificacion-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.notificacion-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none;
  color: var(--text);
  background: transparent;
  font-family: inherit;
  text-align: left;
  margin-bottom: 4px;
}

.notificacion-item:hover {
  background: var(--green3);
}

.notificacion-item.unread {
  background: rgba(18,139,59,.06);
  border-left: 3px solid var(--green2);
}

.notificacion-item.unread:hover {
  background: rgba(18,139,59,.1);
}

.notificacion-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.notificacion-icon.nueva {
  background: #dbeafe;
}

.notificacion-icon.aprobada {
  background: #dcfce7;
}

.notificacion-icon.rechazada {
  background: #fee2e2;
}

.notificacion-icon.cancelada {
  background: #f1f5f9;
}

.notificacion-icon.revision {
  background: #fef3c7;
}

.notificacion-icon::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2563eb;
}

.notificacion-icon.aprobada::before {
  background: #16a34a;
}

.notificacion-icon.rechazada::before {
  background: #dc2626;
}

.notificacion-icon.cancelada::before {
  background: #64748b;
}

.notificacion-icon.revision::before {
  background: #d97706;
}

.notificacion-content {
  flex: 1;
  min-width: 0;
}

.notificacion-content p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 4px 0;
  color: var(--text);
}

.notificacion-time {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

.notificacion-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.notificacion-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  opacity: .5;
}

.notificacion-empty p {
  font-size: 13px;
  margin: 0;
}

.notificacion-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.notificacion-footer a {
  font-size: 12px;
  color: var(--green2);
  text-decoration: none;
  font-weight: 600;
}

.notificacion-footer a:hover {
  text-decoration: underline;
}

/* Responsive notificaciones */
@media (max-width: 768px) {
  .notificacion-wrap {
    margin-right: 4px;
  }

  .notificacion-dropdown {
    position: fixed;
    top: 110px;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - 150px);
    border-radius: 16px;
  }

  .notificacion-header {
    border-radius: 16px 16px 0 0;
  }
}

/* Animación shake para nueva notificación */
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); }
  20%, 40%, 60%, 80% { transform: rotate(8deg); }
}

.notificacion-bell.has-new {
  animation: bellShake .8s ease both;
}

.stat-card-link{
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

.stat-card-link:hover{
  transform: translateY(-3px);
}

.stat-card-link.is-active{
  border-color: var(--green);
  box-shadow: 0 12px 32px rgba(10,90,31,.16);
}

.stat-card-link .stat-icon,
.stat-card-link .num,
.stat-card-link .lbl{
  color: inherit;
}
/* ============================================
   FIX: Tarjetas de empleados - sin subrayados
   ============================================ */
.stats-row a.stat-card,
.stats-row a.stat-card:hover,
.stats-row a.stat-card:visited,
.stats-row a.stat-card:active,
.stats-row a.stat-card *{
  text-decoration: none !important;
}

.stats-row a.stat-card .num,
.stats-row a.stat-card .lbl {
  text-decoration: none !important;
  border-bottom: none !important;
}

.table-subtext{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

/* Header principal con busqueda integrada */
.ugc-header{
  display:grid;
  grid-template-columns:auto minmax(320px,680px) auto;
  gap:22px;
  height:104px;
  padding:0 28px;
}

.header-left,
.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}

.header-actions{
  justify-content:flex-end;
}

.header-actions .notificacion-wrap{
  margin-left:0;
  margin-right:0;
}

.header-logout-form{
  display:flex;
}

.header-search{
  width:100%;
  max-width:680px;
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(135px,190px) auto;
  align-items:center;
  gap:8px;
  justify-self:center;
  position:relative;
  margin:0;
  padding:6px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 28px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.header-search-icon{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  width:17px;
  height:17px;
  color:rgba(255,255,255,.82);
  pointer-events:none;
}

.header-search-icon svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.header-search input,
.header-search select,
.header-search button{
  height:38px;
  border:0;
  border-radius:12px;
  font:inherit;
  font-size:13px;
  outline:none;
}

.header-search input{
  min-width:0;
  width:100%;
  padding:0 14px 0 38px;
  color:#fff;
  background:transparent;
}

.header-search input::placeholder{
  color:rgba(255,255,255,.78);
}

.header-search select{
  width:100%;
  padding:0 30px 0 12px;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
}

.header-search select option{
  color:var(--text);
  background:#fff;
}

.header-search button{
  padding:0 16px;
  color:var(--green);
  background:#fff;
  font-weight:800;
  cursor:pointer;
  transition:var(--tr);
}

.header-search button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.header-search:focus-within{
  border-color:rgba(255,255,255,.4);
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 32px rgba(0,0,0,.18);
}

@media(max-width:1180px){
  .ugc-header{
    grid-template-columns:auto 1fr;
    height:auto;
    min-height:104px;
    padding:12px 18px;
  }

  .header-search{
    grid-column:1/-1;
    order:3;
    max-width:none;
  }

  .header-actions{
    justify-self:end;
  }
}

@media(max-width:768px){
  .ugc-header{
    grid-template-columns:1fr;
  }

  .header-left,
  .header-actions{
    width:100%;
    justify-content:space-between;
  }

  .header-search{
    grid-template-columns:1fr;
  }

  .header-search-icon{
    top:25px;
  }

  .header-search input,
  .header-search select,
  .header-search button{
    width:100%;
  }
}
    
/* HEADER Y FOOTER - mostrar una sola imagen completa, sin líneas */
.topbar,
.app-header,
.main-header,
.header,
.navbar,
header,
.footer-login-fondo,
.app-footer,
footer {
  background-color: #063125 !important;

  background-image:
    linear-gradient(rgba(6, 49, 37, 0.35), rgba(6, 49, 37, 0.35)),
    url("../img/login-fondo.png") !important;

  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}/* COLOR VERDE PARA BOTONES APROBAR */
.btn-green,
button.btn-green,
a.btn-green{
  background: #0B5A2B !important;
  border: 1.5px solid #0B5A2B !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(11, 90, 43, 0.24) !important;
}

/* HOVER DE APROBAR: NO CAMBIA DE COLOR, SOLO SE MUEVE */
.btn-green:hover,
button.btn-green:hover,
a.btn-green:hover{
  background: #0B5A2B !important;
  border-color: #0B5A2B !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(11, 90, 43, 0.28) !important;
}


/* BOTÓN VER: BLANCO CON BORDE VERDE */
.btn-outline,
a.btn-outline{
  background: #ffffff !important;
  border: 1.5px solid #0B5A2B !important;
  color: #0B5A2B !important;
  box-shadow: none !important;
}

/* HOVER DE VER: NO SE PONE VERDE, SOLO SE MUEVE */
.btn-outline:hover,
a.btn-outline:hover{
  background: #ffffff !important;
  border-color: #0B5A2B !important;
  color: #0B5A2B !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}


/* BOTÓN EDITAR: SIEMPRE VERDE */
.btn-editar,
a.btn-editar,
button.btn-editar{
  background: #0B5A2B !important;
  border: 1.5px solid #0B5A2B !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(11, 90, 43, 0.24) !important;
}

/* HOVER DE EDITAR: NO CAMBIA DE COLOR, SOLO SE MUEVE */
.btn-editar:hover,
a.btn-editar:hover,
button.btn-editar:hover{
  background: #0B5A2B !important;
  border-color: #0B5A2B !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(11, 90, 43, 0.28) !important;
}


/* COLOR VERDE PARA ENCABEZADOS DE TABLAS */
table thead,
table thead tr,
.table thead,
.table thead tr{
  background: #0B5A2B !important;
}

table thead th,
.table thead th{
  background: #0B5A2B !important;
  color: #ffffff !important;
  border: none !important;
}


/* ACCIONES EN FILA SIN DAÑAR EL RESTO DE LA TABLA */
.ugc-table td.actions-cell{
  display: table-cell !important;
  width: 1% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

/* FORMULARIO DE APROBAR / ELIMINAR EN LA MISMA LÍNEA */
.ugc-table td.actions-cell .inline-form{
  display: inline-flex !important;
  width: auto !important;
  margin: 0 6px 0 0 !important;
  vertical-align: middle !important;
}

/* BOTONES COMPACTOS EN ACCIONES */
.ugc-table td.actions-cell .btn{
  width: auto !important;
  min-width: auto !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* SEPARACIÓN ENTRE BOTONES */
.ugc-table td.actions-cell > .btn{
  margin-right: 6px !important;
}
/* EDITAR SIEMPRE VERDE POR DENTRO */
.ugc-table td.actions-cell .btn-editar,
.ugc-table td.actions-cell a.btn-editar,
.ugc-table td.actions-cell button.btn-editar,
.ugc-table td.actions-cell a[href*="editar"],
.ugc-table td.actions-cell a[href*="edit"]{
  background: #0B5A2B !important;
  background-color: #0B5A2B !important;
  border: 1.5px solid #0B5A2B !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(11, 90, 43, 0.24) !important;
}

/* HOVER EDITAR: SOLO SE MUEVE, NO CAMBIA COLOR */
.ugc-table td.actions-cell .btn-editar:hover,
.ugc-table td.actions-cell a.btn-editar:hover,
.ugc-table td.actions-cell button.btn-editar:hover,
.ugc-table td.actions-cell a[href*="editar"]:hover,
.ugc-table td.actions-cell a[href*="edit"]:hover{
  background: #0B5A2B !important;
  background-color: #0B5A2B !important;
  border-color: #0B5A2B !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 20px rgba(11, 90, 43, 0.28) !important;
}
/* ALINEAR TODAS LAS CELDAS DE LA TABLA */
.ugc-table tbody td{
  vertical-align: middle !important;
}

/* Estado centrado verticalmente */
.ugc-table td[data-label="Estado"]{
  vertical-align: middle !important;
}

/* Badge de estado */
.ugc-table td[data-label="Estado"] .badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}

/* Celda acciones: NO usar display flex en el td */
.ugc-table td.actions-cell{
  vertical-align: middle !important;
  white-space: nowrap !important;
}

/* Separación entre botones */
.ugc-table td.actions-cell .btn,
.ugc-table td.actions-cell .inline-form{
  margin-right: 8px !important;
}

.ugc-table td.actions-cell .btn:last-child,
.ugc-table td.actions-cell .inline-form:last-child{
  margin-right: 0 !important;
}

/* Form del botón eliminar */
.ugc-table td.actions-cell .inline-form{
  display: inline-flex !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* BOTONES DE ACCIONES: IGUALES PERO MÁS DELGADOS */
.ugc-table td.actions-cell .btn,
.ugc-table td.actions-cell a.btn,
.ugc-table td.actions-cell button.btn,
.ugc-table td.actions-cell .inline-form .btn{
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;

  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;

  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}
/* BUSCADOR EMPLEADOS: MISMA ANCHURA QUE LA TABLA Y EN UNA LÍNEA */
.empleados-filter-card{
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 24px 0 !important;
  padding: 28px 32px !important;
}

/* Todo en una sola fila */
.empleados-filter-form{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr 220px 90px 90px !important;
  gap: 12px !important;
  align-items: end !important;
}

/* Quita espacios que bajan los campos */
.empleados-filter-form .form-group{
  margin-bottom: 0 !important;
  min-width: 0 !important;
}

/* Inputs alineados */
.empleados-filter-form input,
.empleados-filter-form select{
  height: 50px !important;
}

/* Botones al lado, alineados */
.empleados-filter-form .btn{
  height: 44px !important;
  padding: 0 16px !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsive: en celular sí baja en columna */
@media(max-width: 768px){
  .empleados-filter-form{
    grid-template-columns: 1fr !important;
  }

  .empleados-filter-form .btn{
    width: 100% !important;
  }
}
.btn-dark {
  background: #111827;
  color: #ffffff;
  border: 1px solid #111827;
}

.btn-dark:hover {
  background: #000000;
  color: #ffffff;
}.btn-cancelar-agenda {
  background: #dc2626;
  color: #ffffff;
  border: 1px solid #dc2626;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  min-width: auto;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cancelar-agenda:hover {
  background: #b91c1c;
  color: #ffffff;
  border-color: #b91c1c;
}
/* ================================
   BADGES DE ESTADO
================================ */

.badge-estado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-width: 142px;
  height: 32px;
  padding: 0 14px;

  border-radius: 999px;
  border: 1px solid transparent;

  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  letter-spacing: -0.01em;
  box-shadow: 0 6px 14px rgba(15, 35, 25, 0.06);
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.75;
  flex: 0 0 auto;
}

/* Pendiente jefe */
.badge-pendiente {
  color: #9a6500;
  background: #fff7e6;
  border-color: #f2c66d;
}

/* Pendiente RRHH */
.badge-rrhh {
  color: #075985;
  background: #edf7ff;
  border-color: #b9dcf5;
}

/* Aprobado RRHH */
.badge-aprobado {
  color: #0b6b2e;
  background: #eaf8ef;
  border-color: #9bd7ad;
}

/* Rechazado */
.badge-rechazado {
  color: #9f1239;
  background: #fff1f2;
  border-color: #fda4af;
}

/* Cancelado */
.badge-cancelado-agenda {
  color: #374151;
  background: #f3f6fa;
  border-color: #cbd5e1;
}

/* Estado general */
.badge-info {
  color: #334155;
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* Para que la columna Estado tenga mejor aire */
.ugc-table th:nth-child(7),
.ugc-table td:nth-child(7) {
  width: 180px;
  min-width: 180px;
  text-align: center;
}

.sa-ac-dropdown{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r2);
  box-shadow:0 6px 24px rgba(0,0,0,.12);
  z-index:1000;

  max-height:216px;
  overflow-y:auto;
  overflow-x:hidden;
}