/* ─────────────────────────────────────────
   1. RESET + BODY
───────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Leaflet: neutralizar box-sizing del reset global */
.leaflet-container img {
    box-sizing: content-box;
    max-width: none;
}

/* Leaflet: evitar gaps entre tiles sin degradar la calidad de renderizado */
.leaflet-tile {
    image-rendering: auto;
}

body {
    background: var(--bg);
}


/* ─────────────────────────────────────────
   2. TIPOGRAFÍA BASE
───────────────────────────────────────── */
h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--base);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
}

h2.titulo-seccion {
    font-weight: 600;
    font-size: var(--fs-xl);
    color: var(--acento-2);
}


h2.titulo-seccion-xxxl {
    font-weight: 800;
    font-size: var(--fs-xxxl);
    color: var(--base);
}

h2.titulo-seccion-xxxl span {
    color: var(--acento-2);
}


h3 {
    font-family: var(--display);
    font-weight: 800;
    font-size: var(--fs-xl);
}



h3.tarjeta-titulo {
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--acento-2);
}

h5 {
    font-weight: 600;
    font-size: var(--fs-m);
    color: var(--acento-2);
}

p {
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-m);
    color: var(--base);
}

.tarjeta p {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--acento-2);
}

.main p {
    font-size: var(--fs-sm);
    color: var(--base);
    margin: 25px 0;
}

p a:link{
    text-decoration: none;
    color: var(--acento);
    transition: all .5s ease;
}

p a:visited{
    text-decoration: none;
    color: var(--acento);
    transition: all .5s ease
}

p a:hover{
    color: var(--acento-2);
    transition: all .5s ease
}




/* ─────────────────────────────────────────
   3. UTILIDADES
───────────────────────────────────────── */

/* Colores de fondo */
.bg-1       { background-color: var(--base); }
.bg-2       { background-color: var(--acento-2); }
.bg-imagen  {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


/*Imagenes responsive*/
.img-100 {
    width: 100%;
    height: auto;
}

/* Espaciadores */
.pd-tb-25p { padding: 25px 0px }
.pd-25p { padding: 25px; }
.pd-5   { padding: 5%; }

/* Grid */
.grid      { display: grid; gap: 1rem; }
.grid-1    { grid-template-columns: 1fr; }
.grid-2    { grid-template-columns: 1fr 1fr; }
.grid-3    { grid-template-columns: 1fr 1fr 1fr; }
.grid-4    { grid-template-columns: repeat(4, 1fr); }
.grid-7030 { grid-template-columns: 7fr 3fr; }
.grid-6040 { grid-template-columns: 6fr 4fr; }

@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
    .grid-2, .grid-3, .grid-4, .grid-7030, .grid-6040 { grid-template-columns: 1fr; }
}

/* Flex helpers */
.flex         { display: flex; }
.flex-between { justify-content: space-between; }
.flex-center  { align-items: center; }
.flex-wrap    { flex-wrap: wrap; }
.gap-sm       { gap: 0.5rem; }
.gap-md       { gap: 1rem; }


/* ─────────────────────────────────────────
   4. HEADER
───────────────────────────────────────── */
header {
    background: var(--bg-2);
    border-bottom: 1px solid #e0d9d0;
    position: relative;
    z-index: 1002;
}

.header-inner {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    align-items: center;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    height: 56px;
}

.header-logo h2 {
    font-size: var(--fs-lg);
    letter-spacing: -0.02em;
}

/* Nav escritorio */
#header-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

#header-nav ul li a {
    font-family: var(--display);
    font-size: var(--fs-m);
    font-weight: 500;
    color: var(--ligero);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
}

#header-nav ul li a:hover {
    color: var(--base);
}

/* Acciones del header */
.header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

.btn-nuevo-reporte {
    background: var(--acento);
    color: var(--bg-2);
    border: none;
    border-radius: 8px;
    padding: 0.45rem 1rem;
    font-family: var(--display);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s;
}

.btn-nuevo-reporte:hover {
    opacity: 0.88;
}

/* Dropdown usuario */
#usuario {
    position: relative;
}

.usuario-btn,
.nav-movil-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--base);
    border-radius: 6px;
    transition: background 0.15s;
}

