/* Compact rankings keep the career and score in view on phones. */
@media(max-width:720px){
 main{padding-inline:4%}main>section,.workspace>*{min-width:0;max-width:100%}
 #panorama,#prPanorama{padding:20px 10px;border-radius:12px}
 #panorama .chart-box,#panorama .table-box,#prPanorama .chart-box,#prPanorama .table-box{min-width:0;padding:18px 12px}
 #panorama p,#prPanorama p,.chart-note,.data-note{font-size:13px;line-height:1.65}
 #panorama .box-title h3,#prPanorama .box-title h3,.box-title h3{font-size:16px;line-height:1.4}
 #panorama label,#prPanorama label,.metric .label{font-size:12px}
 input,select,#panorama select,#prPanorama select,#prPanorama input,.finder input,.finder select,.edition-row select,.chart-control select{font-size:16px;min-height:44px}
 .edition-row{flex-wrap:wrap}.edition-row>div,.edition-row select{max-width:100%}.chart-control{flex-wrap:wrap;width:100%}.chart-control select{width:100%}
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-width:0;padding:14px 10px}.metric small{font-size:12px}.metric strong{font-size:27px}
 #panRanking .table-scroll,#prPanRanking .table-scroll{overflow:visible}
 #panRanking table,#prPanRanking table,#panRanking tbody,#prPanRanking tbody{display:block;width:100%;white-space:normal}
 #panRanking thead,#prPanRanking thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #panRanking tbody tr,#prPanRanking tbody tr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:'position career value' '. mode value';gap:6px 10px;padding:18px 0;border-bottom:1px solid #dce2e7;align-items:start}
 #panRanking td,#prPanRanking td{display:block;border:0;padding:0;text-align:left;min-width:0;white-space:normal;overflow-wrap:anywhere}
 #panRanking td:first-child,#prPanRanking td:first-child{grid-area:position;font-size:16px;font-weight:700;color:#69788a;padding-top:7px}
 #panRanking td:nth-child(2),#prPanRanking td:nth-child(2){grid-area:career}
 #panRanking td:nth-child(3),#prPanRanking td:nth-child(3){grid-area:mode;font-size:12px;color:#69788a}
 #panRanking td:nth-child(4),#prPanRanking td:nth-child(4){grid-area:value;font-size:19px;color:#132d50;text-align:right;padding-top:6px;max-width:90px}
 #panorama .pan-career,#prPanorama .pr-pan-option{font-size:15px;line-height:1.45;white-space:normal;overflow-wrap:anywhere;text-align:left;min-height:44px;padding:4px 0}
 #panRanking td small,#prPanRanking td small{font-size:12px;line-height:1.5;display:block}
 .pr-dist-table{white-space:normal;table-layout:fixed}.pr-dist-table th:first-child,.pr-dist-table td:first-child{width:76%;text-align:left}.pr-dist-table th,.pr-dist-table td{font-size:13px;padding:12px 5px;overflow-wrap:anywhere}
 .trend-wrap,#histogram,#panHistogram{width:100%;max-width:100%;overflow-x:auto;padding-bottom:10px;overscroll-behavior-x:contain}
 .trend-wrap .chart{min-width:560px}#histogram .chart,#panHistogram .chart{min-width:560px}
 .hist-tip{height:auto;min-height:20px;font-size:13px}.legend{font-size:12px;flex-wrap:wrap}
 .chart-box:has(.trend-wrap)::after,.chart-box:has(#histogram)::after,#panorama .chart-box:has(#panHistogram)::after{content:'Desliza la gráfica para ver todo el detalle ↔';display:block;font-size:12px;color:#69788a;margin-top:8px}
 .process-tabs{display:flex;flex-wrap:wrap}.process-tabs button{flex:1;min-width:140px}
}