*{box-sizing:border-box}
:root{
    --bg:#f4f7fb;
    --card:#ffffff;
    --text:#12233f;
    --muted:#71809a;
    --blue:#0869d8;
    --blue2:#19a7f4;
    --line:#dfe7f2;
    --danger:#b42318;
    --success:#067647;
}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text);
}
a{color:var(--blue);text-decoration:none}
.login-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        radial-gradient(circle at top right,#dff2ff 0,transparent 34%),
        radial-gradient(circle at bottom left,#e7efff 0,transparent 38%),
        var(--bg);
}
.login-card{
    width:100%;
    max-width:430px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:22px;
    padding:34px;
    box-shadow:0 20px 60px rgba(28,61,110,.12);
}
.login-logo{text-align:center;margin-bottom:28px}
.login-logo h1{font-size:34px;margin:12px 0 4px}
.login-logo h1 span,.brand span{color:var(--blue2)}
.login-logo p{margin:0;color:var(--muted)}
.ticket-icon{
    width:72px;height:58px;margin:auto;
    display:flex;align-items:center;justify-content:center;
    border-radius:16px;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    color:#fff;font-size:30px;font-weight:bold;
    box-shadow:0 12px 24px rgba(8,105,216,.22);
}
label{display:block;margin:17px 0 7px;font-weight:bold;font-size:14px}
input{
    width:100%;
    padding:13px 14px;
    border:1px solid #ccd7e5;
    border-radius:10px;
    outline:none;
    font-size:15px;
}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(8,105,216,.08)}
button{
    width:100%;
    border:0;
    margin-top:22px;
    padding:14px;
    border-radius:10px;
    background:linear-gradient(90deg,var(--blue),var(--blue2));
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}
.alert{padding:12px 14px;border-radius:10px;margin:14px 0;font-size:14px}
.alert.error{background:#fff1f0;color:var(--danger);border:1px solid #ffd6d2}
.alert.success{background:#ecfdf3;color:var(--success);border:1px solid #abefc6}
.login-note{text-align:center;color:var(--muted);font-size:12px;margin-top:18px}
.topbar{
    height:68px;
    padding:0 28px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.brand{font-size:24px;font-weight:800}
.userbox{display:flex;gap:18px;align-items:center;font-size:14px}
.app-shell{padding:28px}
.content{max-width:1250px;margin:auto}
.page-head h2{margin:0 0 6px;font-size:27px}
.page-head p{margin:0;color:var(--muted)}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:26px;
}
.stat-card,.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
}
.stat-card span,.stat-card small{color:var(--muted)}
.stat-card strong{display:block;font-size:34px;margin:10px 0 6px}
.panel{margin-top:22px}
.panel h3{margin-top:0}
@media(max-width:850px){
    .stats{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
    .stats{grid-template-columns:1fr}
    .topbar{padding:0 16px}
    .app-shell{padding:16px}
}

.main-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.main-nav a{font-size:14px;color:#41536f}.main-nav a:hover{color:var(--blue)}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.btn-auto{width:auto;padding:11px 18px;margin:0}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line);font-size:14px}th{color:var(--muted);font-size:12px;text-transform:uppercase;white-space:nowrap}.badge{display:inline-block;padding:5px 9px;border-radius:20px;font-size:12px;font-weight:bold}.badge.active{background:#ecfdf3;color:#067647}.badge.inactive{background:#f2f4f7;color:#667085}.mini{width:auto;margin:2px;padding:7px 10px;font-size:12px;background:#eef4fb;color:#24517e}.protected{font-size:12px;color:var(--muted)}
.modal{display:none;position:fixed;inset:0;background:rgba(12,28,50,.48);align-items:center;justify-content:center;padding:20px;z-index:50}.modal.show{display:flex}.modal-box{width:100%;max-width:620px;background:#fff;border-radius:18px;padding:26px;position:relative;max-height:90vh;overflow:auto}.modal-x{position:absolute;right:14px;top:10px;width:auto;margin:0;background:transparent;color:#55657c;font-size:28px;padding:4px 8px}select,textarea{width:100%;padding:13px 14px;border:1px solid #ccd7e5;border-radius:10px;font-size:15px;background:#fff}textarea{min-height:90px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.role-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.check{display:flex;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;margin:0}.check input{width:auto}.check span{display:flex;flex-direction:column;gap:3px}.check small{color:var(--muted)}
@media(max-width:1000px){.topbar{height:auto;min-height:68px;gap:14px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}.main-nav{order:3;width:100%;overflow:auto;flex-wrap:nowrap;padding-bottom:4px}.main-nav a{white-space:nowrap}}@media(max-width:600px){.form-grid,.permission-grid{grid-template-columns:1fr}.page-head,.role-head{align-items:flex-start;flex-direction:column}}


/* Marca e icono estándar */
.brand-link{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;white-space:nowrap}
.brand-link:hover{color:var(--text)}
.brand-icon{width:31px;height:31px;object-fit:contain;display:block;flex:0 0 31px}
.brand-text{font-size:24px;font-weight:800;line-height:1}
.brand-text>span{color:var(--blue2)}

/* Ajuste visual para SweetAlert2 */
.swal2-popup{font-family:Arial,Helvetica,sans-serif;border-radius:16px}
.swal2-confirm,.swal2-cancel{width:auto!important;margin:.3125em!important}
.swal2-confirm{background:linear-gradient(90deg,var(--blue),var(--blue2))!important}

/* =========================================================
   LOGIN CORPORATIVO - ESTÁNDAR VISUAL DYLIS / VENTAMAX
   ========================================================= */
.login-shell{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:24px;
    background:#eef5ff;
}
.login-shell::before,
.login-shell::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}
.login-shell::before{
    width:560px;
    height:560px;
    left:-265px;
    top:-245px;
    background:rgba(119,184,246,.17);
}
.login-shell::after{
    width:520px;
    height:520px;
    right:-260px;
    bottom:-280px;
    background:rgba(126,129,238,.11);
}
.login-card-ventamax{
    position:relative;
    z-index:2;
    width:100%;
    max-width:420px;
    padding:42px 40px 32px;
    border:0;
    border-radius:22px;
    background:#fff;
    box-shadow:0 14px 40px rgba(31,76,133,.09);
}
.login-product-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:4px;
}
.login-product-icon{
    width:72px;
    height:72px;
    object-fit:contain;
    display:block;
}
.login-product-name{
    font-size:34px;
    line-height:1;
    font-weight:800;
    color:#0a2e67;
    letter-spacing:-1.1px;
}
.login-product-name span{color:#19a7f4}
.login-security-text{
    text-align:center;
    color:#344054;
    font-size:12px;
    margin:8px 0 28px;
}
.login-field{
    position:relative;
    background:#edf4ff;
    border:1px solid #cfdef1;
    border-radius:12px;
    padding:10px 15px 8px;
    margin-bottom:16px;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.login-field:focus-within{
    border-color:#8bbcf2;
    box-shadow:0 0 0 3px rgba(29,143,241,.09);
    background:#f4f8ff;
}
.login-field label{
    display:block;
    margin:0 0 2px;
    color:#6a7d98;
    font-size:11px;
    font-weight:400;
    letter-spacing:.2px;
}
.login-field input{
    border:0;
    box-shadow:none;
    outline:0;
    background:transparent;
    padding:0;
    height:27px;
    font-size:15px;
    color:#101828;
}
.login-field input:focus{border:0;box-shadow:none}
.login-password-field{padding-right:52px}
.password-eye{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    width:34px!important;
    height:34px;
    margin:0!important;
    padding:7px!important;
    border:0;
    border-radius:50%;
    background:transparent!important;
    color:#7589a5;
    box-shadow:none!important;
}
.password-eye:hover{background:rgba(8,105,216,.07)!important;color:#0869d8}
.password-eye svg{display:block;width:19px;height:19px;fill:currentColor}
.login-options{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:1px 0 28px;
    font-size:12px;
}
.login-options a{font-size:12px;color:#0877e7}
.remember-option{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0;
    color:#43536a;
    font-weight:400;
    cursor:pointer;
}
.remember-option input{
    width:17px;
    height:17px;
    margin:0;
    padding:0;
    accent-color:#168cf2;
}
.login-submit{
    width:100%;
    margin:0;
    padding:15px 16px;
    border-radius:10px;
    background:#218cf2;
    box-shadow:none;
    font-size:16px;
}
.login-submit:hover{background:#147fe5}
.login-corporate{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    margin-top:24px;
    color:#667085;
    font-size:11px;
    text-align:center;
}
.login-corporate strong{color:#168cf2;font-weight:500}
.dylis-logo{
    width:145px;
    height:38px;
    margin-bottom:2px;
    background-image:url('../img/dylis_systems_srl.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:205% auto;
}
@media(max-width:520px){
    .login-shell{padding:16px}
    .login-card-ventamax{padding:32px 24px 26px;border-radius:18px}
    .login-product-icon{width:62px;height:62px}
    .login-product-name{font-size:30px}
    .login-options{align-items:flex-start}
}

/* =========================================================
   HOTFIX 2.0.4 - IDENTIDAD VISUAL CORREGIDA
   Favicon: solo pestaña. TicketMax: login. Dylis SRL: navbar.
   ========================================================= */
.company-brand{
    display:flex;
    align-items:center;
    width:178px;
    min-width:178px;
    height:54px;
    overflow:hidden;
    text-decoration:none;
}
.company-brand img{
    display:block;
    width:170px;
    height:48px;
    object-fit:contain;
    object-position:left center;
}
.login-product-brand-logo{
    display:block;
    text-align:center;
    margin:0 auto 2px;
}
.ticketmax-login-logo{
    display:block;
    width:min(100%,320px);
    height:auto;
    max-height:112px;
    object-fit:contain;
    margin:0 auto;
}
.login-corporate-text{
    margin-top:24px;
}
/* Se anulan los elementos visuales anteriores que ya no se usan. */
.brand-icon,.brand-text,.login-product-icon,.login-product-name,.dylis-logo{display:none!important}
@media(max-width:1000px){
    .company-brand{width:160px;min-width:160px}
    .company-brand img{width:154px;height:44px}
}
@media(max-width:520px){
    .ticketmax-login-logo{width:min(100%,285px);max-height:100px}
    .company-brand{width:145px;min-width:145px}
    .company-brand img{width:140px;height:42px}
}


/* =========================================================
   ETAPA 3 - REQUERIMIENTOS
   ========================================================= */
.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.panel-title h3{margin:0 0 5px}.panel-title p{margin:0 0 15px;color:var(--muted);font-size:13px}
.filter-panel{margin-top:24px}.filter-grid{display:grid;grid-template-columns:repeat(6,minmax(130px,1fr));gap:12px;align-items:end}.filter-grid label{margin-top:0}.filter-actions{display:flex;gap:15px;align-items:center;margin-top:15px}.btn-link{display:inline-flex;align-items:center;color:var(--blue);font-weight:600;font-size:13px}.inline-btn{display:inline-block;text-decoration:none}.empty-cell{text-align:center!important;color:var(--muted);padding:30px!important}.req-number{font-weight:800;white-space:nowrap}.private-dot{display:block;width:max-content;margin-top:5px;padding:2px 6px;border-radius:6px;background:#fff4e5;color:#9a5b00;font-size:10px;font-weight:bold}.title-cell{min-width:200px}.title-cell small{display:block;margin-top:4px;color:var(--muted)}.priority{display:inline-block;border-radius:20px;padding:5px 9px;font-size:11px;font-weight:800}.p-baja{background:#f2f4f7;color:#475467}.p-normal{background:#eaf4ff;color:#175cd3}.p-alta{background:#fff6e8;color:#b54708}.p-urgente{background:#fff0f0;color:#b42318}.status-chip{display:inline-block;padding:5px 9px;border-radius:20px;background:#eef4fb;color:#315f8f;font-size:11px;font-weight:700;white-space:nowrap}.modal-lg{max-width:760px}.field-help{margin-top:5px;color:var(--muted);font-size:11px}.simple-check{margin-top:15px}.req-detail-head{align-items:flex-start}.req-kicker{color:var(--blue);font-weight:800;margin-bottom:5px}.back-link{padding-top:8px}.req-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:20px;margin-top:24px}.req-main,.req-side{display:flex;flex-direction:column;gap:20px}.req-main .panel,.req-side .panel{margin-top:0}.req-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.req-meta-grid div{padding:12px;border:1px solid var(--line);border-radius:10px}.req-meta-grid span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.req-meta-grid strong{font-size:13px}.req-description{margin-top:22px}.req-description h3{margin-bottom:8px}.req-description p{line-height:1.65;color:#344054}.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.image-card{display:flex;flex-direction:column;gap:7px;color:#344054;font-size:11px}.image-card img{width:100%;height:150px;object-fit:cover;border:1px solid var(--line);border-radius:10px}.image-card span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.secondary-btn{background:#eef4fb;color:#24517e}.timeline{position:relative}.timeline-item{position:relative;display:grid;grid-template-columns:14px 1fr;gap:10px;padding-bottom:18px}.timeline-item:not(:last-child):before{content:"";position:absolute;left:5px;top:12px;bottom:0;width:1px;background:#dbe5f1}.timeline-dot{width:11px;height:11px;margin-top:4px;border-radius:50%;background:#1f8ff2;z-index:1}.timeline-item strong{display:block;font-size:13px}.timeline-item small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.timeline-item p{font-size:11px;margin:5px 0 0;color:#475467;line-height:1.4}
@media(max-width:1150px){.filter-grid{grid-template-columns:repeat(3,1fr)}.catalog-grid{grid-template-columns:1fr}.req-layout{grid-template-columns:1fr}.req-meta-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.filter-grid,.req-meta-grid{grid-template-columns:1fr}.image-grid{grid-template-columns:1fr 1fr}.req-detail-head{flex-direction:column}.modal-lg{max-width:100%}}


/* =========================================================
   HOTFIX 3.0.1 - MODAL NUEVO REQUERIMIENTO
   Línea visual compacta tipo VentaMax, sin scroll interno.
   ========================================================= */
.req-modal-box{
    max-width:940px;
    padding:0;
    border-radius:16px;
    overflow:visible;
    max-height:none;
    box-shadow:0 22px 65px rgba(17,47,86,.22);
}
.req-modal-head{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:17px 24px 16px;
    border-radius:16px 16px 0 0;
    color:#fff;
    background:
        radial-gradient(circle at 92% 18%,rgba(255,255,255,.16) 0 46px,transparent 47px),
        linear-gradient(135deg,#075ca9 0%,#0876cf 54%,#1b9bec 100%);
}
.req-modal-head h3{
    margin:0 0 3px;
    color:#fff;
    font-size:19px;
    line-height:1.2;
}
.req-modal-head p{
    margin:0;
    color:rgba(255,255,255,.86);
    font-size:11px;
}
.req-modal-close{
    flex:0 0 auto;
    width:30px!important;
    height:30px;
    margin:-3px -5px 0 0!important;
    padding:0!important;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.13)!important;
    color:#fff;
    font-size:23px;
    font-weight:300;
    line-height:1;
    box-shadow:none!important;
}
.req-modal-close:hover{background:rgba(255,255,255,.23)!important}
.req-modal-body{
    padding:17px 22px 14px;
    background:#fff;
}
.req-form-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:10px 12px;
    align-items:start;
}
.req-col-4{grid-column:span 4}
.req-col-6{grid-column:span 6}
.req-col-8{grid-column:span 8}
.req-col-12{grid-column:1/-1}
.req-form-grid label{
    margin:0 0 4px;
    color:#344054;
    font-size:11px;
    font-weight:700;
}
.req-form-grid input:not([type="checkbox"]):not([type="file"]),
.req-form-grid select,
.req-form-grid textarea{
    width:100%;
    border:1px solid #d0dceb;
    border-radius:8px;
    background:#fff;
    color:#172b4d;
    font-size:13px;
    box-shadow:none;
}
.req-form-grid input:not([type="checkbox"]):not([type="file"]),
.req-form-grid select{
    min-height:36px;
    padding:7px 10px;
}
.req-form-grid textarea{
    min-height:94px;
    height:94px;
    padding:9px 10px;
    resize:none;
}
.req-form-grid input:focus,
.req-form-grid select:focus,
.req-form-grid textarea:focus{
    border-color:#69a9e5;
    outline:0;
    box-shadow:0 0 0 3px rgba(30,132,224,.08);
}
.req-upload-box{
    min-height:94px;
    padding:10px;
    border:1px solid #dbe4ef;
    border-radius:9px;
    background:#f8fbff;
}
.req-upload-box input[type="file"]{
    width:100%;
    padding:6px;
    border:1px dashed #bfd0e4;
    border-radius:7px;
    background:#fff;
    font-size:11px;
}
.req-visibility-box{
    padding-top:0;
}
.req-check{
    min-height:58px;
    display:flex!important;
    align-items:flex-start;
    gap:9px;
    margin:0!important;
    padding:9px 10px;
    border:1px solid #dbe4ef;
    border-radius:9px;
    background:#f8fbff;
    cursor:pointer;
}
.req-check input{
    width:16px;
    height:16px;
    margin:2px 0 0;
    padding:0;
    flex:0 0 16px;
}
.req-check span{display:flex;flex-direction:column;gap:2px}
.req-check b{font-size:11px;color:#344054}
.req-check small{font-size:9px;line-height:1.3;color:#718096;font-weight:400}
.req-disabled{
    background:#f2f4f7!important;
    color:#667085!important;
    cursor:not-allowed;
}
.req-modal-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    padding:12px 22px 14px;
    border-top:1px solid #e6edf5;
    border-radius:0 0 16px 16px;
    background:#f8fafc;
}
.req-modal-footer button{
    width:auto;
    min-width:112px;
    margin:0;
    padding:9px 15px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
}
.btn-cancel{
    background:#fff!important;
    color:#475467!important;
    border:1px solid #cfd8e4!important;
}
.btn-cancel:hover{background:#f2f4f7!important}
.btn-save{
    background:linear-gradient(90deg,#0869d8,#169bef)!important;
    color:#fff!important;
}
@media(max-width:800px){
    .req-modal-box{max-width:96vw}
    .req-col-4,.req-col-6,.req-col-8{grid-column:span 12}
    .req-modal-body{padding:14px}
    .req-form-grid textarea{height:82px;min-height:82px}
}


/* =========================================================
   HOTFIX 3.0.2 - ESTÁNDAR DE MODALES TIPO VENTAMAX
   Empresas, Proyectos, Usuarios, Roles, Permisos y Catálogos.
   ========================================================= */
.vm-modal-box{
    width:100%;
    padding:0!important;
    border-radius:14px!important;
    overflow:visible!important;
    max-height:none!important;
    background:#fff;
    box-shadow:0 22px 65px rgba(17,47,86,.22);
}
.vm-modal-sm{max-width:720px!important}
.vm-modal-md{max-width:820px!important}
.vm-modal-lg{max-width:930px!important}
.vm-modal-xl{max-width:980px!important}

.vm-modal-head{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:17px 24px 16px;
    border-radius:14px 14px 0 0;
    color:#fff;
    background:
        radial-gradient(circle at 91% 12%,rgba(255,255,255,.15) 0 46px,transparent 47px),
        linear-gradient(135deg,#075ca9 0%,#0876cf 54%,#1b9bec 100%);
}
.vm-modal-head h3{
    margin:0 0 3px!important;
    color:#fff;
    font-size:18px;
    line-height:1.2;
}
.vm-modal-head p{
    margin:0;
    color:rgba(255,255,255,.86);
    font-size:11px;
    line-height:1.35;
}
.vm-modal-close{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px!important;
    height:30px;
    min-width:30px!important;
    margin:-3px -5px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:rgba(255,255,255,.13)!important;
    color:#fff!important;
    font-size:23px!important;
    font-weight:300!important;
    line-height:1!important;
    box-shadow:none!important;
}
.vm-modal-close:hover{background:rgba(255,255,255,.24)!important}

.vm-modal-body{
    padding:18px 22px 16px;
    background:#fff;
}
.vm-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:11px 13px;
    align-items:start;
}
.vm-col-3{grid-column:span 3}
.vm-col-4{grid-column:span 4}
.vm-col-5{grid-column:span 5}
.vm-col-6{grid-column:span 6}
.vm-col-7{grid-column:span 7}
.vm-col-8{grid-column:span 8}
.vm-col-12{grid-column:1/-1}

.vm-form label{
    display:block;
    margin:0 0 4px;
    color:#344054;
    font-size:11px;
    font-weight:700;
}
.vm-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.vm-form select,
.vm-form textarea{
    width:100%;
    border:1px solid #d0dceb;
    border-radius:8px;
    background:#fff;
    color:#172b4d;
    font-size:13px;
    box-shadow:none;
}
.vm-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.vm-form select{
    min-height:36px;
    padding:7px 10px;
}
.vm-form textarea{
    min-height:76px;
    height:76px;
    padding:9px 10px;
    resize:none;
}
.vm-form input:focus,
.vm-form select:focus,
.vm-form textarea:focus{
    border-color:#69a9e5;
    outline:0;
    box-shadow:0 0 0 3px rgba(30,132,224,.08);
}
.vm-form input[readonly],
.vm-form input:disabled,
.vm-form select:disabled{
    background:#f2f4f7;
    color:#667085;
}

.vm-modal-footer{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    padding:12px 22px 14px;
    border-top:1px solid #e6edf5;
    border-radius:0 0 14px 14px;
    background:#f8fafc;
}
.vm-modal-footer button{
    width:auto!important;
    min-width:112px;
    margin:0!important;
    padding:9px 15px!important;
    border-radius:8px!important;
    font-size:12px!important;
    font-weight:700!important;
}
.vm-modal-footer .btn-cancel{
    background:#fff!important;
    color:#475467!important;
    border:1px solid #cfd8e4!important;
}
.vm-modal-footer .btn-cancel:hover{background:#f2f4f7!important}
.vm-modal-footer .btn-save{
    border:0!important;
    background:linear-gradient(90deg,#0869d8,#169bef)!important;
    color:#fff!important;
}

.roles-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:22px;
}
.vm-role-card{
    margin-top:0!important;
}
.vm-role-card .role-head h3{margin:0 0 5px}
.vm-role-card .role-head p{margin:0;color:var(--muted);font-size:12px}
.vm-role-actions{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:15px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.vm-permission-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}
.vm-permission-item{
    display:flex!important;
    align-items:flex-start;
    gap:9px;
    min-height:64px;
    margin:0!important;
    padding:11px 12px;
    border:1px solid #dbe4ef;
    border-radius:9px;
    background:#f9fbfd;
    cursor:pointer;
}
.vm-permission-item:hover{
    border-color:#a9cbea;
    background:#f5faff;
}
.vm-permission-item input{
    width:16px!important;
    height:16px;
    flex:0 0 16px;
    margin:2px 0 0!important;
    padding:0!important;
}
.vm-permission-item span{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.vm-permission-item b{
    color:#344054;
    font-size:11px;
}
.vm-permission-item small{
    color:#718096;
    font-size:9px;
    line-height:1.35;
}

@media(max-width:900px){
    .roles-grid{grid-template-columns:1fr}
    .vm-permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
    .modal{padding:10px}
    .vm-col-3,.vm-col-4,.vm-col-5,.vm-col-6,.vm-col-7,.vm-col-8{grid-column:span 12}
    .vm-modal-body{padding:14px}
    .vm-modal-head{padding:15px 17px}
    .vm-modal-footer{padding:11px 14px 13px}
    .vm-permission-grid{grid-template-columns:1fr}
}


/* =========================================================
   ETAPA 4 - CONVERSACION Y NOTIFICACIONES
   ========================================================= */
.conversation-panel{padding:0!important;overflow:hidden}
.conversation-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding:19px 22px 14px;
    border-bottom:1px solid var(--line);
}
.conversation-head h3{margin:0 0 4px}
.conversation-head p{margin:0;color:var(--muted);font-size:12px}
.conversation-count{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:5px 9px;
    border-radius:20px;
    background:#eef6ff;
    color:#1767a8;
    font-size:11px;
    font-weight:700;
}
.conversation-list{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:18px 22px;
    background:#f8fafc;
    border-bottom:1px solid var(--line);
}
.conversation-empty{
    padding:20px;
    text-align:center;
    color:#7a889e;
    font-size:12px;
}
.comment-row{display:flex;justify-content:flex-start}
.comment-row.own{justify-content:flex-end}
.comment-card{
    width:min(82%,680px);
    padding:11px 13px;
    border:1px solid #dbe5f0;
    border-radius:12px;
    background:#fff;
    box-shadow:0 4px 12px rgba(38,64,96,.04);
}
.comment-row.own .comment-card{
    background:#eef7ff;
    border-color:#cae3f8;
}
.comment-card.internal-comment{
    background:#fff8e8;
    border-color:#f4d995;
}
.comment-meta{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:6px;
}
.comment-meta strong{font-size:11px;color:#23395b}
.comment-meta span{font-size:9px;color:#8290a6}
.internal-badge{
    display:inline-flex;
    align-items:center;
    padding:3px 6px;
    border-radius:10px;
    background:#fff0c2;
    color:#9a6700!important;
    font-weight:700;
}
.comment-text{
    color:#344054;
    font-size:13px;
    line-height:1.55;
    word-break:break-word;
}
.comment-form{padding:17px 22px 19px}
.comment-form label{
    display:block;
    margin:0 0 5px;
    color:#344054;
    font-size:11px;
    font-weight:700;
}
.comment-form textarea{
    width:100%;
    min-height:96px;
    resize:vertical;
    padding:10px 11px;
    border:1px solid #d0dceb;
    border-radius:9px;
    font-size:13px;
}
.comment-form textarea:focus{
    border-color:#69a9e5;
    outline:0;
    box-shadow:0 0 0 3px rgba(30,132,224,.08);
}
.comment-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:10px;
}
.internal-check{
    display:flex!important;
    align-items:flex-start;
    gap:8px;
    margin:0!important;
    cursor:pointer;
}
.internal-check input{
    width:16px;
    height:16px;
    margin:1px 0 0;
    padding:0;
}
.internal-check span{
    display:flex;
    flex-direction:column;
    gap:1px;
}
.internal-check b{font-size:10px;color:#344054}
.internal-check small{font-size:9px;color:#7a889e;font-weight:400}
.mail-status-panel small{
    display:block;
    margin-top:7px;
    color:#7a889e;
    font-size:10px;
    word-break:break-word;
}
.mail-status-panel p{
    margin:9px 0 0;
    color:#7a4b00;
    font-size:10px;
    line-height:1.4;
}
.mail-state{
    display:inline-flex;
    padding:5px 8px;
    border-radius:16px;
    font-size:10px;
    font-weight:700;
}
.mail-ok{background:#ecfdf3;color:#067647}
.mail-fail{background:#fff1f0;color:#b42318}
.mail-skip{background:#f2f4f7;color:#667085}
.mail-pend{background:#fff8e8;color:#9a6700}

@media(max-width:650px){
    .comment-card{width:100%}
    .comment-actions{align-items:flex-start;flex-direction:column}
    .comment-actions .btn-auto{width:100%}
}

.req-final-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.req-final-actions .btn-auto{margin:0}


/* =========================================================
   ETAPA 5 - DASHBOARD Y BANDEJA OPERATIVA
   ========================================================= */
.head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.dashboard-v5 .dashboard-head{margin-bottom:4px}

.dash-stats{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-top:22px;
}
.dash-card{
    position:relative;
    min-height:128px;
    padding:17px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
    color:var(--text);
    overflow:hidden;
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.dash-card:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 24px rgba(38,64,96,.08);
    border-color:#cbd9ea;
    color:var(--text);
}
.dash-card::after{
    content:"";
    position:absolute;
    right:-18px;
    bottom:-26px;
    width:78px;
    height:78px;
    border-radius:50%;
    background:#f3f7fc;
}
.dash-card.status-pend::after{background:#fff4d9}
.dash-card.status-revision::after{background:#eaf3ff}
.dash-card.status-proceso::after{background:#e7f8ff}
.dash-card.status-espera::after{background:#fff2e3}
.dash-card.status-final::after{background:#e8f8ef}
.dash-label{
    display:block;
    color:#697a93;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.35px;
}
.dash-card strong{
    display:block;
    position:relative;
    z-index:1;
    margin:9px 0 5px;
    font-size:30px;
    color:#172b4d;
}
.dash-card small{
    position:relative;
    z-index:1;
    display:block;
    color:#7a889e;
    font-size:10px;
    line-height:1.35;
}

.urgent-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:14px;
    padding:13px 17px;
    border:1px solid #f1c7c2;
    border-radius:12px;
    background:#fff5f4;
    color:#8f241b;
}
.urgent-banner:hover{color:#8f241b;background:#fff0ef}
.urgent-banner strong{display:block;font-size:12px}
.urgent-banner span{font-size:10px}
.urgent-arrow{font-weight:700;white-space:nowrap}

.dash-columns{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);
    gap:18px;
    margin-top:20px;
}
.dash-panel{margin-top:0!important;padding:0!important;overflow:hidden}
.panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.dash-panel .panel-title{padding:18px 20px 13px;border-bottom:1px solid var(--line)}
.dash-panel .panel-title h3{margin:0 0 3px;font-size:16px}
.dash-panel .panel-title p{margin:0;color:var(--muted);font-size:10px}
.dash-panel .panel-title a{font-size:10px;font-weight:700;white-space:nowrap}

.dash-ticket-list{display:flex;flex-direction:column}
.dash-ticket{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:13px 20px;
    border-bottom:1px solid #edf1f6;
    color:var(--text);
}
.dash-ticket:last-child{border-bottom:0}
.dash-ticket:hover{background:#f8fbff;color:var(--text)}
.dash-ticket-main{min-width:0}
.dash-ticket-main>strong{
    display:block;
    margin:4px 0;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dash-ticket-main>small{
    display:block;
    color:#7a889e;
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.dash-ticket-top{display:flex;align-items:center;gap:8px}
.dash-ticket-top .req-number{font-size:10px}
.dash-ticket-top .priority{font-size:8px;padding:3px 6px}
.dash-ticket-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    flex:0 0 auto;
}
.dash-ticket-side small{color:#8a98ad;font-size:9px}
.empty-dash{padding:30px 20px;text-align:center;color:#7a889e;font-size:11px}

.priority-summary{padding:7px 20px 2px}
.priority-row{display:block;padding:11px 0;border-bottom:1px solid #edf1f6;color:var(--text)}
.priority-row:last-child{border-bottom:0}
.priority-row-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.priority-row-head strong{font-size:12px;color:#344054}
.priority-bar{height:5px;margin-top:7px;border-radius:5px;background:#edf2f7;overflow:hidden}
.priority-bar span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#438fe0,#21a5ee)}
.open-total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:10px 20px 18px;
    padding:12px 13px;
    border-radius:10px;
    background:#f5f8fc;
}
.open-total span{font-size:10px;color:#697a93}
.open-total strong{font-size:19px;color:#172b4d}

.req-summary-strip{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    margin-top:20px;
}
.req-summary-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#fff;
    color:#4c5f79;
    font-size:10px;
    font-weight:700;
}
.req-summary-card strong{font-size:18px;color:#172b4d}
.req-summary-card:hover,.req-summary-card.selected{
    border-color:#a9c9eb;
    background:#f7fbff;
    color:#24517e;
}

.req-filter-v5{padding:17px 19px!important}
.filter-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    margin-bottom:12px;
}
.filter-head h3{margin:0 0 3px;font-size:14px}
.filter-head p{margin:0;color:var(--muted);font-size:9px}
.result-count{
    display:inline-flex;
    padding:5px 8px;
    border-radius:14px;
    background:#eef4fb;
    color:#456783;
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
}
.req-table-panel{padding-top:10px!important}
.req-table-v5 th,.req-table-v5 td{padding-top:11px;padding-bottom:11px}
.req-table-v5 .title-cell{max-width:260px}

.status-chip{
    display:inline-flex;
    align-items:center;
    padding:5px 8px;
    border-radius:14px;
    background:#eef4fb;
    color:#456783;
    font-size:9px;
    font-weight:700;
    white-space:nowrap;
}
.status-pend{background:#fff5d9!important;color:#916900!important}
.status-revision{background:#edf4ff!important;color:#2c67a4!important}
.status-proceso{background:#e8f8ff!important;color:#08769f!important}
.status-espera{background:#fff0df!important;color:#a45a11!important}
.status-final{background:#eaf8ef!important;color:#087443!important}
.status-nviable,.status-cancela{background:#fff0ef!important;color:#a2372d!important}

@media(max-width:1100px){
    .dash-stats{grid-template-columns:repeat(3,1fr)}
    .dash-columns{grid-template-columns:1fr}
    .req-summary-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
    .dash-stats{grid-template-columns:repeat(2,1fr)}
    .req-summary-strip{grid-template-columns:repeat(2,1fr)}
    .dash-ticket{align-items:flex-start}
    .dash-ticket-side{align-items:flex-end}
    .head-actions{width:100%}
    .head-actions .btn-auto,.head-actions .btn-link{flex:1;text-align:center}
    .urgent-banner{align-items:flex-start;flex-direction:column}
    .req-summary-card:last-child{grid-column:1/-1}
}


/* =========================================================
   ETAPA 6 - SEGURIDAD / SESIONES / AUDITORIA
   ========================================================= */
.active-count{display:inline-flex;padding:7px 10px;border-radius:18px;background:#eaf8ef;color:#087443;font-size:10px;font-weight:700}
.subcell{display:block;margin-top:3px;color:#8492a6;font-size:9px}.agent-cell{max-width:260px;font-size:9px;color:#65758b;white-space:normal;line-height:1.35}.danger-mini{background:#fff4f2!important;color:#b42318!important;border-color:#f0c6c0!important}.audit-action{display:inline-flex;padding:4px 7px;border-radius:12px;background:#eef4fb;color:#426887;font-size:9px;font-weight:700}.audit-detail{max-width:320px;white-space:normal;line-height:1.35}.audit-filter{padding:17px 19px!important}.password-back{text-align:center;margin-top:14px}.password-back a{font-size:10px}


/* =========================================================
   ETAPA 7 - ESTABILIZACIÓN, NAVEGACIÓN Y RESPONSIVE FINAL
   ========================================================= */
.main-nav a.active,.userbox a.active{
    color:var(--blue);
    font-weight:700;
}
.main-nav a.active{
    position:relative;
}
.main-nav a.active::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-8px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--blue),var(--blue2));
}
.nav-toggle{
    display:none;
    width:42px!important;
    height:40px;
    margin:0!important;
    padding:10px!important;
    border:1px solid var(--line);
    border-radius:10px;
    background:#f7faff!important;
    box-shadow:none!important;
}
.nav-toggle span{
    display:block;
    width:100%;
    height:2px;
    margin:4px 0;
    border-radius:3px;
    background:#31516f;
    transition:transform .18s ease,opacity .18s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:3px solid rgba(8,105,216,.22);
    outline-offset:2px;
}
.table-wrap{-webkit-overflow-scrolling:touch}
.req-description p,.comment-text,.timeline-item p{overflow-wrap:anywhere;word-break:break-word}
.image-card img{background:#f7f9fc}

@media(max-width:900px){
    .topbar{
        display:grid;
        grid-template-columns:1fr auto auto;
        height:auto;
        min-height:68px;
        gap:10px 12px;
        padding:11px 18px;
    }
    .company-brand{min-width:0}
    .company-brand img{max-width:150px;height:auto}
    .nav-toggle{display:block}
    .userbox{gap:11px;font-size:12px;white-space:nowrap}
    .user-name{display:none}
    .main-nav{
        display:none;
        grid-column:1/-1;
        order:initial;
        width:100%;
        max-height:55vh;
        overflow:auto;
        flex-direction:column;
        align-items:stretch;
        gap:3px;
        padding:8px 0 2px;
        border-top:1px solid var(--line);
    }
    .main-nav.open{display:flex}
    .main-nav a{
        padding:10px 12px;
        border-radius:8px;
        white-space:normal;
        font-size:13px;
    }
    .main-nav a:hover,.main-nav a.active{background:#f1f7ff}
    .main-nav a.active::after{display:none}
}

@media(max-width:650px){
    .app-shell{padding:14px}
    .content{width:100%}
    .page-head h2{font-size:23px}
    .page-head p{font-size:12px;line-height:1.45}
    .panel{padding:16px;border-radius:13px}
    .table-wrap{margin-left:-2px;margin-right:-2px}
    th,td{font-size:12px;padding:10px 8px}
    th{font-size:10px}
    .dash-card{min-height:112px;padding:14px}
    .dash-card strong{font-size:26px}
    .dash-card small{font-size:9px}
    .dash-ticket{padding:12px 14px;gap:10px}
    .dash-ticket-side{min-width:92px}
    .conversation-panel{padding:16px!important}
    .comment-card{max-width:94%!important}
    .comment-actions{align-items:stretch!important;flex-direction:column!important}
    .comment-actions .btn-auto{width:100%}
    .req-final-actions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
    .req-final-actions button{width:100%!important}
    .image-grid{grid-template-columns:1fr}
    .image-card img{height:auto;max-height:320px;object-fit:contain}
}

@media(max-width:430px){
    .topbar{grid-template-columns:1fr auto;padding:10px 13px}
    .nav-toggle{grid-column:2;grid-row:1}
    .userbox{grid-column:1/-1;grid-row:2;justify-content:flex-end;border-top:1px solid #edf1f6;padding-top:8px}
    .main-nav{grid-row:3}
    .dash-stats{grid-template-columns:1fr 1fr;gap:8px}
    .req-summary-strip{grid-template-columns:1fr 1fr;gap:8px}
}