/* ── Reset y base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; color: #1a1a2e; }

a { color: #8B6FC0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Mapa principal ───────────────────────────────────────── */
#app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#sidebar {
    width: 320px;
    min-width: 280px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}

#sidebar-header {
    padding: 16px;
    background: #8B6FC0;
    color: white;
}
#sidebar-header h1 { font-size: 18px; font-weight: 700; line-height: 1.3; }
#sidebar-header small { font-size: 12px; font-weight: 400; opacity: 0.8; }

/* Títulos de sección en sidebar: mismo estilo en todo el panel */
#sidebar .search-container label,
#sidebar #recent-cbml-container h3,
#sidebar #lote-info h3,
#sidebar #address-lotes-container h3,
#sidebar #cobama-lotes-container h3 {
    display: block;
    font-weight: 700;
    font-size: 13px;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}
#sidebar .search-container label { text-transform: none; letter-spacing: 0; margin-bottom: 6px; }

.search-mode-switch {
    display: flex;
    gap: 8px;
    padding: 16px 16px 0;
}

.search-mode-btn {
    flex: 1;
    padding: 10px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.search-mode-btn:hover {
    background: #f9fafb;
    border-color: #a78bda;
}

.search-mode-btn.search-mode-btn-active {
    background: #ede3f7;
    border-color: #8b6fc0;
    color: #6b4fa0;
}

#search-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}
#search-container label { font-weight: 600; color: #374151; }

#search-wrapper { position: relative; }

.search-panel-hidden { display: none !important; }

/* Inputs: mismo estilo en todos los campos de búsqueda */
#cbml-input,
#address-input,
#cobama-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
#cbml-input:focus,
#address-input:focus,
#cobama-input:focus { border-color: #A78BDA; }
#cbml-input:focus-visible,
#address-input:focus-visible,
#cobama-input:focus-visible { outline: 2px solid #A78BDA; outline-offset: 2px; }
#cbml-input::placeholder,
#address-input::placeholder,
#cobama-input::placeholder { color: #9ca3af; }

.search-shortcut-hint { font-size: 11px; color: #9ca3af; font-weight: 400; margin-left: 4px; }
.btn-link-inline { font-size: 12px; font-weight: 500; color: #6B4FA0; background: none; border: none; cursor: pointer; margin-left: 8px; padding: 0; text-decoration: underline; }
.btn-link-inline:hover { color: #8B6FC0; }
.btn-link-inline:focus-visible { outline: 2px solid #A78BDA; outline-offset: 2px; border-radius: 2px; }

#suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 220px;
    overflow-y: auto;
}
.suggestion-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:hover { background: #F5F0FA; }
.suggestion-item[aria-selected="true"] { background: #F5F0FA; outline: 2px solid #A78BDA; outline-offset: -2px; }
.suggestion-item-empty { cursor: default; color: #6b7280; font-style: italic; }
.suggestion-item-empty:hover { background: transparent; }
.suggestion-cbml { font-weight: 600; color: #6B4FA0; }
.suggestion-info { font-size: 12px; color: #6b7280; margin-top: 2px; }

#lote-info {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.lote-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lote-panel-heading h3 {
    margin: 0;
}

.lote-panel-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}

.lote-summary-card,
.lote-panel-block {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
}

.lote-summary-card {
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.lote-summary-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #ede3f7;
    color: #6b4fa0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#lote-detail {
    display: grid;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
}

#lote-detail > div {
    padding: 10px 12px;
    border-radius: 8px;
    background: #faf8fc;
    border: 1px solid #efe7f8;
}

#lote-detail strong {
    color: #1f2937;
}

#lote-detail .lote-extra-address {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
}

#fichas-buttons { display: flex; flex-direction: column; gap: 8px; }
/* Botones secundarios del panel: mismo estilo (fondo blanco, borde gris) */
#btn-volver-buscar { width: auto; margin-bottom: 0; }
#btn-copiar-enlace {
    width: 100%;
    margin-bottom: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.lote-actions #btn-copiar-enlace,
.lote-actions #btn-copiar-cbml { width: auto; margin-bottom: 0; }
#btn-copiar-cbml { margin-right: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; background: #fff; border: 1.5px solid #d1d5db; border-radius: 6px; color: #374151; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
#btn-copiar-cbml:hover { background: #f9fafb; border-color: #A78BDA; color: #6B4FA0; }
#btn-copiar-cbml:focus-visible { outline: 2px solid #A78BDA; outline-offset: 2px; }
#btn-volver-buscar:hover,
#btn-copiar-enlace:hover { background: #f9fafb; border-color: #A78BDA; color: #6B4FA0; }
button:focus-visible, .btn:focus-visible, a.btn:focus-visible { outline: 2px solid #A78BDA; outline-offset: 2px; }

.lote-panel-block {
    padding: 14px;
}

.lote-panel-block + .lote-panel-block {
    margin-top: 12px;
}

.lote-block-heading {
    margin-bottom: 12px;
}

.lote-block-heading h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.lote-block-heading p {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    color: #6b7280;
}

.lote-panel-block-primary {
    background: linear-gradient(180deg, #ffffff 0%, #fcfbfd 100%);
}

.lote-panel-block-tools {
    background: #fcfcfd;
}

#ayuda { padding: 16px; color: #6b7280; font-size: 13px; line-height: 1.6; }

/* Búsqueda por dirección */
#address-search-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}
#address-search-container label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; }
#address-search-wrapper { position: relative; margin-bottom: 8px; }
#address-search-btn {
    width: 100%;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
#address-search-btn:hover { background: #f9fafb; border-color: #A78BDA; }

#cbml-search-btn,
.btn-search-primary {
    width: 100%;
    margin-top: 8px;
    background: #8B6FC0;
    color: #fff;
    border-color: #8B6FC0;
}

#cbml-search-btn:hover,
.btn-search-primary:hover {
    background: #7A5FB0;
    border-color: #7A5FB0;
    color: #fff;
    text-decoration: none;
}
#address-suggestions {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
}
#address-suggestions .suggestion-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
#address-suggestions .suggestion-item:last-child { border-bottom: none; }
#address-suggestions .suggestion-item:hover { background: #F5F0FA; }
.search-hint { font-size: 11px; color: #6b7280; margin-top: 6px; line-height: 1.4; }

/* Lista de predios cercanos (búsqueda por dirección) */
#address-lotes-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.address-lotes-dir { font-size: 12px; color: #374151; margin-bottom: 10px; line-height: 1.4; }
#address-lotes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
#address-lotes-list li {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
#address-lotes-list li:hover { background: #F5F0FA; border-color: #A78BDA; }
#address-lotes-list li.address-lote-item-active { background: #ede9fe; border-color: #8b5cf6; box-shadow: inset 0 0 0 1px #8b5cf6; }
#address-lotes-list li.address-lote-item-primary {
    background: #faf7fd;
    border-color: #cbb9e7;
    box-shadow: inset 0 0 0 1px #e4d8f4;
}
#address-lotes-list .lote-cbml { font-weight: 600; color: #6B4FA0; }
#address-lotes-list .lote-meta { font-size: 11px; color: #6b7280; margin-top: 4px; }
.lote-index-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    border-radius: 999px;
    background: #6B4FA0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.lote-index-badge-primary {
    background: #6b4fa0;
}
.lote-primary-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #ede3f7;
    color: #6b4fa0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: middle;
}
.lote-extra-address { font-size: 12px; color: #6b7280; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e5e7eb; }

.map-candidate-number {
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-candidate-number span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(107, 79, 160, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.map-candidate-number-primary span {
    width: 28px;
    height: 28px;
    background: rgba(107, 79, 160, 0.96);
    font-size: 13px;
}

/* Botones: base común (mismo border-radius y padding) */
.btn {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    border: 1.5px solid transparent;
}
.btn-primary { background: #8B6FC0; color: white; border-color: #8B6FC0; }
.btn-primary:hover { background: #7A5FB0; border-color: #7A5FB0; text-decoration: none; color: white; }
.btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.btn-secondary:hover { background: #f9fafb; border-color: #A78BDA; color: #6B4FA0; text-decoration: none; }
.btn-norma-inline { background: #fff; color: #6B4FA0; border-color: #d1d5db; display: inline-block; margin-top: 6px; width: 100%; }
.btn-norma-inline:hover { background: #F5F0FA; border-color: #A78BDA; text-decoration: none; color: #6B4FA0; }
.btn-compare {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: linear-gradient(180deg, #f8f5fc 0%, #efe8f8 100%);
    border: 1.5px solid #cbb9e7;
    color: #4c386f;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.btn-compare:hover {
    background: linear-gradient(180deg, #f3edf9 0%, #e8def6 100%);
    border-color: #a78bda;
    color: #3f2f5f;
    text-decoration: none;
}
.btn-compare-title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}
.btn-compare-meta {
    font-size: 11px;
    font-weight: 500;
    color: #6b5a8d;
    line-height: 1.2;
}

#btn-volver-buscar {
    padding: 9px 12px;
    background: #fff;
    color: #6b4fa0;
    border-color: #d9cdef;
    white-space: nowrap;
}

#btn-volver-buscar:hover {
    background: #f8f5fc;
    border-color: #a78bda;
    color: #5a4387;
}

#map-container { flex: 1; position: relative; min-width: 0; min-height: 400px; }
#map { width: 100%; height: 100%; min-height: 400px; }

/* Atribución Leaflet: no tapar en móvil */
.leaflet-control-attribution { font-size: 10px; padding: 2px 6px; max-width: 60%; }
@media (max-width: 640px) { .leaflet-control-attribution { max-width: 45%; } }

/* Toast (mensajes en pantalla en lugar de alert) */
.toast-container {
    position: fixed;
    bottom: 52px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    max-width: 90%;
}
.toast {
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: auto;
    animation: toast-in 0.25s ease;
}
.toast-error { background: #dc2626; color: #fff; }
.toast-success { background: #059669; color: #fff; }
.toast-info { background: #374151; color: #fff; }
.toast button { margin-left: 10px; background: transparent; border: none; color: inherit; cursor: pointer; opacity: 0.9; font-size: inherit; }
.toast .toast-retry { text-decoration: underline; font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Loading inline y en botón */
.loading-inline { font-size: 12px; color: #6b7280; margin-top: 4px; display: block; }
#address-search-btn:disabled { opacity: 0.7; cursor: not-allowed; }
#address-search-btn .hidden { display: none !important; }

/* Sidebar responsive: toggle en móvil */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1001;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: #8B6FC0;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    align-items: center;
    justify-content: center;
}
.sidebar-toggle:hover { background: #7A5FB0; }
.sidebar-toggle::before { content: "☰"; }
.sidebar-toggle.sidebar-toggle-open::before { content: "✕"; }
@media (max-width: 768px) {
    .sidebar-toggle { display: flex; }
    #sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1000;
    }
    #sidebar.sidebar-open { transform: translateX(0); }
    #sidebar.sidebar-closed { transform: translateX(-100%); }
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 999;
}
@media (max-width: 768px) {
    #app.has-sidebar-open .sidebar-overlay { display: block; }
}

.hidden { display: none !important; }

/* ── Ficha normativa ──────────────────────────────────────── */
#ficha-app {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 40px;
}

#ficha-header {
    padding: 20px 0 16px;
    border-bottom: 2px solid #A78BDA;
    margin-bottom: 24px;
}
#ficha-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.btn-back { background: #EDE3F7; color: #6B4FA0; }
.btn-back:hover { background: #DDD0F0; text-decoration: none; }
.btn-norma { background: #8B6FC0; color: white; }
.btn-norma:hover { background: #7A5FB0; text-decoration: none; color: white; }
.ficha-pdf-link { margin-top: 8px; margin-bottom: 0; }
.btn-link-pdf {
    background: none;
    border: none;
    color: #8B6FC0;
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}
.btn-link-pdf:hover { color: #6B4FA0; }
.btn-link-pdf:disabled { opacity: 0.6; cursor: wait; }

#ficha-title h1 { font-size: 22px; font-weight: 700; color: #6B4FA0; }
#ficha-title h2 { font-size: 16px; font-weight: 600; color: #A78BDA; margin-top: 4px; }
.cbml-label { margin-top: 6px; font-size: 14px; color: #6b7280; }

.ficha-section {
    margin-bottom: 28px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}
.section-title {
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    background: #A78BDA;
}

.tabla-identificacion { width: 100%; border-collapse: collapse; }
.tabla-identificacion th, .tabla-identificacion td {
    padding: 9px 16px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}
.tabla-identificacion th { width: 40%; font-weight: 600; color: #374151; background: #EDE3F7; }
.tabla-identificacion td { color: #1a1a2e; }

.registros-container { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }

.registro-card {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.registro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #EDE3F7;
    font-size: 12px;
}
.capa-tag {
    font-family: monospace;
    font-size: 11px;
    background: #DDD0F0;
    color: #6B4FA0;
    padding: 2px 8px;
    border-radius: 4px;
}
.cobertura-badge {
    font-weight: 700;
    color: #6B4FA0;
}

.tabla-registro { width: 100%; border-collapse: collapse; }
.tabla-registro th, .tabla-registro td {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}
.tabla-registro th { width: 40%; font-weight: 600; color: #374151; background: #F5F0FA; }
.tabla-registro tr:nth-child(even) td { background: #F5F0FA; }
.tabla-identificacion tr:nth-child(even) td { background: #F5F0FA; }
.tabla-registro td { color: #1a1a2e; word-break: break-word; }
.tabla-registro tr:last-child th,
.tabla-registro tr:last-child td { border-bottom: none; }

.sin-datos { padding: 16px; color: #6b7280; font-style: italic; }

/* Notas al final de la ficha. Estuvieron al pie de cada sección y competían con
   los datos: quien consulta quiere ver su predio, no un tratado comparado. Van
   todas juntas al cierre, numeradas y con la sección a la que se refieren, para
   que sigan estando sin interrumpir la lectura. */
.notas-al-pie {
    margin-top: 8px;
    padding: 16px 18px 18px;
    border-top: 2px solid #cbd5e1;
    background: #f8fafc;
}
.notas-al-pie h2 {
    margin: 0 0 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.notas-intro {
    margin: 0 0 10px;
    font-size: 0.8rem;
    color: #94a3b8;
}
.notas-al-pie ol { margin: 0; padding-left: 20px; }
.notas-al-pie li {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #475569;
    margin-bottom: 8px;
}
.notas-al-pie li:last-child { margin-bottom: 0; }
.nota-seccion { font-weight: 600; color: #64748b; }

/* Comparar normas: una tabla por sección, con las dos normas enfrentadas.
   Se usa tabla (y no dos columnas independientes) para que cada atributo quede
   siempre en la misma fila en ambas normas. */
.ficha-compare-app #ficha-content { max-width: none; }
.compare-section { margin-bottom: 24px; }

.tabla-comparacion {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tabla-comparacion thead th {
    background: #6B4FA0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 10px 12px;
    vertical-align: top;
}
.tabla-comparacion thead th .cobertura-badge {
    display: block;
    margin-top: 4px;
    font-weight: 500;
    font-size: 11px;
    opacity: 0.85;
}
.tabla-comparacion .col-atributo { width: 26%; }
.tabla-comparacion tbody th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    color: #4a4a68;
    padding: 8px 12px;
    background: #F5F0FA;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
}
.tabla-comparacion tbody td {
    padding: 8px 12px;
    font-size: 13px;
    color: #1a1a2e;
    border-bottom: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    vertical-align: top;
    word-break: break-word;
}
.tabla-comparacion tbody tr:last-child th,
.tabla-comparacion tbody tr:last-child td { border-bottom: none; }

/* Cabecera de bloque: agrupa los atributos afines de una sección para que la
   forma sea la misma en todo predio y el lector la reconozca. */
.tabla-comparacion tbody tr.fila-bloque th {
    background: #EDE5F7;
    color: #4a3b6b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 7px 12px;
    border-top: 2px solid #D8CCEC;
}

/* Bloque que no aplica en este predio: se dice por qué, no se borra. */
.tabla-comparacion tbody tr.bloque-vacio td {
    color: #6b6b80;
    font-style: italic;
    font-size: 12px;
    background: #FBFAFD;
}

/* Las dos normas dicen lo mismo: una casilla que abarca las dos columnas. Se
   distingue de la casilla combinada por filas —esa va centrada verticalmente—
   en que esta va centrada en horizontal, que es la dirección que abarca. El
   fondo es el mismo tono tenue: las dos dicen «esto vale para las dos
   columnas», y conviene que se lean como la misma idea. */
.tabla-comparacion td.casilla-identica {
    text-align: center;
    background: #FAF7FD;
    color: #4a4a68;
}

/* Qué polígono resolvió la casilla, cuando el predio cae en varios. Va debajo
   del valor y no al lado para no competir con él: es una acotación de alcance
   —«esto no cubre todo el lote»— y no parte del dato. Solo lo llevan las
   casillas que salen del articulado; las de cartografía ya traen la cobertura
   de cada polígono dentro del propio valor. */
.tabla-comparacion .poligono-origen {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 500;
    color: #6B4FA0;
    opacity: 0.85;
}

/* Una sola obligación de la Revisión frente a dos del Acuerdo 48. Se centra
   sobre las filas que abarca para que se lea que rige para las dos, y no como
   el valor de la primera con la segunda en blanco. */
.tabla-comparacion td.casilla-unificada {
    vertical-align: middle;
    background: #FAF7FD;
}

@media (max-width: 700px) {
    /* En pantallas angostas la tabla se desplaza en horizontal antes que
       romper el alineamiento entre las dos normas. */
    .compare-section { overflow-x: auto; }
    .tabla-comparacion { min-width: 560px; }
}

.aviso-incompleta {
    margin: 0 0 10px 0;
    padding: 8px 12px;
    background: #FDECEC;
    border-left: 3px solid #C0392B;
    font-size: 12px;
    color: #7B241C;
}

.aviso-norma {
    margin: 0 0 10px 0;
    padding: 8px 12px;
    background: #FFF7E6;
    border-left: 3px solid #D9A441;
    font-size: 12px;
    color: #6b5320;
}
.nota-campos-ocultos {
    margin: 8px 0 0 0;
    font-size: 11px;
    color: #6b7280;
    font-style: italic;
}
.nota-campos-ocultos a { color: #6B4FA0; }

/* Secciones evaluadas sin afectación: plegadas, pero siempre presentes para
   dejar constancia de que la materia sí se revisó. */
.compare-section-vacia > summary {
    cursor: pointer;
    list-style: revert;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sin-incidencia-tag {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1px 8px;
}

/* Resumen normativo en panel del lote */
.lote-resumen {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 12px;
    color: #374151;
}
.lote-resumen h4 { font-size: 12px; margin: 8px 0 4px 0; color: #6B4FA0; }
.lote-resumen p { margin: 0 0 4px 0; }
.lote-resumen-loading { color: #9ca3af; font-style: italic; }

/* Botón Mi ubicación en mapa */
.btn-milocation {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 500;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-milocation:hover { background: #f5f5f5; }
.btn-milocation:disabled { opacity: 0.6; cursor: wait; }
.btn-milocation::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 2px solid #4b5563;
    border-radius: 999px;
    box-shadow: inset 0 0 0 3px #fff;
}
.btn-milocation::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border-top: 1.5px solid #4b5563;
    border-bottom: 1.5px solid #4b5563;
    transform: rotate(90deg);
}

/* Consultados recientemente: mismo padding y borde que el resto del panel */
#recent-cbml-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Búsqueda por manzana: mismo estilo que dirección */
#cobama-search-wrapper { position: relative; margin-bottom: 8px; }
#cobama-suggestions {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
}
#cobama-suggestions .suggestion-item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f3f4f6; }
#cobama-suggestions .suggestion-item:last-child { border-bottom: none; }
#cobama-suggestions .suggestion-item:hover { background: #F5F0FA; }

#cobama-lotes-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}
.cobama-lotes-list { list-style: none; margin: 8px 0 0 0; padding: 0; }
.cobama-lotes-list li {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.cobama-lotes-list li:hover { background: #F5F0FA; border-color: #A78BDA; }
.cobama-lotes-list li strong { display: block; color: #374151; }
.cobama-lotes-list li small { color: #6b7280; font-size: 12px; }
.btn-small {
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
}
.btn-export-csv:hover { background: #f9fafb; border-color: #A78BDA; color: #6B4FA0; }

.recent-cbml-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.recent-cbml-list li { margin: 0; }
.recent-cbml-list .recent-cbml-chip {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: #fff;
    color: #374151;
    cursor: pointer;
    border: 1.5px solid #d1d5db;
    transition: border-color 0.15s, background 0.15s;
}
.recent-cbml-list .recent-cbml-chip:hover { background: #F5F0FA; border-color: #A78BDA; color: #6B4FA0; }

.ficha-normativa-link { margin-top: 8px; margin-bottom: 0; }

/* Acciones lote: Copiar enlace, Compartir, Imprimir mapa */
.lote-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.lote-actions .btn { flex: 1; min-width: 120px; }
.btn-compartir, .btn-imprimir-mapa { background: #fff; border: 1.5px solid #d1d5db; color: #374151; }
.btn-compartir:hover, .btn-imprimir-mapa:hover { background: #f9fafb; border-color: #A78BDA; color: #6B4FA0; }

@media (max-width: 640px) {
    .lote-panel-header {
        flex-direction: column;
    }

    #btn-volver-buscar {
        width: 100%;
    }

    .lote-actions .btn {
        min-width: calc(50% - 4px);
    }
}

/* Glosario */
.glosario-container { border-bottom: 1px solid #e5e7eb; }
.glosario-toggle {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #6B4FA0;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
}
.glosario-toggle:hover { background: #F5F0FA; border-color: #A78BDA; }
.glosario-toggle[aria-expanded="true"] { border-color: #A78BDA; background: #EDE3F7; }
.glosario-content { padding-top: 12px; }
.glosario-list { font-size: 12px; color: #374151; line-height: 1.5; margin: 0; }
.glosario-list dt { font-weight: 700; color: #6B4FA0; margin-top: 8px; }
.glosario-list dt:first-child { margin-top: 0; }
.glosario-list dd { margin: 2px 0 0 0; padding-left: 0; }

/* Imprimir: ocultar sidebar y controles, mostrar solo mapa y título */
@media print {
    .no-print, #sidebar, .sidebar-toggle, .sidebar-overlay, .toast-container { display: none !important; }
    #app { display: block !important; }
    #map-container { position: fixed !important; inset: 0 !important; }
    #map { height: 100% !important; }
    .print-only { display: block !important; position: fixed; top: 12px; left: 12px; right: 12px; z-index: 9999; background: rgba(255,255,255,0.95); padding: 10px 14px; border-radius: 6px; font-size: 14px; font-weight: 600; color: #374151; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
}
.print-only { display: none; }

/* Accesibilidad: reducir movimiento si el usuario lo prefiere (solo toasts y controles del panel) */
@media (prefers-reduced-motion: reduce) {
    .toast { animation: none; }
    .sidebar-toggle, .btn, #cbml-input, #address-input, #cobama-input { transition-duration: 0.05s; }
}

/* ── Búsqueda en mapa (clic en punto) ──────────────────── */
.map-crosshair { cursor: crosshair !important; }
.map-crosshair .leaflet-interactive { cursor: crosshair !important; }

#map-search-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}
#map-search-container label { display: block; font-weight: 600; margin-bottom: 6px; color: #374151; }
.map-search-instructions { font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 0; }

#map-lotes-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
#map-lotes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
}
#map-lotes-list li {
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
#map-lotes-list li:hover { background: #F5F0FA; border-color: #A78BDA; }
#map-lotes-list li.address-lote-item-active { background: #ede9fe; border-color: #8b5cf6; box-shadow: inset 0 0 0 1px #8b5cf6; }
#map-lotes-list li.address-lote-item-primary {
    background: #faf7fd;
    border-color: #cbb9e7;
    box-shadow: inset 0 0 0 1px #e4d8f4;
}
#map-lotes-list .lote-cbml { font-weight: 600; color: #6B4FA0; }
#map-lotes-list .lote-meta { font-size: 11px; color: #6b7280; margin-top: 4px; }

/* Comparada: la fila donde las dos normas dicen cosas distintas. Es la
   información central de la vista, así que tiene que verse: un filete al margen
   y un fondo cálido, distinto de la familia lila que usa la tabla para su
   estructura (bloques y casillas combinadas), para que no se confunda un cambio
   normativo con una marca de maquetación.

   La clase se emitía desde hacía tiempo sin ninguna regla, así que una fila que
   difería se veía igual que una donde las dos normas coinciden. */
.tabla-comparacion tbody tr.difiere th[scope="row"] {
    box-shadow: inset 3px 0 0 #C98A2E;
}
.tabla-comparacion tbody tr.difiere th,
.tabla-comparacion tbody tr.difiere td {
    background: #FDF6EA;
}
.tabla-comparacion tbody tr.difiere td.casilla-unificada {
    /* La casilla combinada conserva su fondo lila: abarca varias filas y solo
       algunas pueden diferir, así que teñirla entera afirmaría de más. */
    background: #FAF7FD;
}

/* Comparada: filas que una norma nombra y la otra no. En gris y sin el realce de
   "cambió", porque no cambió nada — sencillamente la otra norma no usa ese
   atributo. Se muestran igual: mandar al lector a la ficha suelta de cada norma
   para enterarse de qué falta convierte la comparación en un índice. */
.tabla-comparacion tr.sin-equivalente th,
.tabla-comparacion tr.sin-equivalente td {
    color: #94a3b8;
    background: #fbfcfd;
}
.tabla-comparacion tr.sin-equivalente td:empty::after,
.tabla-comparacion tr.sin-equivalente td:blank::after { content: "—"; }