:root {
    --bg: #f3f7f7;
    --panel: #ffffff;
    --text: #172033;
    --muted: #64748b;
    --line: #dbe3ef;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --danger: #dc2626;
    --success: #059669;
    --warning: #d97706;
    --radius: 16px;
    --shadow: 0 12px 38px rgba(15, 23, 42, .09);
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.topbar {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: relative;
    z-index: 900;
}

.topbar strong {
    display: block;
    font-size: 17px;
}

.topbar span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
}

.topbar nav {
    display: flex;
    gap: 14px;
    align-items: center;
}

.layout,
.admin-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    height: calc(100vh - 64px);
    min-height: calc(100vh - 64px);
}

.sidebar {
    overflow: auto;
    padding: 16px;
    border-right: 1px solid var(--line);
    background: #eef3fb;
    min-width: 0;
}

.admin-sidebar {
    width: 380px;
}

#map {
    position: relative;
    min-height: 400px;
    height: 100%;
    width: 100%;
    min-width: 0;
    z-index: 1;
    overflow: hidden;
}

.leaflet-container {
    width: 100%;
    height: 100%;
    background: #dfe7f3;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
}

.panel h2 {
    font-size: 16px;
    margin: 0 0 12px;
}

.panel p {
    margin: 0 0 10px;
}

label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

label input,
label select,
label textarea,
input[type='search'] {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
}

textarea {
    resize: vertical;
}

input[type='checkbox'] {
    margin-right: 8px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
}

.btn:hover {
    filter: brightness(.98);
    text-decoration: none;
}

.btn.primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary-dark);
}

.btn.danger {
    background: var(--danger);
    color: white;
    border-color: var(--danger);
}

.btn.full {
    width: 100%;
    margin-top: 8px;
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.small {
    font-size: 12.5px;
}

.muted {
    color: var(--muted);
}

.hidden {
    display: none !important;
}

.valid { color: var(--success); }
.invalid { color: var(--danger); }
.page-container { max-width: 1400px; margin: 0 auto; padding: 20px; }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #eef3fb; position: sticky; top: 0; }

.alert {
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.alert.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.stats dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    margin: 0;
    font-size: 14px;
}

.stats dt {
    color: var(--muted);
}

.stats dd {
    margin: 0;
    font-weight: 800;
}

.auth-body {
    display: grid;
    place-items: center;
    padding: 20px;
    min-height: 100vh;
}

.auth-card {
    width: min(430px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 26px;
}

.auth-card h1 {
    margin: 0 0 8px;
    font-size: 24px;
}

.auth-card p {
    color: var(--muted);
}

.result-item {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    background: #fff;
}

.result-item:hover {
    border-color: var(--primary);
}

.result-item strong {
    display: block;
    font-size: 14px;
}

.result-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    background: #e2e8f0;
    color: #334155;
    margin-right: 5px;
}

.badge.validado {
    background: #dcfce7;
    color: #166534;
}

.badge.pendiente {
    background: #fef3c7;
    color: #92400e;
}

.badge.dudoso {
    background: #fee2e2;
    color: #991b1b;
}

.leaflet-popup-content strong {
    font-size: 14px;
}

.leaflet-popup-content .meta {
    color: #64748b;
    font-size: 12px;
    margin-top: 4px;
}

@media (max-width: 900px) {
    .layout,
    .admin-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(320px, 42vh) minmax(0, 1fr);
        height: auto;
        min-height: calc(100vh - 64px);
    }

    .sidebar {
        order: 2;
        border-right: none;
        border-top: 1px solid var(--line);
    }

    #map {
        order: 1;
        min-height: 320px;
        height: 42vh;
    }

    .topbar {
        height: auto;
        min-height: 64px;
        align-items: flex-start;
        flex-direction: column;
        padding: 12px 16px;
    }

    .topbar nav {
        flex-wrap: wrap;
    }
}
/* =========================================================
   FIX CRÍTICO LEAFLET
   Si leaflet.css externo no carga bien, el mapa se ve en
   cuadrantes sueltos. Estas reglas fuerzan la estructura.
   ========================================================= */

.leaflet-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: #dfe7f3;
    outline-offset: 1px;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
    user-select: none;
    -webkit-user-drag: none;
}

.leaflet-tile {
    width: 256px;
    height: 256px;
    max-width: none !important;
    max-height: none !important;
    padding: 0;
    margin: 0;
    border: 0;
}

.leaflet-safari .leaflet-tile {
    image-rendering: -webkit-optimize-contrast;
}

.leaflet-tile-container {
    pointer-events: none;
}

.leaflet-zoom-animated {
    transform-origin: 0 0;
}

.leaflet-map-pane {
    z-index: 400;
}

