/*
 * SIG Comunitario | Display clarity 1.0
 * Responsive typography for 1366/1920/2560/3840 desktop displays.
 * Keeps Leaflet map geometry, data access, and UI interaction unchanged.
 * Unlike CSS zoom, font-size changes are drawn at native screen resolution.
 */
:root {
  --sig-type-micro:clamp(10px,calc(10.6px * var(--ui-scale,1)),16px);
  --sig-type-small:clamp(11px,calc(11.8px * var(--ui-scale,1)),18px);
  --sig-type-body:clamp(12px,calc(12.8px * var(--ui-scale,1)),20px);
  --sig-type-nav:clamp(12px,calc(12.5px * var(--ui-scale,1)),19px);
  --sig-type-title:clamp(16px,calc(17px * var(--ui-scale,1)),28px);
  --sig-sidebar-min:342px;
  --sig-details-min:392px;
}
html,body {
  text-rendering:optimizeLegibility;
  font-synthesis:none;
}
.entity-svg,.commune-svg,.home-svg,.leaflet-marker-icon svg,
.house-legend svg,.layer-row svg {
  shape-rendering:geometricPrecision;
}
/* Protect login readability at every desktop size. */
#loginOverlay > div {
  width:min(94vw,440px)!important;
  max-width:440px!important;
  padding:32px!important;
}
#loginOverlay h2 {font-size:clamp(21px,1.3vw,26px)!important;line-height:1.2!important}
#loginOverlay p {font-size:clamp(12px,.85vw,15px)!important;line-height:1.42!important}
#loginOverlay label {font-size:clamp(13px,.85vw,16px)!important}
#loginOverlay input,#loginOverlay button[type=submit] {
  font-size:clamp(14px,.95vw,18px)!important;
  min-height:43px;
}
#loginOverlay a {font-size:clamp(12px,.8vw,15px)!important}
#loginOverlay > div > div:last-child {font-size:clamp(12px,.85vw,15px)!important}
#loginOverlay {
  /* The original fixed 1920px JPEG was upscaled on high-density monitors. */
  background-image:image-set(
    url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1920&q=86') 1x,
    url('https://images.unsplash.com/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=3840&q=88') 2x
  )!important;
  background-position:center!important;
  background-size:cover!important;
}
@media (min-width:821px) {
  /* Fractional CSS zoom rasterizes text and icons inconsistently. */
  .sidebar,.map-tools,.ficha,.quad-info,.map-legend,.mobile-bar,
  .page-settings,.basemap-panel,.environment-tools {
    zoom:1!important;
  }
  .sidebar:not(.compact):not(.collapsed) {
    min-width:min(var(--sig-sidebar-min),calc(100vw - 32px));
  }
  .ficha {min-width:min(var(--sig-details-min),calc(100vw - 32px))}
  .map-legend {left:calc(var(--sig-sidebar-min) + 34px)}
  .sidebar,.ficha,.basemap-panel,.environment-tools,.page-settings {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  /* Low-emphasis microcopy must remain genuinely readable. */
  .brand-sub,.brand-region,.eyebrow,.count-badge,.drag-chip,
  .section-toggle b,.fg label,.layers-head span,.layer-note,
  .filter-start-note,.zonal-hint,.geo-status,.mapping-note,
  .mapping-grid span,.geo-batch-head,.geo-batch-head b,
  .geo-batch-status,.uv-filter label,.commune-colors-title,
  .commune-key,.stat span,.result-head,.map-legend,
  .basemap-head span,.basemap-copy small,.location-popup-kicker,
  .location-popup-source,.environment-kicker,.environment-note,
  .environment-head span,.environment-row small,
  .history-item-meta,.history-detail-stat b,.history-detail-section h4,
  .municipal-directory-head small,.municipal-contact-card span,
  .contact-import-grid span,.ps-row small,.ps-row label,
  .card-label span,.contact-action,.buzon-context-box small,
  .field-k,.ficha-type,.layer-row .legend {
    font-size:var(--sig-type-micro)!important;
    line-height:1.4;
  }
  /* Controls, sublabels, tags and menu options. */
  .brand-title,.top-btn,.tool-btn,.basemap-copy b,
  .basemap-option,.basemap-head b,.location-popup-sub,
  .location-popup-grid,.location-popup-actions button,
  .environment-row b,.environment-community p,
  .marker-popup-type,.marker-popup-line,.marker-popup-contact,
  .marker-popup-btn,.cat-multiselect-trigger,#categoriaDropdown .cat-check,
  .mapping-head,.mapping-head b,.mapping-grid b,
  .mapping-actions .btn,.geo-batch-row select,.geo-batch-row .btn,
  .priority-card .card-label b,.concession-card .card-label b,
  .fg input,.fg select,.searchbox input,.find-btn,.layer-row,
  .uv-filter select,.layers-head b,.item-sub,.item-info,.item-meta,
  .btn,.history-item-summary,.history-attachment-name,
  .municipal-contact-card b,.contact-import-review b,
  .contact-action,.buzon-link-row,.map-legend .leg,
  .field-v,.directiva-line,.quad-info,.ps-seg button,
  .ps-title b {
    font-size:var(--sig-type-small)!important;
    line-height:1.4;
  }
  /* Primary content and navigation are sized independently of map zoom. */
  .nav-btn,.top-btn,.tool-btn,.btn-buzon-title,
  .item-name,.marker-popup-name,.location-popup-address,
  .history-item-title,.history-detail-text,.card-label b {
    font-size:var(--sig-type-nav)!important;
    line-height:1.35;
  }
  .side-head h2,.ficha-head h3 {
    font-size:var(--sig-type-title)!important;
    line-height:1.24;
  }
  .map-tools .tool-btn {min-height:40px}
  .topbar .top-btn {min-height:34px}
  .stats {min-height:62px;height:auto}
  .mapping-grid>div {min-height:57px;overflow-wrap:anywhere}
  .stat {padding:7px 2px}
  .stat span {text-align:center;overflow-wrap:anywhere}
  .filter-section>.section-toggle {min-height:32px;height:auto}
  .fg input,.fg select {min-height:38px}
  .searchbox input {min-height:42px}
  .item {min-height:64px}
  .btn,.geo-batch-row .btn {min-height:34px}
  #categoriaDropdown .cat-check {min-height:34px;align-items:center}
  .brand-sub,.brand-region {letter-spacing:.04em}
  .topbar,.sidebar,.map-tools,.ficha,.map-legend {font-synthesis:none}
}
/* 24–27" full-HD desktop */
@media (min-width:1800px) and (min-height:850px) {
  :root {
    --sig-type-micro:clamp(11px,calc(12px * var(--ui-scale,1)),19px);
    --sig-type-small:clamp(12px,calc(13px * var(--ui-scale,1)),20px);
    --sig-type-body:clamp(13px,calc(14px * var(--ui-scale,1)),21px);
    --sig-type-nav:clamp(13px,calc(13.8px * var(--ui-scale,1)),21px);
    --sig-type-title:clamp(18px,calc(19px * var(--ui-scale,1)),29px);
    --sig-sidebar-min:373px;
    --sig-details-min:435px;
  }
  .topbar {grid-template-columns:260px minmax(120px,1fr) auto}
  .sidebar:not(.compact):not(.collapsed) {width:373px}
  .ficha {width:435px}
}
/* QHD ultrawide & 27–32" high-density desktop */
@media (min-width:2400px) and (min-height:1050px) {
  :root {
    --sig-type-micro:clamp(12px,calc(13px * var(--ui-scale,1)),20px);
    --sig-type-small:clamp(13px,calc(14px * var(--ui-scale,1)),22px);
    --sig-type-body:clamp(14px,calc(15px * var(--ui-scale,1)),23px);
    --sig-type-nav:clamp(14px,calc(15px * var(--ui-scale,1)),22px);
    --sig-type-title:clamp(19px,calc(21px * var(--ui-scale,1)),32px);
    --sig-sidebar-min:426px;
    --sig-details-min:490px;
    --header:61px;
  }
  .topbar {height:var(--header);grid-template-columns:300px minmax(200px,1fr) auto}
  .sidebar,.ficha,.map-tools {top:calc(var(--header) + 12px)}
  .page-settings {top:calc(var(--header) + 7px)}
  .sidebar:not(.compact):not(.collapsed) {width:426px}
  .ficha {width:490px;max-height:calc(100vh - var(--header) - 24px)}
  .map-tools .tool-btn {min-height:44px}
  .topbar .top-btn {min-height:40px}
  .map-legend {bottom:22px}
}
/* 4K workstation: larger physical targets while retaining free map area */
@media (min-width:3400px) and (min-height:1500px) {
  :root {
    --sig-type-micro:clamp(13px,calc(14px * var(--ui-scale,1)),22px);
    --sig-type-small:clamp(14px,calc(15.5px * var(--ui-scale,1)),24px);
    --sig-type-body:clamp(15px,calc(17px * var(--ui-scale,1)),25px);
    --sig-type-nav:clamp(15px,calc(16px * var(--ui-scale,1)),24px);
    --sig-type-title:clamp(20px,calc(23px * var(--ui-scale,1)),35px);
    --sig-sidebar-min:475px;
    --sig-details-min:535px;
    --header:68px;
  }
  .topbar {grid-template-columns:330px minmax(300px,1fr) auto;padding-inline:26px}
  .sidebar:not(.compact):not(.collapsed) {width:475px}
  .ficha {width:535px}
  .brand-logo {width:43px;height:43px}
  .topbar .top-btn {min-height:43px}
  .map-tools .tool-btn {min-height:48px}
  #loginOverlay > div {max-width:520px!important;width:min(94vw,520px)!important;padding:42px!important}
}
/* Preserve current compact/mobile layouts; only eliminate very small login text there. */
@media (max-width:820px) {
  #loginOverlay > div {max-width:380px!important;padding:26px 22px!important}
  #loginOverlay input,#loginOverlay button[type=submit] {font-size:15px!important}
}

/* Four wide-label metrics need two columns to avoid letter-by-letter wrapping. */
@media (min-width:821px) {
  .mapping-grid,.stats {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .mapping-grid span,.stat span {
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    text-align:center;
  }
  .mapping-grid>div {min-height:58px}
  .stats {min-height:98px}
  .stat:nth-child(2) {border-right:0}
  .stat:nth-child(-n+2) {border-bottom:1px solid #e4eaee}
  .fg label,.section-toggle b,.layer-note,.geo-status,.mapping-note,
  .geo-batch-status,.filter-start-note,.zonal-hint,.stat span,
  .card-label span,.environment-note,.ps-row small {
    color:#536776;
  }
}