/* ── Volver (compartido por páginas de detalle públicas y del panel) ── */
.det-back {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ligero);
    text-decoration: none;
    transition: color 0.2s;
}

.det-back:hover { color: var(--base); }

/* ── Badges de tipo (compartidas por páginas públicas y del panel) ── */
.tipo-badge {
    display: inline-block;
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.tipo-azul     { background: #dbeafe; color: #1e40af; }
.tipo-amarillo { background: #fef9c3; color: #854d0e; }
.tipo-rojo     { background: #fee2e2; color: #991b1b; }
.tipo-morado   { background: #ede9fe; color: #5b21b6; }
.tipo-gris     { background: #e5e7eb; color: #374151; }

/* ── Mapa de detalle ── */
.detalles-mapa { padding: 0; }
#detalle-map { width: 100%; height: 520px; }

/* ── Sección de datos ── */
.detalles-reporte { padding: 0 0 80px; font-family: var(--display); }

.dr-header { margin-bottom: 32px; padding-top: 40px; }
.dr-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.dr-folio { font-family: var(--display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ligero); border: 1px solid currentColor; padding: 3px 9px; border-radius: 4px; }
.dr-badge { font-family: var(--display); font-size: var(--fs-xs); font-weight: 700; color: #fff; padding: 3px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: .05em; }
.dr-titulo { font-family: var(--display); font-size: var(--fs-xl); font-weight: 700; color: var(--base); margin: 0 0 8px; line-height: 1.3; }
.dr-fecha-loc { font-family: var(--display); font-size: var(--fs-sm); color: var(--ligero); }

.dr-seccion {
    background: var(--bg-2); 
    border: 1px solid #e8e0d5; 
    border-radius: 10px; 
    padding: 22px 24px;
    margin-bottom: 2rem;
    }
.dr-campo { margin-bottom: 14px; }
.dr-campo:last-child { margin-bottom: 0; }

.dr-label { 
    font-family: var(--mono); 
    font-size: var(--fs-sm); 
    color: var(--ligero); 
    margin-bottom: 3px; }


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

.dr-detalle { 
    font-family: var(--display); 
    display: block; 
    font-size: var(--fs-sm); 
    color: var(--base);  
    margin-top: 16px;
    margin-bottom: 16px;
 }

.dr-social-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dr-social-row + .dr-social-row { margin-top: 16px; }

.dr-tags {
    display: flex; 
    flex-wrap: wrap; 
    gap: 6px; 
    margin-top: 6px; }
.dr-tag { 
    font-family: var(--display); 
    font-size: var(--fs-xs); 
    background: var(--bg); 
    border: 1px solid #ddd5c8; 
    border-radius: 4px; 
    padding: 3px 8px; 
    color: #444; }

.dr-fotos-grid { columns: 3; column-gap: 10px; }
.dr-foto { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--bg); margin-bottom: 10px; break-inside: avoid; }

.dr-videos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.dr-video { width: 100%; aspect-ratio: 16/9; object-fit: contain; border-radius: 8px; background: #000; display: block; }


/* ── Mejoras visuales: sección con borde de acento ── */

.dr-seccion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 15px;
    border-bottom: solid 3px var(--bg-element);
}

.dr-seccion-icon {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent, var(--base)) 12%, #fff);
    color: var(--accent, var(--base));
}

.dr-seccion-title {
    font-family: var(--display);
    line-height: 1.3;
    font-weight: 600;
    font-size: var(--fs-lg);
    color: var(--acento-2);
}

.dr-seccion-title span{
    font-size: var(--fs-m);
    color: var(--ligero);
    font-weight: 400;
}

.dr-seccion-editar {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--display);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--acento);
    text-decoration: none;
    white-space: nowrap;
}
.dr-seccion-editar:hover { text-decoration: underline; }

/* Chips: pill con tinte de acento */
.dr-tag {
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, var(--base)) 8%, var(--bg));
    border-color: color-mix(in srgb, var(--accent, var(--base)) 22%, var(--bg));
    color: var(--accent, var(--base));
}

/* Dot indicador de estado */
.dr-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
}
.dr-dot::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Stat boxes para cifras numéricas */
.dr-stat-boxes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dr-stat-box { display: inline-flex; flex-direction: column; background: var(--bg); border-radius: 8px; padding: 8px 14px; min-width: 76px; }
.dr-stat-num { font-family: var(--display); font-size: 1.6em; font-weight: 700; color: var(--accent, var(--base)); line-height: 1; }
.dr-stat-label { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ligero); margin-top: 3px; }

.leaflet-popup-content a{
    background-color: var(--base) !important;
}

