/*
 * Páginas públicas de reportes: listado (/report/list) y ficha (/report/{id}).
 *
 * Antes el diseño vivía en atributos `style=""` dentro de las vistas —bordes negros de
 * 1 px, anchos en píxeles, `float: inline-end`— y cada bloque de adjuntos usaba su
 * propio tamaño de columna. Aquí está junto y con nombres, para poder cambiarlo sin
 * tocar el PHP.
 *
 * Los colores son los del sitio: #f2849e de acento, #585858 para el texto,
 * #6c7d8e para lo secundario. No se inventa una paleta nueva.
 */

/* ============================ comunes ============================ */

.rep-migas {
    font-size: 13px;
    color: #6c7d8e;
    margin: 0 0 .5rem;
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}
.rep-migas a { color: #6c7d8e; text-decoration: none; }
.rep-migas a:hover { color: #f2849e; text-decoration: underline; }

.rep-enlace {
    color: #b3557a;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.rep-enlace:hover { color: #f2849e; text-decoration: underline; }

.rep-fecha { color: #6c7d8e; font-size: 14px; }

/* El estado viene de Reports::getStatus(), que trae sus colores en línea desde hace
   años. No se le pelea: solo se le da sitio para que no se pegue a la fecha. */
.rep-cabecera-meta,
.rep-tarjeta-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin: 0 0 .5rem;
}

/* ==================== listado (/report/list) ==================== */

/* Sin padding-top: el layout público ya empuja el contenido 100 px por su cabecera
   fija (views/layouts/main.php, `style="margin-top: 100px"`). Ponerlo aquí otra vez
   dejaba 220 px de hueco antes del título — que es lo que hacía la versión anterior
   de list.php con su `style="padding-top: 120px"`. */

.rep-listado-cabecera { margin-bottom: 1.25rem; }
.rep-listado-titulo {
    font-size: 30px;
    font-weight: bold;
    color: #585858;
    margin: 0;
}
.rep-listado-descripcion {
    color: #6c7d8e;
    font-size: 15px;
    max-width: 70ch;
    margin: .35rem 0 0;
}

/* Rejilla de tarjetas, cuatro por fila. Antes era una fila apaisada por reporte: con
   diez por página daba una lista muy larga y dejaba media pantalla vacía a la derecha.

   auto-fill con un mínimo en vez de un `repeat(4, 1fr)` fijo: así son cuatro cuando
   caben y bajan a tres, dos o una según el ancho, sin escribir un media query por
   escalón. */
.rep-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.rep-tarjeta {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.rep-tarjeta:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    border-color: #d8dde2;
    transform: translateY(-2px);
}

.rep-tarjeta-foto {
    display: block;
    height: 150px;
    background: #f2f3f5;
    flex: 0 0 auto;
}
.rep-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rep-tarjeta-cuerpo {
    padding: .8rem .9rem 1rem;
    display: flex;
    flex-direction: column;
    /* Que el enlace de «Read the full report» quede abajo en todas las tarjetas de la
       fila, aunque los textos midan distinto. */
    flex: 1 1 auto;
}

.rep-tarjeta-titulo { font-size: 17px; margin: 0 0 .3rem; line-height: 1.3; }
.rep-tarjeta-titulo a { color: #585858; text-decoration: none; }
.rep-tarjeta-titulo a:hover { color: #f2849e; }

.rep-tarjeta-fecha { font-size: 12px; color: #6c7d8e; margin: 0 0 .45rem; }

.rep-tarjeta-lugar {
    font-size: 13px;
    color: #6c7d8e;
    margin: .5rem 0 .35rem;
    /* Una dirección larga no debe estirar la tarjeta: dos líneas y a otra cosa. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rep-tarjeta-lugar .bi { color: #f2849e; }

.rep-tarjeta-texto {
    font-size: 14px;
    line-height: 1.55;
    color: #585858;
    margin: 0 0 .6rem;
}

/* margin-top:auto es lo que empuja el enlace al fondo de la tarjeta. */
.rep-tarjeta-mas { margin: auto 0 0; }

.rep-listado-acciones { display: flex; gap: .4rem; flex-wrap: wrap; margin: .85rem 0 0; }

.rep-vacio {
    background: #fff;
    border: 1px dashed #d8dde2;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: #6c7d8e;
}

/* Paginador. Se usa yii\bootstrap5\LinkPager, que sí pone page-item/page-link; el de
   yii\widgets no, y por eso el paginador salía como una lista de enlaces pelados. */
.rep-paginador {
    margin: 2rem 0 0;
    justify-content: center;
    gap: .3rem;
    flex-wrap: wrap;
}
.rep-paginador .page-link {
    color: #6c7d8e;
    border: 1px solid #e4e7ea;
    border-radius: 6px;
    min-width: 38px;
    /* 38 px de alto para que se pueda pulsar con el dedo. */
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.rep-paginador .page-link:hover { background: #fdf2f5; border-color: #f2c2ce; color: #b3557a; }
.rep-paginador .page-link:focus { box-shadow: 0 0 0 3px rgba(242,132,158,.25); }
.rep-paginador .active .page-link {
    background: #f2849e;
    border-color: #f2849e;
    color: #fff;
    font-weight: 600;
}
/* Sin esto, «Previous» en la primera página parece pulsable y no hace nada. */
.rep-paginador .disabled .page-link { color: #c3cad1; background: #fafbfc; cursor: default; }

/* La rejilla ya se adapta sola con auto-fill; en pantallas pequeñas solo se sube algo
   la altura de la foto, que a una columna se veía apretada. */
@media (max-width: 575px) {
    .rep-tarjeta-foto { height: 190px; }
}

/* ==================== ficha (/report/{id}) ==================== */

.rep-vista { padding-bottom: 3rem; }

.rep-cabecera {
    border-bottom: 1px solid #e4e7ea;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
.rep-titulo {
    font-size: 30px;
    font-weight: bold;
    color: #585858;
    margin: 0 0 .6rem;
    line-height: 1.25;
}

/* Dos columnas: el relato manda, los datos acompañan. Antes el mapa iba en medio del
   texto y partía la lectura en dos. */
.rep-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start;
}

.rep-principal { min-width: 0; }

.rep-bloque { margin-bottom: 2rem; }

.rep-h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c7d8e;
    font-weight: 700;
    margin: 0 0 .6rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.rep-h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c7d8e;
    font-weight: 700;
    margin: 0 0 .5rem;
}

.rep-cuenta {
    background: #f0f1f3;
    color: #6c7d8e;
    border-radius: 10px;
    padding: 0 .45rem;
    font-size: 11px;
    letter-spacing: 0;
}

.rep-descripcion {
    font-size: 17px;
    line-height: 1.7;
    color: #3f4a55;
    /* Una línea de 120 caracteres se lee mal: se acota. */
    max-width: 68ch;
}

.rep-notas {
    background: #fdf7f9;
    border-left: 3px solid #f2849e;
    border-radius: 0 6px 6px 0;
    padding: .9rem 1rem;
}
.rep-notas .rep-h2 { color: #b3557a; margin-bottom: .35rem; }
.rep-notas div { font-size: 15px; line-height: 1.6; color: #585858; }

/* --- galería de adjuntos: una sola, con fotos, vídeos y documentos juntos --- */
.rep-galeria {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
}
.rep-adjunto {
    display: block;
    position: relative;
    height: 120px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e4e7ea;
    background: #f6f7f9;
    cursor: zoom-in;
}
.rep-adjunto:hover { border-color: #f2849e; }
.rep-adjunto:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; }
.rep-adjunto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rep-adjunto-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 34px;
}
.rep-adjunto-2 .rep-adjunto-icono { color: #6a4f99; background: #f3eefb; }
.rep-adjunto-3 .rep-adjunto-icono { color: #5f6b76; background: #f1f3f5; }

/* --- columna lateral --- */
.rep-lado { position: sticky; top: 110px; }

.rep-tarjeta-lado {
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.rep-direccion { font-size: 14px; color: #585858; margin: 0 0 .6rem; line-height: 1.5; }
.rep-direccion .bi { color: #f2849e; }

.rep-mapa {
    width: 100%;
    height: 200px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f1f3;
}
/* Cuando no hay coordenadas o falta la clave del API, el hueco lleva explicación en
   vez de quedarse gris. */
.rep-mapa-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: 13px;
    color: #6c7d8e;
}

.rep-lado-pie { margin: .6rem 0 0; }
.rep-lado-texto { font-size: 14px; color: #6c7d8e; line-height: 1.55; margin: 0 0 .75rem; }

@media (max-width: 991px) {
    .rep-columnas { grid-template-columns: 1fr; gap: 1.5rem; }
    /* Pegajoso en una columna significa que la tarjeta persigue al lector. */
    .rep-lado { position: static; }
}

@media (max-width: 767px) {
    .rep-titulo { font-size: 25px; }
    .rep-descripcion { font-size: 16px; }
}


/* ==================== mapa (/report/map) ==================== */

.rep-mapa-pagina { padding-bottom: 2rem; }

.mapa-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: .8rem;
}
.mapa-filtro { display: flex; flex-direction: column; gap: .2rem; min-width: 150px; }
.mapa-filtro-ancho { flex: 1 1 220px; }
.mapa-filtro-boton { justify-content: flex-end; }
.mapa-filtro label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c7d8e;
    font-weight: 700;
}

/* La cuenta de resultados. Sin ella, filtrar y ver el mapa igual deja la duda de si el
   filtro se aplicó o no hizo nada. */
.mapa-cuenta { font-size: 13px; color: #6c7d8e; margin: .6rem 0 .5rem; }

.mapa-caja { position: relative; }
.mapa-lienzo {
    height: 560px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #eef0f2;
}
.mapa-sin-resultados {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: rgba(255,255,255,.86);
    border-radius: 8px;
    color: #6c7d8e;
    font-size: 15px;
}
.mapa-sin-resultados[hidden] { display: none; }

.mapa-pie { margin: .8rem 0 0; }

@media (max-width: 767px) {
    .mapa-lienzo { height: 420px; }
    .mapa-filtro, .mapa-filtro-ancho { min-width: 0; flex: 1 1 100%; }
}


/* --- el globo del marcador ---
   Era una rejilla de Bootstrap con `col-lg-2`/`col-lg-10` dentro de un globo de 300 px,
   donde ese `lg` nunca se cumple, así que las dos columnas se apilaban; más un <h2> a
   tamaño de titular de página y `style="color:#000"` repetido en cada etiqueta. */

.globo { display: flex; gap: .7rem; max-width: 330px; font-size: 13px; }
.globo-foto {
    flex: 0 0 74px;
    height: 74px;
    border-radius: 5px;
    overflow: hidden;
    display: block;
    cursor: zoom-in;
    background: #f0f1f3;
}
.globo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.globo-cuerpo { min-width: 0; }

.globo-estado {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 0 0 .25rem;
}
.globo-estado-0 { background: #fdecec; color: #c9302c; }
.globo-estado-1 { background: #fff6e6; color: #8a6100; }
.globo-estado-2 { background: #e8f6f1; color: #1b7d55; }

.globo-titulo {
    font-size: 15px;
    font-weight: 700;
    color: #585858;
    margin: 0 0 .15rem;
    line-height: 1.3;
}
.globo-fecha { font-size: 11px; color: #6c7d8e; margin: 0 0 .35rem; }

.globo-etiquetas { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 .35rem; }
/* El fondo lo pone el JS con el color de la categoría, así que aquí solo la forma.
   Texto blanco porque el color que llega es el tono fuerte de la paleta. */
.globo-etiqueta {
    font-size: 10px;
    color: #fff;
    border-radius: 8px;
    padding: 1px 6px;
    white-space: nowrap;
}

.globo-direccion { color: #6c7d8e; margin: 0 0 .3rem; }
.globo-texto { color: #585858; margin: 0 0 .5rem; line-height: 1.5; }

.globo-pie { margin: 0; }
.globo-boton {
    display: inline-block;
    background: #f2849e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    padding: .25rem .7rem;
}
.globo-boton:hover { background: #e06e8a; color: #fff; }


/* ==================== alta en alertas (/report/alerts) ==================== */

.rep-alta { padding-bottom: 3rem; }

.rep-alta-caja {
    /* Este sí se acota: son dos campos y una lista de casillas, y a 1300 px de ancho el
       campo de email mediría media pantalla. No es el caso del formulario de alta, que
       lleva un mapa y un subidor. */
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1.5rem;
}
.rep-alta-cabecera { margin-bottom: 1.25rem; }

/* Las dieciséis categorías en rejilla. En una columna, la última quedaba a una pantalla
   entera de distancia del botón de enviar. */
.rep-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .1rem .75rem;
}
.rep-casilla { margin: 0; }
.rep-casilla .form-check-label { font-size: 14px; color: #585858; cursor: pointer; }
.rep-casilla .form-check-input { cursor: pointer; }
.rep-casilla .form-check-input:checked { background-color: #f2849e; border-color: #f2849e; }

.rep-alta-categorias { margin-bottom: 1.25rem; }
.rep-alta-captcha { margin-bottom: 1rem; }

.rep-alta-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    border-top: 1px solid #eef0f2;
    padding-top: 1rem;
}
.rep-alta-nota {
    margin: 0;
    font-size: 13px;
    color: #6c7d8e;
    max-width: 46ch;
    line-height: 1.5;
}
.rep-alta-nota .bi { color: #f2849e; }


/* Tarjeta sin foto. En vez de servir /img/image-not-found.png —que dice «No image» en
   gris oscuro y parece una imagen rota— se pinta un bloque teñido con el color de la
   categoría del reporte, que además cuenta algo: de qué va.

   El tinte llega por la variable --tinte que pone la vista, porque el color depende del
   dato y no puede estar escrito aquí. */
.rep-tarjeta-sinfoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    /* color-mix deja el tono de la categoría muy rebajado: suficiente para reconocerlo,
       sin competir con las tarjetas que sí traen foto. */
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--tinte, #8c98a4) 14%, #fff),
            color-mix(in srgb, var(--tinte, #8c98a4) 6%, #fff));
    color: var(--tinte, #8c98a4);
}
.rep-tarjeta-sinfoto .bi { font-size: 26px; opacity: .55; }
.rep-sinfoto-texto {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    opacity: .6;
}

/* Respaldo para los navegadores sin color-mix: un gris suave en vez de nada. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .rep-tarjeta-sinfoto { background: #f4f6f8; }
}


/* ==================== mediciones (/report/result) ==================== */

.rep-resultados { padding-bottom: 3rem; }

/* Las tres cifras de cabecera. */
.res-cifras {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0 0;
}
.res-cifra {
    flex: 1 1 180px;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-left: 3px solid #6c7d8e;
    border-radius: 8px;
    padding: .8rem 1rem;
    display: flex;
    flex-direction: column;
}
.res-cifra-rojo { border-left-color: #d9534f; }
.res-cifra-verde { border-left-color: #25c481; }

.res-numero { font-size: 30px; font-weight: bold; color: #585858; line-height: 1.1; }
.res-etiqueta { font-size: 13px; color: #6c7d8e; }
.res-de { color: #9aa5b1; }

/* Rejilla de paneles. auto-fit con un mínimo: dos columnas cuando cabe, una cuando no,
   y los paneles marcados como anchos ocupan las dos. */
.res-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.res-panel {
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1rem;
    /* Highcharts mide el contenedor: sin min-width:0 en una celda de grid, una gráfica
       ancha puede empujar la columna y desbordar la rejilla. */
    min-width: 0;
}
.res-panel-ancho { grid-column: 1 / -1; }

.res-nota {
    font-size: 12px;
    color: #9aa5b1;
    margin: -.35rem 0 .5rem;
    line-height: 1.45;
}

@media (max-width: 767px) {
    .res-numero { font-size: 25px; }
}


/* ==================== formulario de alta (/report) ==================== */

/* Al ancho del contenedor, como el resto del sitio. Estaba acotado a 760 px y centrado,
   así que /report salía más estrecho que el listado, el mapa y las mediciones. */
.rep-alta-form { width: 100%; }

/* Pasos numerados. Antes eran catorce campos seguidos sin decir qué se pedía ni cuánto
   quedaba, y en un formulario que se rellena desde el móvil, en la calle, eso importa. */
.alta-paso {
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.alta-paso-titulo {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 18px;
    font-weight: 700;
    color: #585858;
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid #eef0f2;
}

.alta-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2849e;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.alta-ayuda {
    font-size: 14px;
    color: #6c7d8e;
    line-height: 1.55;
    margin: -.35rem 0 1rem;
}

.alta-mapa {
    width: 100%;
    height: 340px;
    border-radius: 6px;
    overflow: hidden;
    background: #eef0f2;
    border: 1px solid #e4e7ea;
}

/* Los tres campos de contacto en fila cuando cabe, y apilados cuando no.

   El problema era «Full Name (or Organization Name)»: la etiqueta se partía en dos líneas
   y empujaba su campo por debajo de los otros dos. Se arregló acortando la etiqueta, así
   que ahora las tres ocupan UNA línea y los campos se alinean solos con `align-items:
   start`.

   ⚠️ Con `align-items: end` NO se alinean, aunque parezca lo contrario: eso alinea los
      bordes INFERIORES de las tres celdas, y como cada campo lleva debajo una pista de
      distinto largo —una cabe en una línea y otra en dos—, los campos quedan a distinta
      altura. Medido: 21 px de diferencia. Con `start`, lo que se alinea es la parte de
      arriba, que es donde están la etiqueta y el campo. */
.alta-tres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .25rem 1rem;
    align-items: start;
}

/* Las pistas bajo cada campo, en pequeño y sin robar atención. */
.alta-tres .form-text,
.alta-tres .help-block {
    font-size: 12px;
    color: #9aa5b1;
    margin-top: .2rem;
}

/* El error de validación tiene que verse: es lo que dice por qué no se envió. */
.alta-tres .invalid-feedback,
.alta-paso .invalid-feedback {
    display: block;
    font-size: 12.5px;
    color: #b3312d;
}
.alta-paso .form-control.is-invalid,
.alta-paso .form-select.is-invalid { border-color: #d9534f; }

.alta-privacidad {
    background: #f2f8f5;
    border-left: 3px solid #25c481;
    border-radius: 0 6px 6px 0;
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
}
.alta-privacidad p { margin: 0; font-size: 14px; line-height: 1.6; color: #3f4a55; }
.alta-privacidad .bi { color: #1b7d55; }

.alta-enviar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 2rem;
}
.alta-captcha { flex: 0 0 auto; }
.alta-boton { flex: 0 0 auto; }

.alta-error {
    color: #b3312d;
    font-size: 13px;
    margin: .5rem 0 0;
}

/* El aviso de emergencia de create.php: era un bloque amarillo con un estilo en línea. */
.alta-emergencia {
    background: #fff8e1;
    border-left: 3px solid #e0a030;
    border-radius: 0 6px 6px 0;
    padding: .8rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 14px;
    line-height: 1.6;
    color: #6b5200;
}
.alta-emergencia .bi { color: #b37e00; }

@media (max-width: 575px) {
    .alta-paso { padding: 1rem; }
    .alta-mapa { height: 260px; }
    .alta-enviar { flex-direction: column; align-items: stretch; }
    .alta-boton { width: 100%; }
}


/* ⚠️ El tema de 2022 trae esto en style.css:
 *
 *       section { padding: 60px 0; overflow: hidden; }
 *
 * Es decir: se aplica a CUALQUIER <section> del sitio. Y como las vistas nuevas usan
 * <section> por semántica —los bloques de la ficha, los paneles de las mediciones y los
 * pasos del formulario—, esa regla causaba dos problemas que parecían no tener relación:
 *
 * 1. `overflow: hidden` **recortaba** el panel del selector de fecha y hora: se veía la
 *    cabecera del mes y el resto quedaba cortado por el borde de la tarjeta. Lo mismo
 *    habría pasado con los tooltips de Highcharts en las mediciones.
 * 2. `padding: 60px 0` metía 120 px de aire vertical en cada bloque de la ficha del
 *    reporte, que es de donde venía el espacio en blanco de más.
 *
 * Se neutraliza en los tres componentes propios. No se toca la regla del tema, que la
 * usan las secciones de la portada.
 */
.rep-bloque,
.res-panel,
.alta-paso,
.rep-tarjeta-lado {
    padding-top: 0;
    padding-bottom: 0;
    overflow: visible;
}

/* Los que sí llevan relleno propio lo recuperan, porque la regla de arriba lo puso a 0. */
.res-panel { padding: 1rem; }
.alta-paso { padding: 1.25rem; }
.rep-tarjeta-lado { padding: 1rem; }
.rep-notas { padding: .9rem 1rem; }

@media (max-width: 575px) {
    .alta-paso { padding: 1rem; }
}


/* ==================== contacto (/contact) ==================== */

.con-pagina { padding-bottom: 3rem; }

/* Las tres vías de contacto. Son <a> enteras y no texto con un enlace dentro: el área
   pulsable es la tarjeta completa, que en un móvil es la diferencia entre acertar y no. */
.con-vias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.con-via {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1.1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.con-via:hover {
    border-color: #f2c2ce;
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
    transform: translateY(-2px);
    color: inherit;
}
.con-via:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; }

.con-icono {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fdf2f5;
    color: #b3557a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin-bottom: .7rem;
}

.con-etiqueta {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
    color: #9aa5b1;
    margin-bottom: .2rem;
}

.con-valor {
    font-size: 15px;
    font-weight: 600;
    color: #585858;
    line-height: 1.45;
    /* Una dirección de correo larga no debe desbordar la tarjeta. */
    overflow-wrap: anywhere;
}

/* Empuja la nota al fondo, así las tres tarjetas la alinean aunque el valor de una
   ocupe dos líneas y el de otra una. */
.con-nota {
    margin-top: auto;
    padding-top: .6rem;
    font-size: 12.5px;
    color: #9aa5b1;
}
.con-via:hover .con-nota { color: #b3557a; }

/* --- el mapa --- */
.con-mapa-caja {
    margin-top: 1.5rem;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    overflow: hidden;
    /* line-height:0 quita los 4-5 px de hueco que el navegador deja debajo de un
       elemento en línea como el iframe. */
    line-height: 0;
}
.con-mapa { display: block; width: 100%; height: 380px; border: 0; }

/* --- las salidas --- */
.con-salidas { margin-top: 2.5rem; }

.con-salidas-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: .75rem;
}

.con-salida {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    padding: 1.1rem;
}
.con-salida-titulo { font-size: 16px; font-weight: 700; color: #585858; margin: 0 0 .4rem; }
.con-salida p { font-size: 14px; color: #6c7d8e; line-height: 1.6; margin: 0 0 1rem; }
/* El botón al fondo, alineado entre las tres tarjetas. */
.con-salida .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 575px) {
    .con-mapa { height: 260px; }
    .con-salida .btn { align-self: stretch; text-align: center; }
}