body{background:#f4f7f5}.navbar-pnp{background:#005c36}.brand-gold{color:#d8b54a!important}.sidebar-card{border-left:5px solid #006b3c}.btn-pnp{background:#006b3c;color:#fff}.btn-pnp:hover{background:#004f2d;color:#fff}.table thead th{background:#e9f3ee}.stat{border-top:4px solid #d4af37}.login-wrap{min-height:100vh;background:linear-gradient(135deg,#004c2c,#08764a);display:flex;align-items:center}.badge-soft{background:#e8f3ed;color:#005c36}.small-muted{font-size:.85rem;color:#6c757d}@media(max-width:768px){.table-responsive{font-size:.88rem}.navbar-brand{font-size:1rem}}
/* V2 - Dashboard y Directorio */
.btn-outline-pnp{color:#006b3c;border-color:#006b3c}.btn-outline-pnp:hover{background:#006b3c;color:#fff}.stat-card{border:0;border-top:4px solid #d4af37}.stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex:0 0 46px}.chart-box{position:relative;min-height:330px}.chart-box-lg{min-height:460px}.directory-table thead{position:sticky;top:0;z-index:2}.directory-table td{vertical-align:middle}
@media(max-width:768px){.chart-box,.chart-box-lg{min-height:300px}.stat-icon{width:40px;height:40px;flex-basis:40px}.directory-table{font-size:.8rem}}
@media print{.navbar,.no-print,.alert{display:none!important}body{background:#fff}.container-fluid{padding:0!important}.directory-table{overflow:visible!important}.directory-table table{font-size:9px}.directory-table th,.directory-table td{padding:3px!important}.badge{border:1px solid #999;color:#000!important;background:#fff!important}}


/* V8.1 - Capa responsive global PNP
   Optimiza escritorio, laptops, tablets y celulares sin modificar la logica del sistema. */
html{overflow-x:hidden}
body{min-width:0;overflow-x:hidden}
main.container-fluid{min-width:0;max-width:100%;transition:margin-left .2s ease,width .2s ease,padding .2s ease}
main.container-fluid>.row{min-width:0}
.card{min-width:0}
.card-body{min-width:0}
.table-responsive{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table-responsive>.table{margin-bottom:0}
.pnp-table-scroll{overscroll-behavior-inline:contain}
.table th,.table td{vertical-align:middle}
.table th{white-space:nowrap}
img,svg,canvas{max-width:100%}
.form-control,.form-select,.input-group{max-width:100%}
textarea.form-control{min-height:88px;resize:vertical}
.modal-dialog{max-width:min(96vw,var(--bs-modal-width,500px))}

/* Cabeceras y barras de acciones: que nunca desborden en laptops/celulares */
main .d-flex.justify-content-between,
main .d-flex.align-items-center.justify-content-between{min-width:0}
main h1,main h2,main h3,main h4,main h5{overflow-wrap:anywhere}

/* Tarjetas de indicadores más fluidas */
.stat-card .card-body{padding:clamp(.72rem,1.2vw,1rem)}
.stat-card .fs-3{font-size:clamp(1.45rem,2vw,1.85rem)!important}
.stat-card .small-muted,.stat-card .small{line-height:1.25}

/* Laptop grande / monitor mediano */
@media (max-width:1499.98px) and (min-width:1200px){
 body>main.container-fluid{padding-left:1rem!important;padding-right:1rem!important}
 .card-body{padding:.9rem}
 .table{font-size:.92rem}
 .table>:not(caption)>*>*{padding:.55rem .55rem}
 .stat-icon{width:40px;height:40px;flex-basis:40px;font-size:1.1rem}
}

/* Laptop pequeña y tablet horizontal: el menú pasa arriba y se libera todo el ancho */
@media (max-width:1199.98px){
 body>main.container-fluid{margin-left:0!important;width:100%!important;padding:.85rem!important}
 main.container-fluid.py-4{padding-top:1rem!important;padding-bottom:1.25rem!important}
 .navbar-pnp{box-shadow:0 2px 10px rgba(0,0,0,.16)}
 .navbar-pnp .navbar-collapse{max-height:calc(100vh - 64px);overflow-y:auto}
 .responsive-master-detail>.col-xl-4,
 .responsive-master-detail>.col-xl-8{width:100%}
 .responsive-master-detail>.col-xl-4 .card{height:auto!important}
 .responsive-master-detail>.col-xl-8{margin-top:.15rem}
 .table{font-size:.9rem}
}

/* Tablet */
@media (max-width:991.98px){
 .card-header,.card-body{padding:.85rem}
 .row{--bs-gutter-x:1rem}
 .btn{white-space:normal}
 .d-flex.gap-2{row-gap:.5rem!important;flex-wrap:wrap}
 .chart-box,.chart-box-lg{min-height:280px}
}

/* Celular */
@media (max-width:767.98px){
 body>main.container-fluid{padding:.65rem!important}
 main.container-fluid.py-4{padding-top:.75rem!important}
 .navbar-pnp .navbar-brand{font-size:.9rem;line-height:1.15;padding:.7rem .75rem}
 .navbar-pnp .navbar-toggler{margin:.45rem .6rem;padding:.3rem .48rem}
 .navbar-pnp .navbar-collapse{padding:.45rem .55rem .7rem;max-height:calc(100vh - 58px)}
 .navbar-pnp .navbar-nav .nav-link.pnp-nav-btn{padding:.58rem .68rem}
 .pnp-user-chip{font-size:.76rem}
 h3{font-size:1.35rem}
 h4{font-size:1.2rem}
 h5{font-size:1.08rem}
 .card{border-radius:.62rem}
 .card-body,.card-header{padding:.75rem}
 .alert{padding:.7rem .8rem}
 .form-label{margin-bottom:.3rem}
 .form-control,.form-select,.btn{min-height:42px}
 .input-group>.btn{min-height:auto}
 .table-responsive{border-radius:.45rem}
 .table{font-size:.82rem;min-width:max-content}
 .table>:not(caption)>*>*{padding:.48rem .5rem}
 .stat-card .card-body{gap:.62rem!important}
 .stat-card .fs-3{font-size:1.42rem!important}
 .stat-icon{width:38px;height:38px;flex-basis:38px;font-size:1rem;border-radius:10px}
 .small-muted{font-size:.78rem}
 .modal-dialog{margin:.5rem;max-width:calc(100vw - 1rem)}
 .modal-content{max-height:calc(100vh - 1rem);overflow:auto}
 /* Cabeceras de página: título arriba, acciones debajo */
 main>.d-flex.flex-wrap.align-items-center.justify-content-between,
 main .d-flex.flex-wrap.align-items-center.justify-content-between{align-items:flex-start!important}
 main .d-flex.flex-wrap.align-items-center.justify-content-between>.d-flex{width:100%}
 main .d-flex.flex-wrap.align-items-center.justify-content-between>.d-flex>.btn,
 main .d-flex.flex-wrap.align-items-center.justify-content-between>.d-flex>a.btn{flex:1 1 150px}
}

/* Celular pequeño */
@media (max-width:575.98px){
 body>main.container-fluid{padding:.5rem!important}
 .row{--bs-gutter-x:.75rem;--bs-gutter-y:.75rem}
 .card-body,.card-header{padding:.68rem}
 .alert{font-size:.85rem}
 .btn{font-size:.88rem}
 .form-control,.form-select{font-size:16px} /* evita zoom automatico en iOS */
 .stat-card .card-body{padding:.62rem;align-items:flex-start!important}
 .stat-card .small{font-size:.74rem}
 .stat-card .small-muted{font-size:.73rem}
 .table{font-size:.78rem}
 .pagination{flex-wrap:wrap;gap:.2rem}
}

/* V8.7 - Regla de reasignacion legible dentro del modal */
.js-reassignment-rule{overflow:hidden}
.js-reassignment-rule .card-body,
.js-reassignment-rule .js-rule-title,
.js-reassignment-rule .js-rule-options,
.js-reassignment-rule .js-rule-option,
.js-reassignment-rule .min-w-0{min-width:0}
.js-reassignment-rule .js-rule-option,
.js-reassignment-rule .js-rule-option *{
 white-space:normal!important;
 overflow-wrap:anywhere;
 word-break:normal;
}
.js-reassignment-rule .js-rule-option .text-body{line-height:1.45}
@media (min-width:992px){
 .js-reassignment-rule .js-rule-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:991.98px){
 .js-reassignment-rule .card-body{padding:.85rem!important}
 .js-reassignment-rule .js-rule-title{margin-bottom:.7rem!important}
 .js-reassignment-rule .js-rule-option{padding:.75rem!important}
}
@media (max-width:575.98px){
 .js-reassignment-rule .js-rule-title .small{font-size:.76rem}
 .js-reassignment-rule .js-rule-option{font-size:.82rem}
}