:root {
      --pri: #0d9488; --pri-light: #14b8a6; --acc: #f59e0b; --acc-light: #fbbf24;
      --bg: #0b1120; --card: #111827; --card2: #1e293b; --border: #334155;
      --text: #f1f5f9; --muted: #94a3b8;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html, body { width:100%; height:100%; }
    body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--text); overflow:hidden; height:100vh; height:100dvh; min-height:0; }
    
    ::-webkit-scrollbar { width:6px; }
    ::-webkit-scrollbar-track { background:var(--card); }
    ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

    .ol-control button {
      background-color: var(--card2) !important; color: var(--text) !important;
      border: 1px solid var(--border) !important; border-radius: 6px !important; font-size: 14px !important;
    }
    .ol-control button:hover { background-color: var(--dark-600) !important; }
    .ol-attribution { background: rgba(11,17,32,0.8) !important; color: var(--muted) !important; border-radius: 8px 0 0 0 !important; }
    
    .ol-popup {
      position: absolute; width: max-content; min-width: min(280px, calc(100vw - 32px));
      max-width: min(420px, calc(100vw - 32px)); max-height: min(55vh, 460px);
      overflow: auto; overscroll-behavior: contain; padding: 16px;
      background: linear-gradient(145deg, #172337, var(--card) 72%); color: var(--text);
      box-shadow: 0 18px 50px rgba(0,0,0,0.48); border-radius: 16px;
      border: 1px solid rgba(148,163,184,0.28); z-index: 10;
    }
    .ol-popup:after, .ol-popup:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
    .ol-popup:after { border-top-color: var(--card); border-width: 9px; margin-left: -9px; }
    .ol-popup:before { border-top-color: var(--border); border-width: 10px; margin-left: -10px; }
    #popup-closer { position: sticky; float: right; top: 0; z-index: 1; margin: -7px -7px 0 8px; width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 10px; background: var(--card2); color: var(--muted); font-size: 15px; cursor: pointer; }
    #popup-closer:hover { color: var(--text); background: #334155; }
    .popup-title { margin: 0 35px 12px 0; color: var(--pri-light); font-size: 15px; font-weight: 700; letter-spacing: .01em; }
    .feature { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
    .feature-name { font-weight: 700; margin-bottom: 6px; color: var(--text); font-size: 13px; }
    #popup table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
    #popup th, #popup td { text-align: left; vertical-align: top; padding: 7px 5px; border-bottom: 1px solid rgba(51,65,85,0.65); overflow-wrap: anywhere; }
    #popup th { width: 38%; color: var(--muted); font-weight: 500; }
    #popup td { color: var(--text); font-weight: 600; }
    .coords { font-family: monospace; font-size: 12px; color: var(--muted); margin-top: 8px; }

    input[type="checkbox"], input[type="radio"] { accent-color: var(--pri); width: 14px; height: 14px; cursor: pointer; }
    input[type="range"] { accent-color: var(--pri-light); height: 4px; cursor: pointer; width: 60px; }
    button:disabled { opacity: 0.45; cursor: not-allowed; }

    #layer-panel { transition: transform 0.3s ease, width 0.3s ease; }
    #layer-panel { width: min(320px, 88vw); }
    #layer-panel.layer-panel-collapsed { width: 0 !important; min-width: 0 !important; flex-basis: 0 !important; overflow: hidden !important; border: 0 !important; }
    .tab-header { position: sticky; top: 0; z-index: 1; }
    .tab-btn { flex: 1; min-height: 38px; padding: 8px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; transition: color .15s ease, background .15s ease, border-color .15s ease; }
    .tab-btn:hover { color: var(--text); background: rgba(255,255,255,.03); }
    .tab-btn.active { color: var(--pri-light); border-bottom-color: var(--pri-light); background: rgba(20,184,166,.08); }
    .tab-pane { min-height: 0; }
    .layer-group { margin-bottom: 1rem; }
    .layer-group-children { border-left: 1px solid var(--border); margin-left: .5rem; padding-left: .5rem; }
    .tool-section { flex: 0 0 auto; }
    .tool-section summary { min-height: 32px; cursor: pointer; }
    .tool-button { min-height: 38px; padding: 7px 8px; border: 1px solid #334155; border-radius: 9px; background: #1e293b; color: #e2e8f0; font-size: 11px; transition: background .15s ease, border-color .15s ease; }
    .tool-button:hover { background: #334155; border-color: #475569; }
    .tool-button:disabled { opacity: .45; cursor: not-allowed; }
    details > summary { list-style: none; cursor: pointer; }
    details > summary::-webkit-details-marker { display: none; }
    details[open] summary .fa-plus { display: none; }
    details:not([open]) summary .fa-minus { display: none; }

    .ol-tooltip-measure {
      background: rgba(17, 24, 39, 0.95);
      color: #f1f5f9;
      border: 1px solid #14b8a6;
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    }
    #gps-status { max-width: min(280px, calc(100vw - 2rem)); }
    .print-only { display: none; }

    @media (max-width: 767px) {
      #map-layout { min-height: 0; }
      #map .ol-viewport { touch-action: none; }
      #layer-panel {
        width: min(360px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
        box-shadow: 18px 0 48px rgba(0,0,0,0.42);
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
      }
      .tab-btn { min-height: 40px; flex: 1; }
      #layer-panel .p-4 { padding: 16px; }
      #layer-panel .tool-button { min-height: 44px; }
      #map .ol-attribution { max-width: calc(100% - 72px); }
      nav { gap: 8px; }
      .mobile-brand { gap: 8px !important; }
      .mobile-brand-title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-nav-actions { flex-shrink: 0; }
      .mobile-nav-actions > button { min-height: 38px; }

      .ol-popup {
        min-width: min(260px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: min(52dvh, 400px);
        padding: 14px;
        border-radius: 14px;
      }
      #popup table { font-size: 12px; }
      #popup th, #popup td { padding: 8px 5px; }
      #searchInput { min-width: 0; font-size: 16px; }
      #searchBtn { min-width: 44px; min-height: 44px; }
      #morosidad-min, #morosidad-max { min-height: 44px; font-size: 16px; text-align: right; }
      #btn-morosidad-filter, #btn-morosidad-clear { min-height: 44px; }
      #layer-panel .flex.items-center.justify-between.text-xs { min-height: 40px; }
      #layer-panel input[type="checkbox"], #layer-panel input[type="radio"] { width: 18px; height: 18px; }
      #layer-panel input[type="range"] { width: 58px; height: 24px; }
      .ol-tooltip-measure { max-width: calc(100vw - 36px); white-space: normal; text-align: center; }
    }

    @media (max-width: 480px) {
      nav { padding-left: 8px !important; padding-right: 8px !important; }
      .mobile-brand { gap: 7px !important; }
      .mobile-brand-icon { width: 30px; height: 30px; flex: 0 0 30px; }
      .mobile-brand-title { max-width: 116px; font-size: 11px; line-height: 1.15; }
      .mobile-brand-subtitle { display: none; }
      .mobile-nav-actions { gap: 4px !important; }
      .mobile-nav-actions > button { width: 34px; height: 36px; min-height: 36px; justify-content: center; padding: 0; }
      .mobile-layer-count { gap: 3px; font-size: 11px; }
      .mobile-layer-label { display: none; }
    }

    @media (max-width: 360px) {
      .mobile-brand-title { max-width: 98px; }
      .mobile-layer-count #layer-count { display: none; }
    }

    @page {
      size: A4 landscape;
      margin: 10mm;
    }

    @media print {
      html, body {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #fff !important;
      }
      body { display: block !important; color: #111827 !important; }
      nav, #layer-panel, #mobile-backdrop, #login-modal, #btn-gps, #gps-status, #popup {
        display: none !important;
      }
      #map-layout {
        display: block !important;
        width: 100% !important;
        height: 180mm !important;
        overflow: visible !important;
      }
      #map-container {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 180mm !important;
        overflow: hidden !important;
        background: #fff !important;
      }
      #map {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
      }
      #map .ol-viewport { width: 100% !important; height: 100% !important; }
      #map .ol-control:not(.ol-attribution) { display: none !important; }
      #map .ol-attribution { font-size: 8px !important; }
      .print-only { display: block !important; }
      #print-header, #print-legend {
        position: absolute;
        z-index: 130;
        color: #111827;
        background: rgba(255, 255, 255, 0.94);
        border: 1px solid #cbd5e1;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
        font: 10pt Arial, sans-serif;
        padding: 3mm;
      }
      #print-header { top: 5mm; left: 5mm; min-width: 70mm; }
      #print-header h1 { font-size: 16pt; font-weight: 700; margin: 0 0 2mm; }
      #print-header p { font-size: 8pt; margin: 0; }
      #print-legend { top: 5mm; right: 5mm; max-width: 65mm; max-height: 125mm; overflow: hidden; }
      #print-legend ul { margin: 2mm 0 0; padding-left: 5mm; }
      #print-legend li { margin: 1mm 0; font-size: 8pt; }
    }