:root{
  --azul:#063763;--azul2:#082b4d;--azul3:#0b5ed7;--bg:#f4f7fb;--card:#fff;--text:#172033;--muted:#718096;--border:#e6edf5;--green:#10b981;--red:#ef4444;--orange:#f59e0b;--purple:#7c3aed;--cyan:#06b6d4;--shadow:0 14px 35px rgba(15,45,88,.10)
}
*{box-sizing:border-box}html,body{max-width:100%;overflow-x:hidden}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#f7fbff 0%,#eef4fb 100%);color:var(--text)}
a{color:inherit}.app{min-height:100vh;display:flex}.sidebar{width:280px;background:linear-gradient(180deg,#073a68,#062b50 55%,#052441);color:#fff;position:fixed;left:0;top:0;bottom:0;padding:18px 18px;box-shadow:6px 0 25px rgba(3,36,65,.18);z-index:10}.brand{display:flex;align-items:center;gap:14px;font-weight:800;font-size:18px;margin-bottom:22px}.brand .logo{width:72px;height:54px;display:flex;align-items:center;justify-content:center}.brand .logo img{max-width:72px;max-height:54px;object-fit:contain;filter:brightness(0) invert(1)}.brand b{display:block;font-size:25px;line-height:25px}.brand span{display:block;line-height:18px}.profile{display:flex;gap:14px;align-items:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}.avatar{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,#20d0ff,#0d6efd);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 8px 18px rgba(0,0,0,.18)}.profile h3{margin:0;color:#fff;font-size:16px}.profile p{margin:4px 0;color:#c7d7ea;font-size:12px}.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:#1d75ff;color:#fff;font-size:11px;font-weight:700}.online{font-size:12px;color:#b8d2ed;margin-top:8px}.online:before{content:'●';color:#22c55e;margin-right:6px}.menu-title{font-size:12px;color:#a9bed6;font-weight:800;margin:24px 0 10px}.menu{display:flex;flex-direction:column;gap:8px}.menu a{text-decoration:none;color:#dbe8f6;padding:13px 14px;border-radius:10px;font-weight:700;display:flex;align-items:center;gap:12px}.menu a:hover,.menu a.active{background:rgba(30,111,255,.20);outline:1px solid rgba(82,154,255,.35);color:#fff}.logout-side{position:absolute;left:18px;right:18px;bottom:18px}.logout-side a{display:block;text-decoration:none;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:13px 14px;color:#fff;font-weight:700;background:rgba(255,255,255,.05)}
.main{margin-left:280px;min-height:100vh;width:calc(100% - 280px);overflow-x:hidden}.topbar{height:76px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 34px;position:sticky;top:0;z-index:5}.hamb{font-size:24px;color:#5b6b82}.hello{color:#30445f;font-weight:700}.container{width:100%;max-width:1320px;margin:0 auto;padding:30px 32px}.page-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.page-title h1{margin:0;font-size:32px;color:#10243c}.crumb{font-size:13px;color:#0d6efd;font-weight:700}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow);margin-bottom:22px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:26px}.stat{background:#fff;border:1px solid var(--border);border-radius:14px;padding:22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:18px}.iconbox{width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;background:var(--azul3)}.iconbox.green{background:var(--green)}.iconbox.purple{background:var(--purple)}.iconbox.orange{background:var(--orange)}.stat small{color:var(--muted);font-weight:700}.stat b{font-size:24px;display:block;margin:5px 0;color:#14263d}.content-grid{display:grid;grid-template-columns:minmax(280px,320px) minmax(0,1fr);gap:24px;align-items:start}.card{min-width:0}.card-title{font-size:18px;font-weight:800;color:#0d6efd;margin:0 0 20px;display:flex;gap:8px;align-items:center}label{font-weight:800;font-size:13px;color:#42526b;margin-bottom:8px;display:block}input,select,textarea{width:100%;padding:12px;border:1px solid #dbe3ee;border-radius:8px;font-size:15px;background:#fff;outline:none}input:focus,select:focus,textarea:focus{border-color:#5ea1ff;box-shadow:0 0 0 3px rgba(13,110,253,.10)}textarea{min-height:96px}.field{margin-bottom:15px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;padding:12px 16px;background:linear-gradient(135deg,#0d6efd,#0954c9);color:#fff;text-decoration:none;cursor:pointer;font-weight:800;box-shadow:0 8px 15px rgba(13,110,253,.18)}.btn:hover{filter:brightness(.96)}.btn-green{background:linear-gradient(135deg,#19c37d,#0ea96a)}.btn-red{background:linear-gradient(135deg,#ff4d5e,#e11d48)}.btn-orange{background:linear-gradient(135deg,#ff9d21,#f97316)}.btn-light{background:#eef5ff;color:#0d6efd;box-shadow:none}.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px;font-weight:700}.ok{background:#dcfce7;color:#166534}.err{background:#fee2e2;color:#991b1b}.info{background:#dbeafe;color:#1e3a8a}.table-tools{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.searchbox{max-width:300px;position:relative}.table-wrap{overflow-x:hidden;border:1px solid var(--border);border-radius:10px}table{width:100%;border-collapse:collapse;background:#fff;min-width:0;table-layout:fixed}th,td{padding:14px 12px;border-bottom:1px solid var(--border);font-size:13px;text-align:left;vertical-align:middle;overflow-wrap:anywhere}th{background:linear-gradient(135deg,#0d6efd,#155bd7);color:#fff;font-size:13px}tr:hover td{background:#f8fbff}.badge{padding:6px 10px;border-radius:8px;font-size:12px;font-weight:800;display:inline-block}.pend{background:#fff7d6;color:#92400e}.aprob{background:#dcfce7;color:#166534}.rech{background:#fee2e2;color:#991b1b}.role-admin{background:#dbeafe;color:#0b5ed7}.role-rh{background:#ede9fe;color:#7c3aed}.role-jefe{background:#ffedd5;color:#ea580c}.role-empleado{background:#dcfce7;color:#16a34a}.muted{color:var(--muted);font-size:13px}.actions{display:flex;gap:8px;flex-wrap:wrap}.mini-btn{width:38px;height:38px;padding:0;border-radius:8px}.usercell{display:flex;align-items:center;gap:12px}.circle{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:900;background:linear-gradient(135deg,#0d6efd,#05c3d6)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:25px;background:linear-gradient(135deg,#073a68,#0d6efd)}.login-card{width:430px;background:#fff;border-radius:18px;padding:34px;box-shadow:0 25px 60px rgba(0,0,0,.25)}.center{text-align:center}.login-logo{font-size:50px}.login-card h1{margin:5px 0 8px;color:#0b2c4d}
@media(max-width:980px){.sidebar{position:relative;width:100%;height:auto}.logout-side{position:relative;left:auto;right:auto;bottom:auto;margin-top:20px}.app{display:block}.main{margin-left:0;width:100%}.stats{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.topbar{padding:0 18px}.container{padding:22px 16px}}
@media(max-width:640px){.stats,.grid,.grid3{grid-template-columns:1fr}.page-title{display:block}.hello{display:none}}

/* Ajustes para que no aparezca barra horizontal */
#tablaUsuarios th:nth-child(1),#tablaUsuarios td:nth-child(1){width:12%}
#tablaUsuarios th:nth-child(2),#tablaUsuarios td:nth-child(2){width:19%}
#tablaUsuarios th:nth-child(3),#tablaUsuarios td:nth-child(3){width:24%}
#tablaUsuarios th:nth-child(4),#tablaUsuarios td:nth-child(4){width:15%}
#tablaUsuarios th:nth-child(5),#tablaUsuarios td:nth-child(5){width:13%}
#tablaUsuarios th:nth-child(6),#tablaUsuarios td:nth-child(6){width:7%;text-align:center}
#tablaUsuarios th:nth-child(7),#tablaUsuarios td:nth-child(7){width:10%}
.actions{justify-content:center}.brand-title-small{font-size:20px;line-height:21px}
@media(max-width:1180px){.container{padding:26px 22px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.table-wrap{overflow-x:auto}table{min-width:760px}}