@media (max-width: 768px) {
    #detalle-map { height: 320px; border-radius: 8px; }
    .dr-fotos-grid { columns: 2; }
    .dr-social-row { grid-template-columns: 1fr; }
    .dr-titulo { font-size: var(--fs-lg); }
}

@media (max-width: 640px) {
    .dr-fotos-grid { columns: 1; }
}

/* ─────────────────────────────────────────
   DETALLE INCIDENTE (.di-*)
───────────────────────────────────────── */
.di-page { padding: 0 0 80px; font-family: var(--display); }

.di-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hero */
.di-hero { padding: 40px 0 28px; border-bottom: 1px solid #e8e0d5; margin-bottom: 32px; }

.di-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.di-badge {
    font-family: var(--display);
    font-size: var(--fs-xs);
    font-weight: 700;
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.di-badge-outline {
    background: none !important;
    color: var(--ligero);
    border: 1px solid currentColor;
}
.di-titulo {
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--base);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.di-desc {
    font-size: var(--fs-m);
    color: var(--ligero);
    line-height: 1.7;
    margin: 0 0 16px;
    max-width: 680px;
}
.di-meta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-family: var(--mono);
    font-size: var(--fs-xs);
    color: var(--ligero);
    flex-wrap: wrap;
}

/* Layout 70/30 */
.di-layout {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 24px;
    margin-bottom: 48px;
    align-items: start;
}
.di-left { display: flex; flex-direction: column; gap: 20px; }

/* Mapa */
.di-mapa {
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8e0d5;
}

/* Fotos bajo el mapa */
.di-fotos-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.di-fotos-label {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ligero);
}
.di-fotos-grid {
    columns: 3;
    column-gap: 8px;
}
.di-foto {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 8px;
    background: var(--bg);
    margin-bottom: 8px;
    break-inside: avoid;
    transition: opacity 0.15s;
}
.di-foto:hover { opacity: 0.88; }

/* dr-seccion reutilizado dentro del layout 70/30: el gap del flex ya separa las tarjetas */
.di-sidebar .dr-seccion, .di-left .dr-seccion { margin-bottom: 0; }

/* Sidebar */
.di-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.di-icon { flex-shrink: 0; opacity: 0.6; }

/* Secciones inferiores */
.di-section { margin-bottom: 48px; }
.di-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e0d5;
}
.di-section-title {
    font-family: var(--display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--base);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.di-count {
    font-family: var(--mono);
    font-size: var(--fs-xs);
    background: var(--bg);
    border: 1px solid #e0d9d0;
    border-radius: 20px;
    padding: 2px 10px;
    color: var(--ligero);
}

/* Cards de reportes */
.di-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.di-rep-card {
    background: var(--bg-2);
    border: 1px solid #e8e0d5;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.di-rep-card:hover { border-color: var(--acento-2); box-shadow: 0 2px 12px rgba(15,118,110,.08); }
.di-rep-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.di-rep-titulo { font-size: var(--fs-m); font-weight: 600; color: var(--base); line-height: 1.4; margin: 0; }
.di-rep-meta { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ligero); line-height: 1.8; }
.di-rep-link { font-size: var(--fs-sm); color: var(--acento); font-weight: 500; margin-top: auto; }

/* Cards de fuentes */
.di-fuentes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.di-fuente-card { background: var(--bg-2); border: 1px solid #e8e0d5; border-radius: 10px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.di-fuente-medio { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ligero); text-transform: uppercase; letter-spacing: .06em; }
.di-fuente-titulo { font-size: var(--fs-sm); font-weight: 600; color: var(--base); text-decoration: none; line-height: 1.45; transition: color 0.15s; }
.di-fuente-titulo:hover { color: var(--acento); }
.di-fuente-links { display: flex; gap: 12px; font-family: var(--mono); font-size: var(--fs-xs); }
.di-fuente-links a { color: var(--ligero); text-decoration: underline; }
.di-fuente-links a:hover { color: var(--acento); }

.di-empty { padding: 40px; text-align: center; color: var(--ligero); font-size: var(--fs-sm); background: var(--bg-2); border: 1px solid #e8e0d5; border-radius: 12px; }

/* Responsive */
@media (max-width: 900px) {
    .di-layout { grid-template-columns: 1fr; }
    .di-sidebar { position: static; }
    .di-fotos-grid { columns: 2; }
}
@media (max-width: 640px) {
    .di-container { padding: 0 1rem; }
    .di-fotos-grid { columns: 1; }
    .di-mapa { height: 300px; }
    .di-rep-grid { grid-template-columns: 1fr; }
}