:root{
  --verde:#2f6b3a; --verde-claro:#e8f3ea; --verde-osc:#204a28; --verde-suave:#3f8a4d;
  --gris:#f4f6f5; --texto:#2c3338; --borde:#e6e9eb; --radio:16px;
  --sombra:0 4px 16px rgba(32,74,40,.06); --sombra-hover:0 10px 28px rgba(32,74,40,.12);
}
*{box-sizing:border-box;}
html,body{overflow-x:hidden;max-width:100%;}
body{background:var(--gris);color:var(--texto);font-family:'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden;}
.session-chip{background:var(--verde-claro);color:var(--verde-osc);font-weight:600;font-size:13.5px;padding:.4rem .8rem;border-radius:50px;white-space:nowrap;}
.session-chip-dark{background:rgba(255,255,255,.18);color:#fff!important;border:1px solid rgba(255,255,255,.3);}
.session-chip-dark i{color:#fff;}
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:radial-gradient(circle at 30% 20%,var(--verde-suave),var(--verde-osc) 70%);}
.login-card{background:#fff;padding:44px 36px;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.28);width:100%;max-width:390px;}
.login-logo{font-size:44px;text-align:center;}
.nav-pills .nav-link{border-radius:10px;color:var(--texto);font-weight:500;}
.nav-pills .nav-link.active{background:var(--verde);}

.sidebar{background:linear-gradient(180deg,var(--verde-osc),#173a1e);min-height:100vh;color:#fff;width:236px;position:fixed;top:0;left:0;padding-top:22px;transition:.2s;box-shadow:2px 0 12px rgba(0,0,0,.08);}
.sidebar .brand{font-weight:700;font-size:19px;text-align:center;padding:8px 0 22px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:12px;letter-spacing:.3px;}
.sidebar a{display:block;color:#dfe9e1;padding:12px 22px;text-decoration:none;font-size:14.5px;border-left:3px solid transparent;border-radius:0 30px 30px 0;margin-right:10px;transition:.15s;}
.sidebar a:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px);}
.sidebar a.active{background:rgba(255,255,255,.14);border-left-color:#8fd19e;color:#fff;font-weight:600;}

.main{margin-left:236px;padding:28px 32px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:14px;border-bottom:1px solid var(--borde);}
.topbar h4{font-weight:700;color:var(--verde-osc);}

.card-kpi{background:#fff;border-radius:var(--radio);border:1px solid var(--borde);padding:20px 22px;box-shadow:var(--sombra);transition:.2s;}
.card-kpi:hover{box-shadow:var(--sombra-hover);transform:translateY(-2px);}
.card-kpi h3{margin:2px 0 0;color:var(--verde-osc);font-weight:800;}
.card-kpi span{color:#8a9199;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;}

.panel{background:#fff;border-radius:var(--radio);border:1px solid var(--borde);padding:22px;box-shadow:var(--sombra);}
.table{border-collapse:separate;border-spacing:0;}
.table thead th{background:var(--verde-claro);color:var(--verde-osc);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.3px;border:none;}
.table td,.table th{vertical-align:middle;padding:12px 14px;}
.table tbody tr{transition:.12s;}
.table-hover tbody tr:hover{background:#f2f8f3;}

.btn{border-radius:10px;font-weight:500;}
.btn-success{background:var(--verde);border-color:var(--verde);}
.btn-success:hover{background:var(--verde-osc);border-color:var(--verde-osc);}
.btn-outline-success{color:var(--verde);border-color:var(--verde);}
.btn-outline-success:hover{background:var(--verde);}

.badge{border-radius:8px;font-weight:600;padding:.4em .7em;}
.badge-activo{background:var(--verde);}
.badge-suspendido{background:#c98a1c;}
.badge-baja{background:#a83232;}

.modal-content{border-radius:18px;border:none;box-shadow:0 20px 50px rgba(0,0,0,.2);}
.modal-header{border-bottom:1px solid var(--borde);}
.modal-footer{border-top:1px solid var(--borde);}
.form-control,.form-select{border-radius:10px;border-color:var(--borde);}
.form-control:focus,.form-select:focus{border-color:var(--verde-suave);box-shadow:0 0 0 .2rem rgba(47,107,58,.15);}

@media(max-width:900px){
  .sidebar{width:78vw;max-width:300px;transform:translateX(-100%);transition:transform .25s ease;z-index:1050;box-shadow:none;}
  .sidebar.show{transform:translateX(0);box-shadow:8px 0 30px rgba(0,0,0,.3);}
  .sidebar .brand{font-size:22px;padding:16px 0 22px;}
  .sidebar a{padding:14px 22px;font-size:15.5px;}
  .main{margin-left:0;padding:14px;}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1040;}
  .sidebar-overlay.show{display:block;}
  .topbar{flex-wrap:wrap;gap:10px;padding-bottom:12px;}
  .topbar h4{font-size:17px;}
  .topbar-logo{font-weight:700;color:var(--verde-osc);font-size:15px;}
  .card-kpi{padding:14px 16px;}
  .card-kpi h3{font-size:22px;}
  .panel{padding:16px;border-radius:12px;}
  .table-responsive{border-radius:10px;}
  .modal-dialog{margin:10px;}
  .login-card{padding:32px 22px;margin:16px;}
}
@media(max-width:576px){
  .table-compact td,.table-compact th{padding:5px 7px;font-size:12.5px;}
  .btn{font-size:14px;}
}

.portal-nav{background:linear-gradient(90deg,var(--verde-osc),var(--verde-suave));box-shadow:0 2px 10px rgba(0,0,0,.12);}
.portal-nav .container{flex-wrap:wrap;gap:8px;padding:10px 16px;}
.portal-wrap .panel{margin-bottom:18px;}
.portal-wrap h5{color:var(--verde-osc);font-weight:700;}
.portal-wrap h6{color:var(--verde-osc);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.4px;margin-bottom:14px;}
@media(max-width:576px){
  .portal-nav .navbar-brand{font-size:16px;}
  .portal-wrap{padding-left:10px!important;padding-right:10px!important;}
}

.table-compact td,.table-compact th{padding:6px 10px;font-size:13.5px;}
.table-compact .btn-sm{padding:.2rem .5rem;}

.ticket-card{border:1px solid var(--borde);border-radius:12px;margin-bottom:14px;overflow:hidden;}
.ticket-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 16px;background:var(--verde-claro);}
.ticket-head strong{color:var(--verde-osc);}
.ticket-body{padding:14px 16px;}
.ticket-msg{border-radius:10px;padding:10px 14px;margin-bottom:10px;background:#f4f6f5;}
.ticket-msg.staff{background:var(--verde-claro);border-left:3px solid var(--verde);}
.ticket-msg small{color:#8a9199;}

.privacy-gate{position:fixed;inset:0;background:rgba(20,40,24,.75);z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;}
.privacy-box{background:#fff;border-radius:16px;padding:28px;max-width:520px;box-shadow:0 20px 50px rgba(0,0,0,.3);}