/* Tarjetas informativas de Transparencia
   Colocar en App_Themes/Congreso/ (ASP.NET lo enlaza solo en <head runat="server">) */

#contenido {
    --tinta: #3B2B16;
    --azul: #75160E;
    --azul-osc: #75160E;
    --oro: #B5651D;
    --fondo: #F8F1EF;
    --linea: #E2D3CF;
    font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
    color: var(--tinta);
    text-align: left;
}

#portada { text-align: center; }
img.portada { max-width: 100%; height: auto; border: 0; }

.titulo-seccion {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5em;
    font-weight: normal;
    color: var(--azul-osc);
    text-align: left;
    margin: 36px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--linea);
}

/* ---------- Tarjetas ---------- */
.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.tarjeta {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 84px;
    padding: 14px 16px;
    text-align: left;
    font: inherit;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--linea);
    border-left: 5px solid var(--azul);
    border-radius: 4px;
    cursor: pointer;
}
.tarjeta:hover { background: var(--fondo); border-left-color: var(--oro); }
.tarjeta:focus { outline: 3px solid var(--oro); outline-offset: 2px; }

.tarjeta .ico {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    fill: none;
    stroke: var(--azul);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tarjeta:hover .ico { stroke: var(--oro); }
.tarjeta-texto { font-size: 0.95em; line-height: 1.3; font-weight: 600; }

/* ---------- Ventana ---------- */
.paneles { display: none; }

.velo {
    display: none;
    position: fixed; left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(20, 30, 40, 0.55);
    z-index: 900;
}
.velo.visible { display: block; }

.ventana {
    display: none;
    position: fixed;
    left: 50%; top: 5vh;
    width: 94%; max-width: 680px;
    max-height: 90vh;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    flex-direction: column;
    text-align: left;
}
.ventana.visible { display: flex; }

.ventana-cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: #75160E;
}
.ventana-cab h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25em;
    font-weight: normal;
    color: #FFFFFF;
    line-height: 1.3;
}
.ventana-cerrar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    font-size: 26px; line-height: 1;
    color: #FFFFFF;
    background: none;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    cursor: pointer;
}
.ventana-cerrar:hover { background: rgba(255,255,255,0.18); }
.ventana-cerrar:focus { outline: 3px solid #FFFFFF; outline-offset: 2px; }

.ventana-cuerpo {
    font-size: 16px;
    color: #3B2B16;
    padding: 16px 20px 22px;
    overflow-y: auto;
    line-height: 1.5;
}
.ventana-cuerpo h4 {
    margin: 18px 0 8px;
    font-size: 1em;
    color: var(--azul-osc);
}
.ventana-cuerpo h4:first-child { margin-top: 0; }

body.sin-scroll { overflow: hidden; }

/* ---------- Contenidos ---------- */
.datos { margin: 0 0 16px; }
.datos dt { font-size: 0.85em; color: #6B5A48; margin-top: 12px; }
.datos dd { margin: 2px 0 0; font-weight: 600; }

.personas, .enlaces { list-style: none; margin: 0; padding: 0; }
.personas li {
    padding: 12px 0;
    border-bottom: 1px solid var(--linea);
}
.personas li:last-child { border-bottom: 0; }
.personas strong { display: block; }
.personas span { display: block; color: #6B5A48; font-size: 0.92em; }

.enlaces li { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.enlaces li:last-child { border-bottom: 0; }
.enlaces li.sin-enlace { color: #6B5A48; }

#contenido .ventana-cuerpo a:link,
#contenido .ventana-cuerpo a:visited {
    color: #75160E !important;
    font-family: "Segoe UI", Tahoma, Verdana, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.45;
    text-decoration: underline;
}
#contenido .ventana-cuerpo a:hover,
#contenido .ventana-cuerpo a:focus {
    color: #3B2B16 !important;
    text-decoration: underline;
}
#contenido .ventana-cuerpo,
#contenido .ventana-cuerpo dd,
#contenido .ventana-cuerpo li,
#contenido .ventana-cuerpo p {
    color: #3B2B16;
    font-size: 16px;
}
#contenido .ventana-cuerpo dt,
#contenido .ventana-cuerpo .personas span { color: #6B5A48; }

.aviso {
    margin: 0;
    padding: 16px;
    background: var(--fondo);
    border-left: 4px solid var(--oro);
}

/* ---------- Mapas ---------- */
.mapa iframe {
    display: block;
    width: 100%;
    height: 380px;
    border: 1px solid var(--linea);
}
.mapa-panel iframe { height: 260px; }

@media (max-width: 480px) {
    .tarjetas { grid-template-columns: 1fr; }
    .mapa iframe { height: 300px; }
}