.usuario-btn:hover,
.nav-movil-btn:hover {
    background: rgba(26, 77, 124, 0.08);
}

.usuario-dropdown,
.nav-movil-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-2);
    border: 1px solid #e0d9d0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    z-index: 200;
}

.usuario-dropdown  { min-width: 160px; }
.nav-movil-dropdown { min-width: 180px; }

.usuario-dropdown.open,
.nav-movil-dropdown.open {
    display: block;
}

.usuario-dropdown a,
.nav-movil-dropdown a {
    display: block;
    font-family: var(--display);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--base);
    text-decoration: none;
    transition: background 0.12s;
}

.usuario-dropdown a   { padding: 0.65rem 1rem; }
.nav-movil-dropdown a {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid #e0d9d0;
}

.nav-movil-dropdown a:last-child {
    border-bottom: none;
}

.usuario-dropdown a:hover,
.nav-movil-dropdown a:hover {
    background: var(--bg);
    color: var(--acento);
}

/* Nav móvil */
#header-nav-movil {
    display: none;
    position: relative;
}

/* Header responsive */
@media (max-width: 768px) {
    .header-inner {
        grid-template-columns: 1fr auto;
    }
    .header-logo    { grid-column: 1; }
    .header-actions { grid-column: 2; }
    #header-nav       { display: none; }
    #header-nav-movil { display: block; }
}




/*Footer*/

footer {
    background-color: var(--base);
}

footer h3{
    color: var(--bg-2);
}

footer p{
    color: var(--bg-2)!important;
}

/* Newsletter form */
.newsletter-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 5px 5px 5px 16px;
    gap: 0;
    margin: 1.25rem 0 0.75rem;
}

.newsletter-form input[type="email"] {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--bg-2);
    padding: 0.4rem 0;
    min-width: 0;
}

.newsletter-form input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.newsletter-form button {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--acento);
    color: var(--bg-2);
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.1rem;
    font-family: var(--display);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    flex-shrink: 0;
}

.newsletter-form button:hover {
    opacity: 0.88;
}

/* Newsletter meta */
.newsletter-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.newsletter-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-meta span::before {
    content: '✓';
    color: var(--acento-2);
    font-size: 0.7rem;
}

 
 footer .menu-footer{
    display: flex;
    flex-direction: column;
    gap: 20px;
 }
 
 .menu-footer a:link {
    text-decoration: none !important;
    color: var(--acento);
 }


    .menu-footer a:visited {
    color: var(--bg-2);
 }

  .menu-footer a:hover {
    color: var(--acento);
 }



/* ─────────────────────────────────────────
   5. LAYOUT GENERAL
───────────────────────────────────────── */
#general .container,
#general .container-full {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#general .container {
    max-width: 1280px;
    margin: 0 auto;
}

#general .sidebar {
    flex: 0 0 min(20%, 240px);
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    padding: 2rem 1rem;
}

#general .sidebar nav ul {
    list-style: none;
    border-right: 1.5px solid #e0d9d0;
}

#general .sidebar nav ul li {
    font-family: var(--display);
    font-size: var(--fs-m);
    font-weight: 500;
    color: var(--ligero);
    padding: 0.55rem 1rem 0.55rem 0;
    margin-right: -1.5px;
    border-right: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}

#general .sidebar nav ul li:hover {
    color: var(--base);
}

#general .sidebar nav ul li.active {
    color: var(--acento-2);
    border-right-color: var(--acento-2);
    font-weight: 600;
}

#general .main {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    padding: 2rem;
}

/* Layout responsive */
@media (max-width: 1024px) {
    #general .container {
        max-width: 960px;
    }
}

