/* Shared density: compact content, readable controls, no hidden workflow steps. */
html { scroll-padding-top: 100px; }
body :is(main, section, article, form, .field) { min-width: 0; }
body :is(button, .btn, select) { max-width: 100%; }
body :is(h1, h2, h3, p, label, .pill) { overflow-wrap: break-word; }
body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #ffc53d; outline-offset: 3px;
}
body :is(.table-wrap, .quote-tabs, .tracking-tabs) {
  max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
}
body[data-canary-mobile="home"] .hero { min-height: 0; padding: 48px 0 36px; }
body[data-canary-mobile="home"] .hero-copy { padding: 24px; }
body[data-canary-mobile="home"] .hero-copy h1 { font-size: clamp(2rem, 3.7vw, 3.4rem); line-height: 1.1; }
body[data-canary-mobile="home"] :is(.hero-lede, .section-head p) { font-size: 16px; line-height: 1.55; }
body[data-canary-mobile="home"] .hero-note { margin-bottom: 18px; }
body[data-canary-mobile="home"] .section { padding: 64px 0; }
body[data-canary-mobile="home"] #servicios { padding: 56px 0; }
body[data-canary-mobile="home"] .section-head { margin-bottom: 24px; }
body[data-canary-mobile="home"] .section-head h2 { font-size: clamp(1.65rem, 2.8vw, 2.65rem); line-height: 1.2; }
body[data-canary-mobile="home"] :is(.service-card p, .mode-card p, .step-card p) { line-height: 1.55; }
body[data-canary-mobile="home"] .hero-benefits { gap: 8px 16px; margin-top: 16px; }
body[data-canary-mobile="home"] #calculadora .calc-product-heading { padding: 18px 20px; margin-bottom: 16px; }
body[data-canary-mobile="home"] #calculadora .calc-product-heading p { line-height: 1.5; margin-bottom: 0; }
body[data-canary-mobile="home"] #calculadora .calc-product-form { gap: 12px 16px; }
body[data-canary-mobile="portal"] .content { padding: 20px; }
body[data-canary-mobile="portal"] .ref-title { font-size: clamp(1.5rem, 2.7vw, 2rem); line-height: 1.2; }
body[data-canary-mobile="portal"] .ref-sub { font-size: 14px; margin-bottom: 12px; }
body[data-canary-mobile="portal"] :is(.ref-hero, .ref-grid, .portal-priority) { gap: 14px; margin-bottom: 16px; }
body[data-canary-mobile="portal"] :is(.panel, .ref-block, .payment-spotlight, .priority-steps) { padding: 18px; margin-bottom: 16px; }
body[data-canary-mobile="portal"] .ref-stat { min-height: 0; padding: 12px; }
body[data-canary-mobile="portal"] .ref-stat .ico { width: 36px; height: 36px; font-size: 20px; }
body[data-canary-mobile="portal"] .ref-stat .val { font-size: 22px; }
body[data-canary-mobile="portal"] .ref-stat .help { font-size: 12px; line-height: 1.4; }
body[data-canary-mobile="info"] .hero { padding: 56px 20px 40px; }
body[data-canary-mobile="info"] h1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; }
body[data-canary-mobile="info"] .lead { font-size: 17px; line-height: 1.6; }
body[data-canary-mobile="info"] .content { padding: 44px 20px 64px; }
body[data-canary-mobile="crm"] .main { padding: 18px; }
body[data-canary-mobile="crm"] :is(.panel, .crm-order) { padding: 16px; margin-bottom: 14px; }
body[data-canary-mobile="crm"] .head { gap: 12px; margin-bottom: 16px; }
body[data-canary-mobile="crm"] .head h1 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
body[data-canary-mobile="crm"] :is(.crm-order-grid, .detail-grid, .logistics-grid) { gap: 12px; }
body[data-canary-mobile="crm"] .crm-order-grid { margin: 12px 0; }
body[data-canary-mobile="crm"] .crm-order-footer { margin-top: 12px; padding-top: 12px; gap: 12px; }
body[data-canary-mobile="crm"] .table :is(th, td) { padding: 9px 10px; }
body[data-canary-mobile="crm"] .wb-row-head { gap: 10px; }
body[data-canary-mobile="crm"] .wb-overview { gap: 10px; }
body[data-canary-mobile="crm"] .wb-new-alert { padding: 12px; margin: 12px 0; }
body[data-canary-mobile="crm"] .wb-new-alert strong { font-size: 15px; }
body[data-canary-mobile="crm"] .wb-row .wb-description { -webkit-line-clamp: unset !important; overflow-wrap: anywhere; }
body[data-canary-mobile="crm"] .wb-row .crm-workflow-step p { font-size: 12px !important; }
body[data-canary-mobile="crm"] :is(.tools, .quote-actions, .dialog-actions) { flex-wrap: wrap; }
body[data-canary-mobile="crm"] .dialog { max-width: 100%; max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (min-width: 761px) and (max-width: 1100px) {
  body[data-canary-mobile="home"] :is(.services, .mode-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-canary-mobile="portal"] :is(.ref-hero, .ref-grid, .portal-priority) { grid-template-columns: minmax(0, 1fr); }
  body[data-canary-mobile="crm"] .wb-row-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-canary-mobile="crm"] .wb-row-status { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 170px; }
  body[data-canary-mobile="home"] .container { width: calc(100% - 28px); }
  body[data-canary-mobile="home"] .hero { padding: 28px 0; }
  body[data-canary-mobile="home"] .hero-copy { padding: 18px; }
  body[data-canary-mobile="home"] .hero-copy h1 { margin-bottom: 14px; }
  body[data-canary-mobile="home"] :is(.section, #servicios) { padding: 40px 0; }
  body[data-canary-mobile="home"] :is(.services, .mode-grid, .how-grid, .plans-grid) { gap: 14px; }
  body[data-canary-mobile="home"] :is(.service-card, .mode-card, .plan-card) { padding: 18px; }
  body[data-canary-mobile="home"] .hero-actions { margin-top: 18px; gap: 8px; }
  body[data-canary-mobile="home"] .hero-benefits { margin-top: 14px; gap: 6px; }
  body[data-canary-mobile="home"] #calculadora .calc-product-form { padding: 16px; }
  body[data-canary-mobile="home"] #calculadora .calc-product-heading h2 { font-size: 24px; }
  body[data-canary-mobile="home"] .faq summary { padding: 14px 0; }
  body[data-canary-mobile="home"] .faq details { margin-bottom: 10px; }
  body[data-canary-mobile="portal"] .content { padding: 16px 14px calc(110px + env(safe-area-inset-bottom, 0px)); }
  body[data-canary-mobile="portal"] .sidebar .nav { gap: 4px; }
  body[data-canary-mobile="portal"] .navbtn { min-width: 88px; flex-basis: 88px; min-height: 64px; padding: 8px 6px; }
  body[data-canary-mobile="portal"] :is(.panel, .ref-block, .payment-spotlight, .priority-steps, .nextcard, .paycard) { padding: 16px; margin-bottom: 14px; }
  body[data-canary-mobile="portal"] :is(.stats, .ref-stats, .consolidation-info, .ref-products) { gap: 10px; }
  body[data-canary-mobile="portal"] :is(.ref-card, .product-body) { padding: 14px; }
  body[data-canary-mobile="portal"] :is(.ref-card .meta, .ref-card .title) { font-size: 14px; line-height: 1.5; }
  body[data-canary-mobile="crm"] .main { padding: 14px 12px 24px; }
  body[data-canary-mobile="crm"] :is(.panel, .crm-order) { padding: 12px; }
  body[data-canary-mobile="crm"] .nav { display: flex; gap: 6px; overflow-x: auto; }
  body[data-canary-mobile="crm"] .nav button { flex: 0 0 auto; white-space: nowrap; min-height: 44px !important; }
  body[data-canary-mobile="crm"] .top { padding: 12px; gap: 10px; }
  body[data-canary-mobile="crm"] .tools { gap: 6px; }
  body[data-canary-mobile="crm"] .wb-toolbar { grid-template-columns: minmax(0, 1fr); }
  body[data-canary-mobile="crm"] .wb-toolbar .search { grid-column: auto; }
  body[data-canary-mobile="crm"] :is(.btn, .quote-tab, .tracking-tabs button, .wb-board .btn) { min-height: 44px !important; font-size: 13px !important; }
  body[data-canary-mobile] :is(.form-grid, .formgrid) { gap: 14px; }
  body[data-canary-mobile] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-height: 44px; font-size: 16px; }
  body[data-canary-mobile="info"] .hero { padding: 32px 16px; }
  body[data-canary-mobile="info"] .content { padding: 32px 16px 44px; }
  body[data-canary-mobile="info"] :is(.card, .lead-form) { padding: 18px; margin: 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Active plan lives in the existing header, between navigation and account tools. */
body[data-canary-mobile="portal"] .topbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; min-height: 64px; height: auto; }
body[data-canary-mobile="portal"] .topbar .toplinks { min-width: 0; }
body[data-canary-mobile="portal"] .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
body[data-canary-mobile="portal"] .header-plan { justify-self: center; min-width: 0; max-width: 100%; }
body[data-canary-mobile="portal"] .topbar .plan-countdown { display: grid; grid-template-columns: auto auto; align-items: center; gap: 1px 10px; min-width: 0; max-width: 100%; padding: 5px 10px; margin: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; text-align: center; }
body[data-canary-mobile="portal"] .topbar .plan-countdown small { grid-column: 1 / -1; font-size: 10px; line-height: 1.3; color: #a8c0d0; }
body[data-canary-mobile="portal"] .topbar .plan-countdown b { font-size: 14px; line-height: 1.4; color: #ffd365; font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-canary-mobile="portal"] .topbar .plan-countdown span { font-size: 11px; line-height: 1.4; color: #b9ccd9; }
@media (min-width: 761px) and (max-width: 1200px) {
 body[data-canary-mobile="portal"] .topbar { gap: 8px; padding-inline: 12px; }
 body[data-canary-mobile="portal"] .topbar .toplinks { gap: 2px; }
 body[data-canary-mobile="portal"] .topbar .toplink { padding-inline: 7px; }
 body[data-canary-mobile="portal"] .topbar-actions { gap: 6px; }
 body[data-canary-mobile="portal"] .topbar .plan-countdown { grid-template-columns: minmax(0,1fr); padding-inline: 4px; }
 body[data-canary-mobile="portal"] .topbar .plan-countdown b { font-size: 12px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
 body[data-canary-mobile="portal"] .topbar { grid-template-columns: minmax(0,1fr) auto; }
 body[data-canary-mobile="portal"] .topbar .toplinks { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 760px) {
 body[data-canary-mobile="portal"] .topbar { grid-template-columns: minmax(0,1fr); padding: 8px 12px; gap: 6px; }
 body[data-canary-mobile="portal"] .topbar-actions { justify-content: center; flex-wrap: wrap; gap: 8px; }
 body[data-canary-mobile="portal"] .topbar .plan-countdown { padding: 2px 0; }
}