.leaflet-tile-pane {
    z-index: 200;
}

.leaflet-overlay-pane {
    z-index: 400;
}

.leaflet-shadow-pane {
    z-index: 500;
}

.leaflet-marker-pane {
    z-index: 600;
}

.leaflet-tooltip-pane {
    z-index: 650;
}

.leaflet-popup-pane {
    z-index: 700;
}

.leaflet-control {
    position: relative;
    z-index: 800;
    pointer-events: auto;
}

.leaflet-top,
.leaflet-bottom {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
}

.leaflet-top {
    top: 0;
}

.leaflet-right {
    right: 0;
}

.leaflet-bottom {
    bottom: 0;
}

.leaflet-left {
    left: 0;
}

.leaflet-control {
    float: left;
    clear: both;
}

.leaflet-right .leaflet-control {
    float: right;
}

.leaflet-top .leaflet-control {
    margin-top: 10px;
}

.leaflet-bottom .leaflet-control {
    margin-bottom: 10px;
}

.leaflet-left .leaflet-control {
    margin-left: 10px;
}

.leaflet-right .leaflet-control {
    margin-right: 10px;
}

.leaflet-control-zoom {
    border: 2px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
    background: #fff;
}

.leaflet-control-zoom a {
    display: block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    color: #000;
    background: #fff;
    font-weight: bold;
    font-size: 18px;
}

.leaflet-control-zoom a:hover {
    background: #f4f4f4;
    text-decoration: none;
}

.leaflet-control-attribution {
    background: rgba(255, 255, 255, .85);
    margin: 0;
    padding: 0 5px;
    color: #333;
    font-size: 11px;
}

.leaflet-popup {
    position: absolute;
    text-align: center;
    margin-bottom: 20px;
}

.leaflet-popup-content-wrapper {
    padding: 1px;
    text-align: left;
    border-radius: 12px;
    background: white;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}

.leaflet-popup-content {
    margin: 13px 19px;
    line-height: 1.4;
}

.leaflet-popup-tip-container {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    overflow: hidden;
    pointer-events: none;
}

.leaflet-popup-tip {
    width: 17px;
    height: 17px;
    padding: 1px;
    margin: -10px auto 0;
    transform: rotate(45deg);
    background: white;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}

.leaflet-interactive {
    cursor: pointer;
}

.leaflet-grab {
    cursor: grab;
}

.leaflet-dragging .leaflet-grab {
    cursor: grabbing;
}

.leaflet-fade-anim .leaflet-popup {
    opacity: 0;
    transition: opacity .2s linear;
}

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    opacity: 1;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: transform .25s cubic-bezier(0, 0, .25, 1);
}
/* =========================================================
   Búsqueda operativa: calles, números, intersecciones
   ========================================================= */
.button-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.button-row .btn {
    flex: 1;
}

.search-result-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.search-result-item {
    width: 100%;
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
}

.search-result-item:hover,
.search-result-item:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.search-result-item strong {
    display: block;
    font-size: 14px;
}

.search-result-item span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

.field-grid {
    display: grid;
    gap: 10px;
}