@media (max-width: 768px) {
    #general .container {
        max-width: 100%;
        flex-direction: column;
    }
    #general .container-full {
        flex-direction: column;
    }
    #general .sidebar {
        flex: 0 0 auto;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 1001;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        background: var(--bg);
        border-right: none;
        border-bottom: none;
        padding: 0.6rem 1rem;
    }
    #general .sidebar nav ul {
        display: flex;
        justify-content: center;
        gap: 1.2rem;
        border-right: none;
        border-bottom: 1.5px solid #e0d9d0;
        padding-bottom: 0.4rem;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #general .sidebar nav ul::-webkit-scrollbar { display: none; }
    #general .sidebar nav ul li {
        white-space: nowrap;
        border-right: none;
        border-bottom: 3px solid transparent;
        margin-right: 0;
        margin-bottom: -1.5px;
        padding: 0.3rem 0.1rem;
    }
    #general .sidebar nav ul li.active {
        border-bottom-color: var(--acento-2);
        border-right-color: transparent;
    }

    /* Nav de progreso de formulario_reporte.php (#form-progreso-nav): en vez del
       texto completo (8 secciones no caben en una pantalla angosta), en móvil se
       ve como una barra de 8 segmentos que se va llenando de color conforme se
       hace scroll por el formulario. El texto sigue en el DOM (aria-label + oculto
       visualmente) para lectores de pantalla. En escritorio no se toca nada, ahí
       sigue el texto completo con las reglas de arriba (#general .sidebar nav ul li). */
    #general #form-progreso-nav {
        display: flex;
        gap: 4px;
        border-right: none;
        border-bottom: none;
        overflow-x: visible;
        padding-bottom: 0;
    }
    #general #form-progreso-nav li {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        padding: 0.7rem 0 0.5rem;
        border: none;
        background: none;
        font-size: 0;
        line-height: 0;
        color: transparent;
        white-space: normal;
    }
    #general #form-progreso-nav li::before {
        content: '';
        display: block;
        height: 5px;
        border-radius: 3px;
        background: #e0d9d0;
        transition: background-color 0.25s ease;
    }
    #general #form-progreso-nav li.active::before,
    #general #form-progreso-nav li.completado::before {
        background: var(--acento-2);
    }
}


/* ─────────────────────────────────────────
   6. COMPONENTES
───────────────────────────────────────── */
.tarjeta {
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border-radius: 25px;
    padding: 35px;
    gap: 0.5rem;
    margin: 40px 0;
}


/* ─────────────────────────────────────────
   7. MAPA (formulario_reporte)
───────────────────────────────────────── */
.map-wrapper { position: relative; margin-top: 1rem; }

#map {
    width: 100%;
    height: 380px;
    cursor: default;
}
#map.drawing { cursor: crosshair; }
#map.snap    { cursor: pointer; }

