/* Expediente y tableros del cliente · Ing. Víctor Marín · 12/10/2026. */
#portalView #documentos .portal-document-tabs{display:flex!important;gap:8px;overflow-x:auto;margin:0 0 17px;padding:2px 2px 12px;scrollbar-width:thin;scroll-snap-type:x proximity}
#portalView #documentos .portal-document-tabs button{flex:1 0 150px;min-height:55px;border:1px solid #d8e1e3;border-radius:10px;background:#f5f8f8;color:#284861;scroll-snap-align:start}
#portalView #documentos .portal-document-tabs button.active{border-color:#0b3150;background:#0b3150;color:#fff;box-shadow:0 9px 20px rgba(5,39,67,.17)}
#portalView #documentos .portal-document-tabs button.active small{background:#d4a549;color:#092b49}
#portalView #documentos>.document-section[hidden]{display:none!important}
#portalView #documentos>.document-section{margin:0;padding:0;border:0}
#portalView #documentos .document-heading{margin:0 0 14px}
#portalView #documentos .document-heading h2{font-size:clamp(26px,2.7vw,39px)}
#portalView #documentos .document-heading p{max-width:850px;margin:0;font-size:13px;line-height:1.5}
#portalView #documentos .document-heading-count{align-self:center}
#portalView .document-workspace{overflow:hidden;border-radius:13px}
#portalView .document-index,#portalView .plans-section .document-index{display:flex;flex-flow:row nowrap;align-items:stretch;gap:10px;max-height:none;overflow-x:auto;overflow-y:hidden;padding:13px;scrollbar-width:thin;scroll-snap-type:x proximity;background:#f1f4f3}
#portalView .document-index .document-list-label,#portalView .document-index .plan-group-title{display:none}
#portalView .document-index .document-item,#portalView .plans-section .document-index .document-item{flex:0 0 clamp(145px,15vw,185px);display:flex;flex-direction:column;align-items:stretch;gap:7px;width:auto;min-height:0;height:auto;padding:7px;border-radius:9px;scroll-snap-align:start;box-shadow:none}
#portalView .document-index .document-icon,#portalView .plans-section .document-index .document-icon,#portalView .document-index .document-icon-cover{width:100%;height:115px;min-height:115px;border-radius:5px;background:#fff}
#portalView .document-index .document-item-copy{gap:3px;padding:0 3px 3px}
#portalView .document-index .document-item-copy strong{font-size:12px;line-height:1.25}
#portalView .document-index .document-item-copy small{font-size:10px;line-height:1.25}
#portalView .document-index .document-item-arrow{top:12px;right:12px;width:23px;height:23px;font-size:12px}
#portalView .document-preview-top{padding:12px 20px;border-top:2px solid #c59b48}
#portalView .document-preview-content,#portalView .document-preview.has-cover .document-preview-content{padding:19px 24px;gap:7px 20px}
#portalView .document-preview-content h3{font-size:clamp(24px,2.4vw,34px)}
#portalView .document-preview-content>p{font-size:12px;line-height:1.45}
#portalView .document-frame,#portalView .document-frame.is-cover{height:clamp(370px,55svh,610px);min-height:0;margin:0 16px 16px;padding:8px}
#portalView .document-frame.is-cover .document-cover-page{max-height:100%}
#portalView .plan-specialties{display:flex;flex-wrap:nowrap;overflow-x:auto;margin-bottom:12px;padding:2px 0 10px;scrollbar-width:thin}
#portalView .plan-specialties button{flex:none;white-space:nowrap}
#portalView .plan-drive-bar{margin-bottom:12px}
#portalView .plan-image-stage{padding:12px 12px 0}
#portalView .plan-image-expand{min-height:0;max-height:clamp(360px,55svh,650px)}
#portalView .plan-image-expand img{max-height:clamp(360px,55svh,650px)}
#portalView #costos{overflow:hidden}
#portalView #costos .panel-heading{align-items:center;margin-bottom:14px}
#portalView #costos .cost-top{display:none}
#portalView .investment-dashboard{grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:14px;margin:14px 0 22px}
#portalView .investment-visual{min-height:345px;border-radius:12px}
#portalView .investment-insight{padding:clamp(20px,2.3vw,32px);border-radius:12px;background:#f7faf9}
#portalView .investment-insight h3{margin:5px 0 11px;font-size:clamp(26px,2.4vw,36px)}
#portalView .investment-total strong{font-size:clamp(33px,3.4vw,48px)}
#portalView .investment-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0;padding:0}
#portalView .investment-kpis div{min-width:0;padding:12px;border:1px solid #dbe4e3;border-radius:8px;background:#fff}
#portalView .investment-kpis small{display:block;color:#60798b;font-size:10px;font-weight:750;line-height:1.3;text-transform:uppercase;letter-spacing:.045em}
#portalView .investment-kpis strong{display:block;margin-top:7px;color:#0b3150;font-size:clamp(14px,1.2vw,20px);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#portalView .investment-bars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:17px 0}
#portalView .investment-bar{min-width:0}
#portalView .investment-bar>div:first-child{gap:7px;font-size:11px}
#portalView .investment-bar>div:first-child span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#portalView .investment-bar strong{font-size:11px}
#portalView .investment-materials{display:block;margin-top:5px;color:#738794;font-size:10px;line-height:1.35}
#portalView .investment-note{padding-top:12px;border-top:1px solid #dbe4e3;font-size:11px;line-height:1.5}
#portalView .cost-breakdown-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin:0 0 10px;color:#0b3150}
#portalView .cost-breakdown-heading strong{font:400 24px Georgia,serif}
#portalView .cost-breakdown-heading small{color:#617b8d;font-size:11px}
#portalView #costos .table-scroll{border:1px solid #dce5e6;border-radius:10px;background:#fff}
#portalView .cost-table th{background:#edf3f4;color:#426079;font-size:10px}
#portalView .cost-table td{font-size:12px}
#portalView .payment-dashboard{min-height:165px;margin:14px 0 10px;padding:20px 28px}
#portalView .payment-dashboard-copy strong{font-size:clamp(40px,4vw,58px)}
#portalView .payment-donut{width:112px}
#portalView .payment-donut:before{width:85px}
#portalView .payment-donut span{font-size:21px}
#portalView .payment-dashboard-track{margin-top:12px}
#portalView .payment-summary{gap:9px}
#portalView .payment-summary article{min-height:105px;padding:15px 19px}
#portalView .payment-summary strong{margin:7px 0 3px;font-size:clamp(23px,2.4vw,33px)}
#portalView .payment-note{margin:10px 0 22px}
#portalView .payment-list-heading{margin:0 0 12px;padding-bottom:10px}
#portalView .payment-list-heading h3{font-size:clamp(27px,2.8vw,38px)}
#portalView .payment-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#portalView .payment-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;min-height:0;padding:18px;border-left-width:4px;border-radius:11px}
#portalView .payment-card-main{grid-column:1/-1}
#portalView .payment-card h3{font-size:clamp(20px,1.9vw,27px)}
#portalView .payment-card-amount,#portalView .payment-card-paid{min-width:0;padding:10px 0 0;border-left:0;border-top:1px solid #e2e9e9;justify-content:flex-start}
#portalView .payment-card strong{font-size:clamp(17px,1.6vw,23px);overflow-wrap:anywhere}
#portalView .payment-card small{font-size:11px}
@media(max-width:1050px){#portalView .investment-dashboard{grid-template-columns:1fr}#portalView .investment-visual{min-height:270px}#portalView .payment-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){
 #portalView #documentos .portal-document-tabs button{flex-basis:132px;min-height:48px;padding:8px}
 #portalView .document-index .document-item,#portalView .plans-section .document-index .document-item{flex-basis:136px}
 #portalView .document-index .document-icon,#portalView .plans-section .document-index .document-icon,#portalView .document-index .document-icon-cover{height:95px;min-height:95px}
 #portalView .document-preview-content,#portalView .document-preview.has-cover .document-preview-content{padding:17px}
 #portalView .document-frame,#portalView .document-frame.is-cover{height:clamp(330px,52svh,470px);margin:0 8px 8px}
 #portalView .investment-kpis{grid-template-columns:1fr 1fr}
 #portalView .investment-kpis div:last-child{grid-column:1/-1}
 #portalView .investment-bars{grid-template-columns:1fr}
 #portalView .cost-breakdown-heading{display:block}
 #portalView .cost-breakdown-heading small{display:block;margin-top:4px}
 #portalView .payment-list{grid-template-columns:1fr}
 #portalView .payment-dashboard{padding:18px}
 #portalView .payment-summary{grid-template-columns:1fr}
 #portalView .payment-summary article:nth-child(3){grid-column:auto}
}