.field-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
    .field-grid.two,
    .field-grid.three {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   V2.4 · Experiencia de alta guiada y renovación visual
   ========================================================= */
.app-body { min-height: 100%; background: linear-gradient(180deg,#eef8f7 0,#f7f9fb 360px); }
.app-header { min-height: 76px; padding: 12px 28px; display:flex; align-items:center; gap:14px; background:#fff; border-bottom:1px solid #dce9e7; box-shadow:0 5px 22px rgba(15,118,110,.07); position:sticky; top:0; z-index:1100; }
.app-header nav { margin-left:auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.app-header nav a,.topbar nav a { font-weight:700; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg,#0f766e,#14b8a6); color:#fff; font-weight:900; letter-spacing:-1px; box-shadow:0 8px 20px rgba(15,118,110,.22); }
.brand-copy strong,.brand-copy span { display:block; }.brand-copy strong{font-size:16px}.brand-copy span{font-size:12px;color:var(--muted);margin-top:2px}
.nav-primary { color:#fff!important; background:var(--primary); padding:9px 13px; border-radius:10px; text-decoration:none!important; }
.affiliate-workspace { width:min(1240px,calc(100% - 32px)); margin:26px auto 60px; }
.hero-card { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:28px 32px; color:#fff; border-radius:22px; background:radial-gradient(circle at 90% 20%,rgba(255,255,255,.18),transparent 28%),linear-gradient(125deg,#134e4a,#0f766e 62%,#0d9488); box-shadow:0 20px 45px rgba(15,76,70,.2); margin-bottom:20px; }
.hero-card h1 { margin:4px 0 6px; font-size:clamp(28px,4vw,42px); letter-spacing:-1.2px; }.hero-card p{margin:0;color:#d8fffa;max-width:650px}.eyebrow{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.13em;color:#0d9488}.hero-card .eyebrow{color:#99f6e4}
.hero-card.compact{padding:20px 24px}.hero-card.compact h1{font-size:30px}.hero-card.compact .btn{background:#fff;color:#0f766e;border-color:#fff}
.step-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.step-pills span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.12);font-size:12px;font-weight:800;color:#ccfbf1}.step-pills .active{background:#fff;color:#0f766e}
.affiliate-form { display:grid; gap:18px; }.workflow-card{background:#fff;border:1px solid #dce8e7;border-radius:20px;padding:24px 26px;box-shadow:0 8px 30px rgba(15,23,42,.055)}
.section-heading{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}.section-heading h2{font-size:20px;margin:0 0 4px}.section-heading p{margin:0;color:var(--muted)}.section-number{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:11px;background:#ccfbf1;color:#0f766e;font-weight:900}
.workflow-card label{color:#253044}.workflow-card input,.workflow-card select,.workflow-card textarea{border-color:#cfdfdd;background:#fbfdfd;transition:.18s}.workflow-card input:focus,.workflow-card select:focus,.workflow-card textarea:focus{outline:none;border-color:#14b8a6;box-shadow:0 0 0 4px rgba(20,184,166,.12);background:#fff}
.field-help{display:block;font-size:12px;color:var(--muted);margin-top:5px}.context-banner{padding:12px 14px;border-radius:12px;background:#f0fdfa;border:1px solid #99f6e4;color:#115e59}.map-search-bar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;margin-bottom:12px}.map-search-bar input{width:100%;padding:11px 13px;border:1px solid #cfdfdd;border-radius:11px;font-size:14px}
.affiliate-map{height:520px;width:100%;border-radius:16px;border:1px solid #bdd8d4;overflow:hidden;background:#dfeae8}.affiliate-map.map-marking{cursor:crosshair;box-shadow:0 0 0 5px rgba(20,184,166,.18)}
.inline-results{display:flex;gap:8px;overflow-x:auto;margin:0 0 12px;padding-bottom:2px}.result-chip{min-width:190px;text-align:left;padding:9px 11px;border:1px solid #cfe0de;border-radius:10px;background:#fff;cursor:pointer}.result-chip:hover{border-color:#14b8a6;background:#f0fdfa}.result-chip strong,.result-chip span{display:block}.result-chip span{font-size:11px;color:var(--muted);margin-top:3px}
.coordinate-panel{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:14px;border-radius:14px;background:#f1f7f6;margin-top:14px}.coordinate-panel span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#64748b}.coordinate-panel input,.coordinate-panel select{width:100%;margin-top:5px;padding:9px;border:1px solid #cfdfdd;border-radius:9px;background:#fff}.confirmation-check{padding:13px 15px;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;margin:12px 0!important}.form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.btn.large{min-height:48px;padding:12px 20px;font-size:15px}.notice{padding:13px 15px;border-radius:12px;margin:12px 0}.notice.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}.notice.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}.notice.info{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
.auth-v24{background:radial-gradient(circle at 20% 10%,#ccfbf1 0,transparent 30%),linear-gradient(145deg,#f0fdfa,#eef2f7 60%)}.auth-card-v24{width:min(440px,100%);padding:32px;border:none;border-radius:22px;box-shadow:0 24px 65px rgba(15,76,70,.16)}.auth-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}.auth-brand>span{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#0f766e;color:#fff;font-weight:900}.auth-brand strong,.auth-brand small{display:block}.auth-brand small{color:var(--muted);margin-top:2px}.auth-card-v24 h1{font-size:32px;margin:5px 0}.auth-card-v24>p{color:var(--muted);line-height:1.5}
.sidebar{background:linear-gradient(180deg,#eaf4f3,#edf2f7)}.panel{border-color:#d7e4e3}.topbar{border-bottom-color:#d7e4e3}.result-item{transition:.18s}.result-item:hover{transform:translateY(-1px);border-color:#5eead4}
@media(max-width:800px){.app-header{align-items:flex-start;flex-wrap:wrap;padding:12px 16px}.app-header nav{width:100%;margin-left:0;gap:12px}.affiliate-workspace{width:min(100% - 20px,1240px);margin-top:12px}.hero-card{padding:22px;display:block}.step-pills{justify-content:flex-start;margin-top:18px}.workflow-card{padding:18px}.field-grid.three,.field-grid.four,.coordinate-panel{grid-template-columns:1fr}.map-search-bar{grid-template-columns:1fr}.affiliate-map{height:430px}.form-actions .btn{width:100%}}