/* Controles de capa */
.map-layer-controls {
    position: absolute; bottom: 10px; left: 10px; z-index: 500;
    display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px;
    max-width: calc(100% - 20px);
}
.btn-layer {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px; cursor: pointer;
    border: 1.5px solid rgba(0,0,0,0.15);
    background: #fff; color: #555;
    font-family: var(--display); font-size: var(--fs-xs); font-weight: 500;
    box-shadow: 0 1px 5px rgba(0,0,0,0.15);
    transition: all 0.15s; white-space: nowrap;
}
.btn-layer.sat:hover  { border-color: var(--base); color: var(--base); }
.btn-layer.sat.active { background: var(--base); border-color: var(--base); color: #fff; }
.btn-layer.duc:hover  { border-color: #c06000; color: #c06000; }
.btn-layer.duc.active { background: #c06000; border-color: #c06000; color: #fff; }
/* Rosa, para no chocar con el azul del botón de satélite ni con ninguno de los
   5 colores de la capa de ductos, que conviven con los pozos en el mismo mapa. */
.btn-layer.poz:hover  { border-color: #c2185b; color: #c2185b; }
.btn-layer.poz.active { background: #c2185b; border-color: #c2185b; color: #fff; }

/* En móvil los 3 controles pasan a una barra de ancho completo pegada al borde
   inferior del mapa, solo con el ícono: con su texto se partían en dos renglones
   y tapaban buena parte de la vista. Queda un respiro abajo para no cubrir el
   crédito de OpenStreetMap, que tiene que seguir visible. */
@media (max-width: 640px) {
    .map-layer-controls {
        left: 0; right: 0; bottom: 18px;
        max-width: none; flex-wrap: nowrap; gap: 0;
    }
    .btn-layer {
        flex: 1 1 0; justify-content: center;
        padding: 0.62rem 0.3rem;
        border-radius: 0; border-left-width: 0;
        box-shadow: 0 -1px 5px rgba(0,0,0,0.12);
        gap: 0;
    }
    .btn-layer:first-child { border-left-width: 1.5px; }
    .btn-layer svg { width: 20px; height: 20px; }
    .btn-layer-txt { display: none; }
}

/* Área de afectación */
.area-label {
    display: flex; align-items: baseline; gap: 0.5rem;
    margin-top: 1.4rem; margin-bottom: 0.4rem;
    font-family: var(--display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--base);
    letter-spacing: 0.07em;
}
.area-hint { font-size: 0.75rem; color: var(--ligero); font-weight: 300; }

/* Selector de modo de dibujo */
.draw-tab-selector {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.draw-tab-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
    padding: 0.7rem 0.4rem; 
    border: 1.5px solid #e0d9d0; background: var(--bg);
    color: var(--ligero); cursor: pointer;
    font-size: var(--fs-sm); font-family: var(--display); font-weight: 500;
    transition: all 0.15s; text-align: center; line-height: 1.3;
}
.draw-tab-btn:hover  { border-color: var(--acento-2); color: var(--acento-2); }
.draw-tab-btn.active { background: var(--acento-2); border-color: var(--acento-2); color: #fff; }

.draw-panel        { display: none; }
.draw-panel.active { display: block; }
.panel-desc        { font-size: var(--fs-sm); color: var(--ligero); margin: 0 0 0.6rem; line-height: 1.5; }
p.panel-desc{
    margin: 10px 0;
    font-weight: 400;
}

.draw-controls { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.btn-draw {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.7rem 0.9rem; border-radius: 25px;
    font-size: var(--fs-sm); cursor: pointer;
    font-family: var(--display); font-weight: 500;
    transition: all 0.15s;
    border: 1px solid #e0d9d0;
    background: var(--bg-2); color: var(--ligero);
    flex: 1 1 200px;
}
.btn-draw:hover        { border-color: var(--acento); color: var(--acento); }
.btn-draw.active       { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn-draw.danger       { border-color: var(--acento); color: var(--acento); }
.btn-draw.danger:hover { background: var(--acento); color: #fff; }

.btn-geo {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 0.9rem; border: 1px solid #e0d9d0;
    color: var(--ligero); background: var(--bg-2);
    border-radius: 25px; font-size: var(--fs-sm);
    font-weight: 500; cursor: pointer;
    font-family: var(--display); transition: all 0.15s;
    white-space: nowrap; flex: 1 1 200px;
}
.btn-geo:hover { border-color: var(--acento-2); color: var(--acento-2); }

/* Slider de radio */
.conditional         { display: none; }
.conditional.visible { display: block; }

.slider-section {
    margin-top: 1rem; padding: 1rem 1.1rem;
    border: 1px solid #e0d9d0; border-radius: 10px; width: 100%;
}
.slider-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.75rem; }
.slider-label  { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.07em; color: var(--acento); font-weight: 500; font-family: var(--display); }
.radio-display { font-size: 1.4rem; font-weight: 500; color: var(--base); font-family: var(--mono); }
.radio-display span { font-size: 1rem; font-weight: 600; color: var(--base); margin-left: 0.1rem; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%; height: 4px; border-radius: 2px;
    background: linear-gradient(to right, var(--acento-2) 0%, var(--acento-2) var(--pct,1%), #e0d9d0 var(--pct,1%), #e0d9d0 100%);
    outline: none; cursor: pointer; margin-bottom: 0.5rem; border: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--bg-2); border: 2px solid var(--acento-2);
    box-shadow: 0 1px 6px rgba(0,0,0,0.18); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--bg-2); border: 2px solid var(--acento-2);
    box-shadow: 0 1px 6px rgba(0,0,0,0.18); cursor: pointer;
}
.slider-ticks { display: flex; justify-content: space-between; font-size: 0.66rem; color: var(--ligero); font-family: var(--mono); }

/* Info del polígono */
.poly-info        { margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ligero); min-height: 1.3rem; font-family: var(--mono); }
.poly-info strong { color: var(--base); }
.map-hint         { font-size: 0.75rem; color: var(--ligero); margin-top: 0.3rem; line-height: 1.5; }

/* Buscador geográfico */
.search-box       { display: flex; gap: 0.4rem; position: relative; }
.search-box input { flex: 1; }

.btn-search          { padding: 0.5rem 1rem; background: var(--acento); color: #fff; border: none;  font-size: var(--fs-sm); cursor: pointer; font-family: var(--display); font-weight: 500; white-space: nowrap; transition: background 0.15s; }
.btn-search:hover    { background: var(--base); }
.btn-search:disabled { background: #e0d9d0; cursor: default; color: var(--ligero); }

.search-results {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
    background: var(--bg-2); border: 1px solid #e0d9d0;
    border-radius: 10px; z-index: 1001;
    max-height: 220px; overflow-y: auto; display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.search-result-item {
    padding: 0.6rem 0.9rem; font-size: var(--fs-sm);
    color: var(--base); cursor: pointer;
    border-bottom: 1px solid #e0d9d0; line-height: 1.4;
    font-family: var(--display);
}
.search-result-item:hover { background: var(--bg); }
.result-sub       { font-size: 0.74rem; color: var(--ligero); }
.search-no-results { padding: 0.6rem 0.9rem; font-size: var(--fs-sm); color: var(--ligero); }
.search-source {
    padding: 0.3rem 0.9rem; font-size: 0.68rem; color: var(--ligero);
    background: var(--bg); border-bottom: 1px solid #e0d9d0; font-family: var(--mono);
}

/* Ductos */
.leaflet-control-attribution {
    font-size: 9px !important;
    opacity: 0.5;
    background: transparent !important;
    box-shadow: none !important;
}
.leaflet-control-attribution a { color: inherit; }

/* Contenedor de los avisos de carga: apila el de ductos y el de pozos en
   columna, para que no se encimen cuando las dos capas cargan a la vez. */
.capa-spinners {
    position: absolute; top: 10px; right: 10px; z-index: 500;
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
    pointer-events: none;
}
.capa-spinner {
    display: none;
    background: rgba(255,255,255,0.95); border: 1px solid #e0d9d0;
    border-radius: 20px; padding: 0.3rem 0.75rem;
    font-size: 0.72rem; color: var(--ligero);
}
.capa-spinner.visible { display: flex; align-items: center; gap: 0.4rem; }
.spinner-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acento-2); animation: pulse 1s infinite ease-in-out; }
@keyframes pulse { 0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);} }

.capa-aviso {
    display: none; margin-top: 0.4rem; padding: 0.4rem 0.7rem;
    background: #fffbea; border: 1px solid #f0e090;
    border-radius: 6px; font-size: var(--fs-sm); color: #7a6200;
}
.capa-aviso.visible { display: block; }

.capa-leyenda {
    display: none; margin-top: 0.4rem; padding: 0.5rem 0.8rem;
    background: var(--bg); border: 1px solid #e0d9d0;
    border-radius: 6px; font-size: 0.74rem; color: var(--ligero); line-height: 2;
}
.capa-leyenda.visible { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.ley-item { display: flex; align-items: center; gap: 0.35rem; }
.ley-nota { opacity: 0.7; }
.ley-line { display: inline-block; width: 18px; height: 3px; border-radius: 2px; flex-shrink: 0; }
/* Ficha que se abre al tocar un ducto o un pozo. */
.capa-ficha .leaflet-popup-content {
    margin: 0.65rem 0.85rem; font-size: 0.78rem; line-height: 1.55; color: var(--base);
}
.capa-ficha .leaflet-popup-content b { color: var(--ligero); font-weight: 600; }

/* Los pozos son puntos, no trazos: su muestra en la leyenda es un círculo. */
.ley-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); flex-shrink: 0; }

/* ── Aire del contenido en móvil ───────────────────────────
   En una pantalla angosta, los 2rem del contenido más los 35px de cada tarjeta se
   comen el ancho útil y el texto queda en una columna estrecha con mucho margen
   vacío a los lados.
   Este bloque va al final del archivo a propósito: `.tarjeta` se define más arriba
   (línea ~601) con la misma especificidad, y entre reglas que empatan gana la que
   está más abajo. Dentro del @media de layout, que está antes, este override no
   tendría ningún efecto. */
@media (max-width: 768px) {
    #general .main { padding: 1rem; }
    .tarjeta      { padding: 20px; }
}