/* SueldoClaro mobile system v1. Screen only; printable CV intentionally excluded.
   !important bridges legacy specificity. Keep shared mobile decisions here. */
@media screen and (max-width:760px){
:root{--m-gutter:clamp(16px,4.7vw,20px);--m-card:clamp(16px,4.7vw,20px);--m-section:clamp(36px,9vw,48px);--m-gap:20px;--m-touch:44px;--m-control:48px;--m-body:16px;--m-line:1.65}
/* Shared canvas and typography */
:root body .wrap,:root body.calculator-detail-page .wrap,:root body #calculadoras>.wrap{width:calc(100% - var(--m-gutter)*2)!important;max-width:none!important;margin-inline:auto!important}
:root body :is(.calculator,.panel,.result,.row2,.field,.seo-guide-grid,.seo-guide-grid>*,.guide-box,.guide-box>*,.hub-card,.source-card,.info-minimal-grid>*,.priv2-content,.builder-layout,.editor-panel){min-width:0;box-sizing:border-box}
:root body :is(.section,.seo-guide,.liquidacion-guide,.faq-home,.sources-section,.cv-seo-section){padding-block:var(--m-section)!important}
:root body :is(.page-hero,.cv-public-hero){padding-block:28px 24px!important}
:root body :is(.page-hero,.section-head,.center-head){margin-bottom:24px!important}
:root body :is(.page-hero,.home-hero,.cv-public-hero,.info-minimal-hero,.priv2-hero) h1{font-size:clamp(30px,8.3vw,38px)!important;line-height:1.14!important;overflow-wrap:break-word}
:root body :is(.section-head,.center-head,.seo-guide,.liquidacion-guide,.cv-seo-head,.info-minimal-body,.priv2-sec) h2{font-size:clamp(25px,7vw,30px)!important;line-height:1.22!important;overflow-wrap:break-word}
:root body :is(.page-hero,.home-hero,.cv-public-hero,.seo-guide,.liquidacion-guide,.cv-seo-section,.info-minimal,.priv2) :is(p,li){font-size:var(--m-body)!important;line-height:var(--m-line)!important;overflow-wrap:anywhere}
:root body :is(.seo-guide,.liquidacion-guide,.cv-seo-section,.info-minimal,.priv2) p+p{margin-top:16px}
:root body :is(.seo-guide,.liquidacion-guide) h3{font-size:19px!important;line-height:1.35!important;margin-top:28px!important}
/* Navigation: same breakpoint and specificity for the toggle and open menu. */
:root body .topbar>.wrap{height:auto!important;min-height:60px;display:flex!important;flex-wrap:wrap!important;gap:4px 10px!important;padding-block:8px!important}
:root body .topbar .brand{order:2;min-height:44px;display:inline-flex;align-items:center;max-width:calc(100% - 54px)}
:root body .topbar .theme-toggle{order:3;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-shrink:0;margin-left:auto!important}
:root body .topbar .toplinks{display:none!important}
:root body .topbar>.wrap{position:relative}
:root body .topbar .nav-toggle{display:block;order:3;width:44px;height:44px;flex-shrink:0;margin-left:auto}
:root body .topbar .theme-toggle{order:4;margin-left:0!important}
:root body .topbar .toplinks.sc-nav-open{position:absolute;z-index:40;top:calc(100% - 1px);left:0;right:0;display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;margin:0!important;padding:8px;border:1px solid var(--sc-line);border-radius:0 0 12px 12px;background:var(--sc-paper);box-shadow:0 14px 30px rgba(17,33,25,.14)}
:root body .topbar .toplinks a{display:flex!important;align-items:center;justify-content:center;flex:1;min-width:0;min-height:44px;padding:6px 3px!important;font-size:13px!important;line-height:1.3;text-align:center;white-space:normal}
:root body :is(main[id],main [id]){scroll-margin-top:140px}
:root body .footer .footer-links{gap:4px!important;width:100%}
:root body .footer .footer-links a{display:flex;align-items:center;min-height:44px!important;font-size:13px!important;line-height:1.4!important}
/* Cards and calculator forms */
:root body #calculadoras .calculator{grid-template-columns:minmax(0,1fr)!important;gap:var(--m-gap)!important;max-width:100%}
:root body #calculadoras :is(.panel,.result){padding:var(--m-card)!important;max-width:100%}
:root body :is(.row2,.net-tax-options,.net-hours,.liq-grid){grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
:root body .field{margin-bottom:18px!important}
:root body .row2>.field{margin-bottom:0!important}
:root body .row2{margin-bottom:18px}
:root body .field label{display:block;font-size:14px!important;line-height:1.45!important;margin-bottom:8px!important}
:root body .field :is(small,.field-help){display:block;font-size:13px!important;line-height:1.5!important;margin-top:8px}
:root body :is(.field,.panel,.flow-shell,.editor-panel) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),select,textarea){width:100%;min-width:0!important;max-width:100%;min-height:var(--m-control)!important;height:auto!important;box-sizing:border-box;font-size:16px!important;line-height:1.4!important;padding:12px!important}
:root body :is(.field,.panel,.flow-shell,.editor-panel) select{padding-right:38px!important;text-overflow:ellipsis}
:root body :is(.panel,.flow-shell,.editor-panel) textarea{min-height:112px!important;resize:vertical}
:root body :is(.pro-check,.liq-check,.safe-layout-check,label:has(>input[type=checkbox]),label:has(>input[type=radio])){min-height:44px;box-sizing:border-box;align-items:center;font-size:14px!important;line-height:1.45!important}
:root body :is(.pro-check,.liq-check) input[type=checkbox]{flex-shrink:0}
:root body :is(.panel,.result,.flow-shell,.editor-panel,.editor-toolbar,.mobile-tabs) button,:root body :is(.button,.calculator-home,.calculator-visible-pills>a,.calculator-more>summary,.calculator-more-list>a,.chat-chip){min-height:44px!important;font-size:14px!important;line-height:1.35!important;box-sizing:border-box}
:root body :is(.panel,.result) .button{min-height:48px!important;width:100%;white-space:normal}
:root body :is(.hub-grid,.source-grid){gap:16px!important}
:root body #calculadoras .hub-card{padding:20px!important;min-height:0!important;height:auto!important}
:root body #calculadoras .hub-card b{font-size:18px!important;line-height:1.3!important}
:root body #calculadoras .hub-card p{font-size:15px!important;line-height:1.6!important}
/* Results: labels and amounts wrap independently */
:root body .result :is(.big,.result-value,.liq-total strong){font-size:clamp(29px,8.2vw,38px)!important;line-height:1.15!important;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
:root body .result :is(p,.sub,.notice,.result-note){font-size:14px!important;line-height:1.55!important}
:root body .breakdown>div{gap:12px!important;padding-block:13px!important;align-items:flex-start}
:root body .breakdown>div>span{min-width:0;font-size:14px!important;line-height:1.5!important;overflow-wrap:anywhere}
:root body .breakdown>div>b{flex-shrink:0;max-width:55%;font-size:15px!important;line-height:1.4!important;white-space:normal!important;overflow-wrap:anywhere;text-align:right}
/* Reading columns and disclosures */
:root body :is(.seo-guide-grid,.liquidacion-guide .guide-box){grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
:root body .seo-guide-grid>:is(article,aside){width:100%!important;min-width:0!important;max-width:100%!important}
:root body :is(.faq-list,.seo-faq,.cv-faq,.liquidacion-guide) summary,:root body :is(.net-advanced,.net-why,.editor-section)>summary{min-height:48px!important;font-size:15px!important;line-height:1.45!important;padding:14px 16px!important;gap:12px;box-sizing:border-box;overflow-wrap:anywhere}
:root body :is(.faq-list,.seo-faq,.cv-faq) details p{font-size:15px!important;line-height:1.65!important;padding-inline:16px!important}
:root body :is(.seo-example,.liquidacion-guide .guide-box){padding:var(--m-card)!important;overflow-wrap:anywhere}
:root body :is(.seo-guide,.liquidacion-guide,.cv-seo-section) :is(table,pre){display:block;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
:root body :is(.seo-guide,.liquidacion-guide,.cv-seo-section) :is(th,td){padding:12px;font-size:14px;line-height:1.5}
/* Calculator switcher: anchor to the whole nav, not the small More button */
:root body .calculator-nav-compact{display:flex!important;width:100%!important;max-width:100%!important;flex-wrap:wrap!important;justify-content:flex-start!important;gap:6px!important;padding:6px!important;border-radius:18px!important;box-sizing:border-box}
:root body .calculator-visible-pills{display:flex!important;flex-wrap:wrap!important;gap:4px;min-width:0;height:auto!important}
:root body .calculator-nav-compact :is(.calculator-home,.calculator-visible-pills>a,.calculator-more>summary){height:auto!important;min-height:44px!important;padding:10px 12px!important;font-size:13px!important;line-height:1.3!important}
:root body .calculator-nav-compact .calculator-more{position:static!important;height:auto!important;min-height:44px!important}
:root body .calculator-nav-compact .calculator-more-menu{left:0!important;right:0!important;top:calc(100% + 8px)!important;width:100%!important;max-width:100%!important;max-height:min(60dvh,460px)!important;overflow-y:auto!important;overscroll-behavior:contain}
:root body .calculator-more-list{grid-template-columns:minmax(0,1fr)!important}
:root body .calculator-more-list>a{height:auto!important;padding:12px!important;white-space:normal!important;overflow:visible!important}
/* Information pages retain their distinct compositions */
:root body .priv2-shell{width:calc(100% - var(--m-gutter)*2)!important;max-width:none;padding-inline:0!important;margin-inline:auto}
:root body .about-block{margin-top:32px!important}
/* CV interface only: never resize #cv-document or its exported A4 content */
:root body :is(.cv-public-hero,.flow-shell,.editor-toolbar,.mobile-tabs,.builder-layout){width:calc(100% - var(--m-gutter)*2)!important;max-width:none!important;margin-inline:auto!important}
:root body .flow-shell .step-card,:root body .editor-panel>.editor-section{padding:var(--m-card)!important;min-width:0}
:root body .flow-shell :is(.row,.form-grid,.form-row,.field-grid){grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
:root body .flow-shell .step-actions{width:100%!important;gap:12px;padding-bottom:max(12px,env(safe-area-inset-bottom))}
:root body :is(.color-picker>div,.editor-color-picker){gap:10px!important;flex-wrap:wrap!important}
:root body :is(.color-picker,.editor-color-picker) button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;flex-shrink:0}
:root body .editor-color-picker>span{flex-basis:100%}
:root body .safe-order-row{gap:10px;font-size:14px!important;line-height:1.4}
:root body .safe-order-row>span{min-width:0;overflow-wrap:anywhere}
:root body .safe-order-row>div{flex-shrink:0}
:root body .safe-order-row button{width:44px!important;height:44px!important;min-width:44px!important}
:root body .safe-layout-buttons{display:flex!important;flex-wrap:wrap;gap:8px}
:root body .safe-layout-buttons button{flex:1 1 72px}
:root body .editor-toolbar{gap:16px;flex-wrap:wrap}
:root body .editor-toolbar h1{font-size:26px;line-height:1.2}
:root body .preview-panel{min-width:0;max-width:100%;overscroll-behavior-x:contain}
/* Liquidation receipt has an extra scale-status badge; wrap instead of clipping. */
:root body .liq-receipt-top{flex-wrap:wrap;gap:12px!important}
:root body .liq-receipt-top>div{min-width:0;flex:1 1 100%}
:root body .liq-receipt-top .liq-status{max-width:100%;white-space:normal!important;font-size:12px!important;line-height:1.4!important}
:root body .editor-panel input[type=range]{min-height:44px!important;font-size:16px!important;width:100%}
:root body :is(.seo-guide,.liquidacion-guide,.cv-seo-section) :is(th,td){font-size:14px!important;line-height:1.5!important}
/* Chat touch target and safe-area spacing */
:root body .chat-compose .chat-send{min-width:44px!important;min-height:44px!important;flex-basis:44px}
:root body .chat-compose{padding-inline:12px!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
/* Market strip: keep mobile quotes inside the viewport without horizontal clipping. */
:root body .market-strip{overflow:hidden!important}
:root body .market-wrap{width:100%!important;min-width:0!important;padding-inline:var(--m-gutter)!important;gap:12px!important;box-sizing:border-box}
:root body .market-rates{width:100%;min-width:0;justify-content:space-between;gap:12px!important;font-size:11px}
:root body .market-updated{display:none!important}
}

@media screen and (max-width:430px){
:root body .market-rates{justify-content:center}
}
@media screen and (max-width:380px){
:root body :is(.row2,.hub-grid,.template-options){grid-template-columns:minmax(0,1fr)!important}
:root body .editor-toolbar>.button{width:100%}
}

/* SC-MARKET-COMPACT-SCROLL-MOBILE-20260908 */
@media screen and (max-width:760px){
:root body{--sc-market-height:46px}
:root body .market-strip{height:46px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
:root body .market-wrap{width:max-content!important;min-width:max-content!important;height:46px!important;padding-inline:12px!important;gap:18px!important;justify-content:flex-start!important}
:root body .market-rates{width:max-content!important;gap:18px!important;justify-content:flex-start!important;flex:0 0 auto!important}
:root body .market-rates .market-item{font-size:9px!important;line-height:1.15!important;gap:0 5px!important}
:root body .market-rates .market-item strong{font-size:12px!important;line-height:1.1!important}
:root body .market-rates .market-change{min-width:42px!important;font-size:9px!important;line-height:1.1!important}
:root body #rateUpdated.market-status{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;font-size:9px!important;line-height:1.15!important;white-space:nowrap!important;padding-right:12px!important}
:root body .market-strip{height:46px!important;min-height:46px!important;max-height:46px!important;block-size:46px!important;padding-block:0!important}
:root body .market-wrap{height:46px!important;min-height:0!important;max-height:46px!important}

/* Shared market ribbon: keep both quotes centered after removing the timestamp. */
:root body .market-strip .market-wrap{width:100%!important;min-width:100%!important;padding-inline:12px!important;justify-content:center!important}
:root body .market-strip .market-rates{width:auto!important;min-width:0!important;flex:0 1 auto!important;justify-content:center!important;gap:24px!important}
:root body .market-strip #rateUpdated,
:root body .market-strip .market-actions{display:none!important}
}

/* Final mobile header layout: keep navigation controls on one row and make
   both exchange quotes legible without relying on horizontal clipping. */
@media screen and (max-width:760px){
:root body .topbar>.wrap{height:auto!important;min-height:60px!important;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding-block:8px!important}
:root body .topbar .brand{order:0!important;flex:0 1 auto!important;min-width:0!important;max-width:none!important;white-space:nowrap}
:root body .topbar .nav-toggle{order:1!important;margin-left:auto!important;flex:0 0 44px!important;width:44px!important;height:44px!important}
:root body .topbar .theme-toggle{order:2!important;margin-left:0!important;flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
:root body .topbar .toplinks.sc-nav-open{top:calc(100% - 1px)!important}
:root body .market-strip{height:46px!important;min-height:46px!important;max-height:46px!important;overflow:hidden!important}
:root body .market-strip .market-wrap{width:100%!important;min-width:0!important;height:46px!important;min-height:46px!important;padding-inline:12px!important;gap:0!important;justify-content:center!important}
:root body .market-strip .market-rates{width:auto!important;min-width:0!important;flex:0 1 auto!important;justify-content:center!important;gap:clamp(14px,5vw,24px)!important;white-space:nowrap!important}
:root body .market-strip .market-rates .market-item{display:grid!important;grid-template-columns:auto auto!important;grid-template-rows:auto auto!important;align-items:center!important;justify-items:start!important;gap:1px 6px!important;min-width:0!important;color:#d7eee4!important;font-size:9px!important;line-height:1.15!important;white-space:nowrap!important}
:root body .market-strip .market-rates .market-item strong{grid-column:1!important;grid-row:2!important;font-size:12px!important;line-height:1.1!important;color:#bdebd9!important}
:root body .market-strip .market-rates .market-item .market-change{grid-column:2!important;grid-row:2!important;min-width:0!important;font-size:9px!important;line-height:1.1!important}
:root body .market-strip #rateUpdated,
:root body .market-strip .market-actions{display:none!important}
}