/* ==========================================================================
   Portal EMAO — estilos de las páginas interiores
   Depende de assets/styles.css (tokens y componentes del home).
   ========================================================================== */

/* Cabecera compacta ---------------------------------------------------- */
.cabecera-solida { background: var(--verde-900); color: #fff; }
.cabecera-solida .cabecera { border-bottom: 0; }

/* El subrayado ámbar de la sección actual es para el menú de escritorio, que
   es una fila. En el teléfono el menú es una lista a lo ancho de la pantalla y
   ese mismo subrayado cruza de lado a lado: se lee como un separador y no como
   «estás acá». Ahí la marca es la barra de la izquierda, que está en styles.css.

   Iba sin acotar, y como esta hoja se carga después que styles.css le ganaba a
   la regla de teléfono aunque las dos tengan la misma especificidad. */
@media (min-width: 861px) {
  .menu a.es-actual {
    color: #fff;
    border-bottom: 2px solid var(--ambar);
    padding-bottom: 2px;
  }
}

/* Banda de encabezado -------------------------------------------------- */
.banda { background: var(--teal-base); color: #fff; }

/* La banda de sección es un escalón por encima de la cabecera y se lee más
   contenida que la naranja de denuncias: el naranja avisa, el teal ordena.
   Ambas son un valor plano de la escala — nunca un degradado entre dos. */
.banda--seccion { background: var(--teal-medio); }

.banda--ambar { background: var(--naranja); color: var(--sobre-naranja); }
.banda--corta { padding-bottom: 26px; }
.banda--media { padding-bottom: 78px; }
.banda--larga { padding-bottom: 96px; }

/* El aire de arriba del hero. Estaba escrito a mano en el atributo style de
   tres páginas y en una clase propia en otra, con cuatro valores distintos:
   para bajar el hero había que tocar cuatro lugares, y un atributo le gana a
   cualquier media query, así que en el teléfono no bajaba nada. Ahora es esta
   clase y su regla de teléfono, y con eso alcanza. */
.banda__cuerpo { padding-top: 26px; }

.banda__interior {
  padding-top: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.banda__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--naranja-claro);
}

/* Sobre el teal medio el naranja claro cae a 4.25:1 y este rótulo es de 11 px:
   ahí va el teal papel, que da 6.2:1. El naranja se queda para las cifras,
   que por tamaño sí cumplen. */
.banda--seccion .banda__rotulo { color: var(--teal-papel); }

.banda--ambar .banda__rotulo { color: var(--sobre-naranja); font-weight: 800; }

.banda__titulo {
  margin: 8px 0 0;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Auditoría interna lleva el titular un punto más chico: el nombre es largo y
   en dos renglones pesaba demasiado. Iba en el atributo y ahí le ganaba a las
   dos reglas que lo achican, la de 900 y la de 640. */
.banda__titulo--menor { font-size: 36px; }

.banda__bajada {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
  max-width: 560px;
}
.banda--ambar .banda__bajada { color: var(--sobre-naranja); font-size: 15.5px; }

/* La descripción de Institucional es la única que se lee como un párrafo y no
   como una bajada, así que va un punto más grande. Iba en el atributo. */
.banda__bajada--mayor { font-size: 16px; line-height: 1.5; }

.banda__marca {
  margin-top: 12px;
  display: inline-block;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sobre-naranja);
  background: var(--naranja);
  padding: 6px 12px;
  border-radius: 4px;
}

.banda__cifras { display: flex; gap: 28px; flex-wrap: wrap; }
.banda__cifra { font-size: 30px; font-weight: 800; line-height: 1; color: #fff; }
.banda__cifra--ambar { color: var(--naranja-claro); }
.banda--ambar .banda__cifra { color: var(--sobre-naranja); font-size: 34px; }
.banda__cifra-rotulo {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
}
.banda--ambar .banda__cifra-rotulo { color: var(--sobre-naranja); font-weight: 800; }

/* Migas ----------------------------------------------------------------- */
.migas {
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--tinta-4);
}
.migas [aria-current] { color: var(--tinta); }

/* Campos ---------------------------------------------------------------- */
.campo-oscuro {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radio);
  background: #105A45;
  color: #fff;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
}
.campo-oscuro::placeholder { color: rgba(255, 255, 255, .5); }
.campo-oscuro:focus { outline: 2px solid var(--ambar); outline-offset: 1px; }

.campo, .selector, .area {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--borde-2);
  border-radius: var(--radio);
  background: var(--papel);
  font-family: inherit;
  font-size: 15px;
  color: var(--tinta);
}
.campo, .selector { height: 48px; padding: 0 13px; }
.area { min-height: 110px; padding: 11px 13px; line-height: 1.45; resize: vertical; }
.campo:focus, .selector:focus, .area:focus { outline: none; border-color: var(--ambar); }
.campo.tiene-error, .area.tiene-error { border: 1.5px solid var(--estado-suspendida); }

.etiqueta-campo { font-size: 14px; font-weight: 700; color: var(--tinta); }
.etiqueta-campo + .campo,
.etiqueta-campo + .area,
.etiqueta-campo + .selector { margin-top: 6px; }
.opcional { font-weight: 500; color: var(--tinta-4); }
.obligatorio { font-weight: 700; color: #B23A36; }

.error-campo {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #B23A36;
}
.error-campo[hidden] { display: none; }

/* Filtros ---------------------------------------------------------------- */
.filtros {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.filtros select, .filtros input {
  height: 40px;
  min-width: 150px;
  border: 1px solid var(--borde-2);
  border-radius: 6px;
  background: var(--papel);
  padding: 0 10px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--tinta);
}

.filtros__conteo { font-size: 12.5px; white-space: nowrap; color: var(--tinta-4); }

/* En el teléfono los tres desplegables entraban de a uno por renglón: el
   min-width de 150 px no daba para tres en 343 px de ancho. Repartidos en
   partes iguales entran los tres, y el conteo se va solo al renglón de
   abajo. */
@media (max-width: 640px) {
  .filtros { gap: 5px; padding: 8px; }
  .filtros select, .filtros input {
    flex: 1 1 0;
    min-width: 0;
    height: 34px;
    padding: 0 5px;
    font-size: 11.5px;
  }
  .filtros__conteo { font-size: 11px; }

  /* Repartidos en partes iguales sobraba lugar en dos y faltaba en el tercero.
     Los pesos son la medida del texto más largo de cada uno más la flecha. */
  .filtros #f-anio { flex-grow: .7; }
  .filtros #f-orden { flex-grow: 1.15; }
  .filtros .filtros__conteo { flex: 1 0 100%; }
}

/* Tarjeta que flota sobre la banda --------------------------------------- */
.flotante { position: relative; z-index: 3; }
.flotante--m56 { margin-top: -56px; }
.flotante--m58 { margin-top: -58px; }
.flotante--m72 { margin-top: -72px; }
.flotante--m76 { margin-top: -76px; }

.panel-blanco {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 18px 20px;
}
.panel-blanco--elevado {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(12, 74, 56, .2);
}

.rotulo-menor {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-4);
}

/* Botones ---------------------------------------------------------------- */
.boton-linea {
  height: 40px;
  padding: 0 16px;
  white-space: nowrap;
  border: 1px solid #C8C5BB;
  border-radius: 6px;
  background: var(--papel);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--verde-900);
  cursor: pointer;
}
.boton-linea:hover { background: #F1EFEA; }

.boton-contorno {
  height: 50px;
  padding: 0 20px;
  white-space: nowrap;
  border: 1.5px solid var(--verde-900);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--verde-900);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.boton-contorno:hover { background: #F1EFEA; }

.boton-ancho {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: var(--radio);
  background: var(--ambar);
  color: var(--sobre-naranja);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.boton-ancho:hover { background: var(--naranja-hover); }
.boton-ancho:disabled { background: #F6CE96; cursor: default; }

/* Listado de filas -------------------------------------------------------- */
.lista-filas { display: flex; flex-direction: column; gap: 10px; }
.lista-filas[hidden] { display: none; }

.fila {
  display: flex;
  gap: 14px;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  color: inherit;
  flex-wrap: wrap;
  align-items: flex-start;
}
a.fila:hover {
  text-decoration: none;
  border-color: #C8C5BB;
  box-shadow: 0 6px 16px rgba(12, 74, 56, .08);
}

.fila__miniatura { flex: 0 0 120px; width: 120px; height: 84px; border-radius: 6px; }

.fila__seccion {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.fila__titulo {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--verde-900);
  text-wrap: pretty;
}

.fila__bajada {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--tinta-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fila__fecha { margin: 7px 0 0; font-size: 12.5px; color: var(--tinta-4); }
.fila__lado { flex: 0 0 190px; min-width: 170px; }
.fila__acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }

/* Estado vacío ------------------------------------------------------------ */
.vacio {
  background: var(--papel);
  border: 1px dashed #C8C5BB;
  border-radius: 12px;
  padding: 26px 24px;
}
.vacio[hidden] { display: none; }
.vacio__rotulo {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
}
.vacio__titulo {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--verde-900);
  line-height: 1.25;
}
.vacio__texto {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-3);
  max-width: 480px;
}

/* Paginación -------------------------------------------------------------- */
.paginacion { margin-top: 18px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.paginacion[hidden] { display: none; }
.paginacion button {
  height: 38px;
  min-width: 38px;
  padding: 0 13px;
  border: 1px solid var(--borde-2);
  border-radius: 6px;
  background: var(--papel);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--verde-900);
  cursor: pointer;
}
.paginacion button:hover:not(:disabled) { background: #F1EFEA; }
.paginacion button[aria-current="page"] {
  background: var(--verde-900);
  border-color: var(--verde-900);
  color: #fff;
}
.paginacion button:disabled { opacity: .4; cursor: default; }

/* Insignias de estado ------------------------------------------------------ */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}
.insignia--verde  { background: rgba(30, 138, 106,.14);  box-shadow: inset 0 0 0 1px rgba(30, 138, 106,.4); }
.insignia--ambar  { background: rgba(239,159,39,.14); box-shadow: inset 0 0 0 1px rgba(239,159,39,.4); }
.insignia--roja   { background: rgba(226,75,74,.14);  box-shadow: inset 0 0 0 1px rgba(226,75,74,.4); }
.insignia--gris   { background: rgba(174, 172, 164,.2); box-shadow: inset 0 0 0 1px rgba(174, 172, 164,.5); }
.insignia--bosque { background: rgba(20, 101, 78,.12);   box-shadow: inset 0 0 0 1px rgba(20, 101, 78,.4); }

/* Tabla -------------------------------------------------------------------- */
.tabla-envoltura {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: auto;
  max-height: 520px;
}

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.tabla th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--verde-900);
  color: #fff;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 14px;
}

.tabla td { padding: 10px 14px; color: var(--tinta-2); }
.tabla tbody tr { border-top: 1px solid #EAE8E1; }
.tabla tbody tr:nth-child(even) { background: #FBFAF7; }
.tabla tbody tr.esta-destacada { background: var(--verde-claro); }
.tabla td.col-ruta { font-weight: 800; color: var(--verde-900); white-space: nowrap; }
.tabla .sin-corte { white-space: nowrap; }

/* La tabla en el teléfono -------------------------------------------------
   Con el cuerpo de escritorio la tabla mide 687 px y la pantalla 333: se veía
   menos de la mitad, y de las diez rutas entraban cinco.

   Se achica la letra y se aprietan las celdas al texto. Lo que más ancho
   ahorra no es el cuerpo sino soltar el nowrap: «Lun · Mié · Vie» sin poder
   cortarse pedía 196 px para esa sola columna, más que la del nombre de la
   ruta. Partido en dos renglones ocupa la mitad y la fila no crece, porque
   al lado hay celdas que ya usaban dos o tres. */
@media (max-width: 640px) {
  .tabla { font-size: 11.5px; }

  .tabla th {
    padding: 7px 8px;
    font-size: 9.5px;
    letter-spacing: .06em;
  }

  .tabla td { padding: 6px 8px; }

  .tabla td.col-ruta,
  .tabla .sin-corte { white-space: normal; }

  /* La insignia también se deja cortar. Lo pensé al revés primero —que
     partida en dos renglones se leería como dos estados— pero «Sin novedad
     reportada» pide 120 px y la columna tiene 98: entera no entraba, se
     cortaba a la mitad y quedaba «Sin nove». Dos renglones adentro de la
     píldora se entienden; media palabra no. */
  .tabla .insignia { white-space: normal; }
}

/* Mapa esquemático --------------------------------------------------------- */
.mapa {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--borde);
  background: repeating-linear-gradient(135deg, var(--teal-papel) 0 10px, #E4F1EC 10px 20px);
  transition: height 220ms ease;
}

.mapa__marca {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--texto-suave);
  pointer-events: none;
}

.mapa__panel {
  position: absolute;
  background: rgba(255, 255, 255, .96);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(12, 74, 56, .18);
  padding: 11px 13px;
}
.mapa__panel--leyenda { left: 14px; bottom: 14px; }


.mapa__chincheta {
  position: absolute;
  width: 24px; height: 24px;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .28);
}

.leyenda { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; margin-top: 7px; }
.leyenda > span { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.leyenda i { flex: 0 0 auto; font-style: normal; display: block; }

/* Avisos -------------------------------------------------------------------- */
.aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--radio);
  padding: 11px 13px;
  border-left: 4px solid var(--ambar);
  background: #FDF0E1;
}
.aviso[hidden] { display: none; }
.aviso--error { background: #FDE9E8; border-left-color: var(--estado-suspendida); }
.aviso--ok { background: var(--verde-claro); border-left-color: var(--teal-activo); }
.aviso--oscuro { background: rgba(255, 255, 255, .07); }
.aviso__punto { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; background: var(--ambar); }
.aviso__titulo { font-size: 13.5px; font-weight: 800; color: var(--verde-900); }
.aviso__texto { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: #55534D; }
.aviso--oscuro .aviso__titulo { color: #fff; }
.aviso--oscuro .aviso__texto { color: rgba(255, 255, 255, .72); }

/* Cápsulas de vista de ejemplo ---------------------------------------------- */
.demos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.demos__rotulo { letter-spacing: .1em; text-transform: uppercase; color: #A3A199; }

.capsula {
  height: 26px;
  padding: 0 12px;
  white-space: nowrap;
  flex: 0 0 auto;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--borde);
  background: var(--papel);
  color: var(--texto-tenue);
}
.capsula[aria-pressed="true"] {
  border-color: var(--verde-900);
  background: var(--verde-claro);
  color: var(--verde-900);
}
.demos--oscuro .demos__rotulo { color: rgba(255, 255, 255, .45); }
.demos--oscuro .capsula {
  border-color: rgba(255, 255, 255, .25);
  background: transparent;
  color: rgba(255, 255, 255, .7);
}
.demos--oscuro .capsula[aria-pressed="true"] {
  border-color: var(--ambar);
  background: rgba(240, 140, 46, .18);
  color: var(--ambar);
}

/* Diálogos genéricos --------------------------------------------------------- */
.dialogo-velo {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(12, 74, 56, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.dialogo-velo[hidden] { display: none; }

.dialogo {
  position: relative;
  background: var(--papel);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(12, 74, 56, .38);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.dialogo--ancho { max-width: 900px; }
.dialogo__filo-rojo { height: 5px; background: var(--estado-suspendida); }
.dialogo__encabezado {
  padding: 13px 16px;
  border-bottom: 1px solid #EAE8E1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dialogo__cuerpo { padding: 20px 22px 22px; overflow: auto; }
.dialogo__pie {
  padding: 12px 16px;
  border-top: 1px solid #EAE8E1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #FBFAF7;
}
.dialogo__cerrar {
  width: 32px; height: 32px;
  border: 1px solid var(--borde-2);
  border-radius: 6px;
  background: var(--papel);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
}

.boton-peligro {
  height: 42px;
  padding: 0 18px;
  white-space: nowrap;
  border: 0;
  border-radius: 6px;
  background: var(--estado-suspendida);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

/* Cuadrículas reutilizables --------------------------------------------------- */
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 24px;
  align-items: start;
}

.columna-pegajosa { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Adaptación ------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .columna-pegajosa { position: static; }
  .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .banda__titulo { font-size: 30px; }
  .banda--media, .banda--larga { padding-bottom: 26px; }
  .flotante--m56, .flotante--m58, .flotante--m72, .flotante--m76 { margin-top: 16px; }
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* El hero, más bajo. En el teléfono la mitad de la pantalla se la llevaba
     un título de dos renglones y aire: lo que se viene a hacer está abajo.
     (El hueco que reserva la banda para la cabecera se ajusta más abajo, junto
     a la regla que lo pone.) */
  .banda__cuerpo, .banda__interior { padding-top: 10px; }
  .banda__interior { gap: 14px; }
  .banda--corta { padding-bottom: 16px; }
  .banda__titulo { font-size: 26px; }
  .banda__bajada { font-size: 13.5px; line-height: 1.5; }

  /* La banda de denuncias lleva la bajada un punto más grande que el resto
     —.banda--ambar .banda__bajada, dos clases— y por eso se quedaba en 15.5 px
     en el teléfono mientras las otras cinco páginas bajaban a 13.5: la regla de
     arriba tiene una sola clase y perdía. Acá va con las dos, para que empate y
     gane por estar más abajo. */
  .banda--ambar .banda__bajada { font-size: 13.5px; }

  /* Las tres cifras de convocatorias iban una debajo de otra: con el gap de 28
     y rótulos como «CIERRAN ESTA SEMANA» no entraban dos en un renglón, y el
     hero se iba a 531 px —dos tercios de la pantalla del teléfono—. Repartidas
     en tres columnas y con el rótulo en dos renglones, la misma información
     ocupa un cuarto de eso. */
  .banda__cifras { gap: 12px; width: 100%; }
  .banda__cifras > * { flex: 1 1 0; min-width: 0; }
  .banda__cifra, .banda--ambar .banda__cifra { font-size: 22px; }
  .banda__cifra-rotulo { font-size: 9.5px; letter-spacing: .06em; line-height: 1.25; }

  .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; }
  /* Las filas del archivo, del mismo tamaño que las tarjetas de noticias de
     la portada. Eran dos piezas distintas para lo mismo —una noticia— y en el
     teléfono se notaba: 313 px de alto contra 227, con el título en 18 px
     contra 13.5. Ahora las medidas son las mismas y se leen como una sola
     cosa al pasar de una página a la otra. */
  .fila { padding: 8px 11px 10px; gap: 8px; }
  .fila__miniatura { flex: 0 0 100%; width: 100%; height: 120px; }
  .fila__lado { flex: 1 1 100%; }
  .fila__seccion { font-size: 9.5px; }
  .fila__titulo { margin-top: 3px; font-size: 13.5px; }
  .fila__bajada { margin-top: 4px; font-size: 12px; }
  .fila__fecha { margin-top: 5px; font-size: 10.5px; }
  .mapa__panel--leyenda { position: static; margin: 12px; }
}

/* Fotos que el vecino adjunta a la denuncia */
.foto-previa--cargada {
  position: relative;
  padding: 0;
  border: 1px solid var(--borde-2);
  overflow: hidden;
}
.foto-previa--cargada img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foto-previa__quitar {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 74, 56, .78);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
.foto-previa__quitar:hover { background: var(--verde-900); }

/* ==========================================================================
   Foto de fondo en los encabezados de las páginas internas
   --------------------------------------------------------------------------
   La portada no entra acá: su encabezado ya lleva la foto de la nota
   destacada, que es lo que tiene que mostrar.

   El proyecto trae una: la vista aérea de Oruro. Desde el panel se puede
   subir otra y esa manda. Si no hay ninguna de las dos, nada de esto se
   aplica —el body no lleva la clase— y cada banda se queda con su color.

   Encima de la foto va un velo. No es decoración: sin él el texto blanco cae
   sobre un cielo claro y deja de leerse.

   El velo es negro y no verde. Un velo teñido convierte la foto en una
   textura del color de la marca: la ciudad se ve, pero se ve verde, y la foto
   deja de parecer una foto. El negro solo baja el brillo —los techos rojos
   siguen rojos, el cielo sigue celeste— y es lo que hace falta para el
   contraste, ni más ni menos.

   Tampoco es parejo: va más cerrado arriba, donde el menú pasa sobre el
   cielo, y se abre en el medio, que es donde está la ciudad y vale la pena
   verla. Cuánto abrirlo se midió sobre la foto de verdad, pixel por pixel
   debajo de cada texto (promedio, y el peor pixel):

     menú blanco 12.5 px ..... 6.9   peor 5.6   (pide 4.5)
     rótulo ámbar 11 px ...... 8.9   peor 2.6   (pide 4.5)
     titular blanco 38 px ... 12.9   peor 3.0   (pide 3)
     bajada blanca 15 px .... 11.6   peor 3.2   (pide 4.5)
     cifra blanca 30 px ..... 14.1   peor 3.3   (pide 3)
     cifra ámbar 30 px ...... 11.1   peor 2.6   (pide 3)
     cifra-rótulo 11 px ..... 10.1   peor 3.8   (pide 4.5)

   El menú pasa hasta en el peor pixel: para eso está la capucha. Abajo los
   promedios sobran, y lo que cae por debajo del mínimo son puntos sueltos
   —un techo de calamina, una nube, el manto blanco de la Virgen—. Para esos
   está la sombra de texto que va más abajo, que es lo que usa cualquier
   portal con texto sobre foto.

   Si alguna vez se prefiere la garantía dura —que ningún pixel baje del
   mínimo, sea cual sea la foto que suban desde el panel— hay que volver al
   velo parejo en .80, y ahí la foto se ve bastante menos.
   ========================================================================== */

.con-foto-de-fondo .banda {
  background-color: var(--teal-base);
  background-image:
    linear-gradient(
      rgba(0, 0, 0, .62) 0,
      rgba(0, 0, 0, .62) 48px,
      rgba(0, 0, 0, .40) 124px,
      rgba(0, 0, 0, .58) 100%),
    url('../api/publico/imagen?clave=fondo');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* La banda de denuncias no lleva velo naranja: la regla de arriba ya la
   alcanza y la foto se ve igual que en el resto. Lo único propio es el color
   del texto —sobre la foto no puede quedar el verde oscuro que usaba cuando
   el fondo era naranja plano— y el color de abajo, que solo se ve si la foto
   no carga: ahí la sección tiene que seguir siendo la naranja. */
.con-foto-de-fondo .banda--ambar { background-color: var(--naranja); }

.con-foto-de-fondo .banda--ambar,
.con-foto-de-fondo .banda--ambar .banda__rotulo,
.con-foto-de-fondo .banda--ambar .banda__bajada,
.con-foto-de-fondo .banda--ambar .banda__cifra,
.con-foto-de-fondo .banda--ambar .banda__cifra-rotulo { color: #fff; }

/* Los tres textos que el velo aflojado dejaba cortos.

   El ámbar de marca (#FBBF6B) sobre la foto se queda en 2.4 contra los puntos
   más claros, por debajo del 3 que pide un texto grande. Este es el mismo
   ámbar aclarado: sube a 3.2 y se sigue leyendo como ámbar, no como blanco.

   La bajada venía en blanco al 72 %. Al 93 % gana casi dos puntos de
   contraste y la jerarquía con el titular no se pierde: la hacen el cuerpo y
   el peso, no la transparencia, que sobre una foto siempre es mala idea. */
.con-foto-de-fondo .banda__rotulo,
.con-foto-de-fondo .banda__cifra--ambar { color: #FFE0B0; }
.con-foto-de-fondo .banda__bajada { color: rgba(255, 255, 255, .93); }

/* La ayuda de abajo del buscador de rutas venía en blanco al 62 %, que sobre
   el color plano alcanzaba y sobre la foto no: es el texto más chico de la
   banda y el que quedaba peor. */
.con-foto-de-fondo .buscador-zona__ayuda { color: rgba(255, 255, 255, .90); }

/* La cabecera deja de ser un bloque verde y se apoya sobre la foto, que
   entonces empieza arriba de todo y no debajo del menú.

   Va en absolute y no en el flujo a propósito: así la banda arranca en cero y
   la foto y su velo cubren también la franja del menú, sin que haga falta
   saber cuánto mide la cabecera. Lo que la banda reserva abajo es el hueco
   para que el texto no le quede debajo.

   El :has(.banda) es por nota.html, que tiene la cabecera compacta pero no
   tiene banda: ahí no hay foto donde apoyarse y la cabecera se queda verde. */
.con-foto-de-fondo:has(.banda) .cabecera-solida {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 5;
  background: transparent;
}

.con-foto-de-fondo:has(.banda) .banda { padding-top: 58px; }

/* En el teléfono la cabecera mide 52, no 58. Esta regla tiene que ir DESPUÉS
   de la de arriba y no en el bloque de teléfono de más arriba: las dos tienen
   la misma especificidad, así que gana la última, y allá arriba perdía. */
@media (max-width: 640px) {
  .con-foto-de-fondo:has(.banda) .banda { padding-top: 52px; }
  .banda--corta { padding-bottom: 12px; }
}

/* Una foto tiene puntos claros sueltos —un techo de calamina, una nube— y
   debajo de ellos ningún velo razonable alcanza. La sombra resuelve esos
   puntos sin oscurecer la foto entera, que es justamente lo que se quería
   evitar. Es lo mismo que hace cualquier portal con texto sobre imagen. */
.con-foto-de-fondo .banda__rotulo,
.con-foto-de-fondo .banda__titulo,
.con-foto-de-fondo .banda__bajada,
.con-foto-de-fondo .banda__cifra,
.con-foto-de-fondo .banda__cifra-rotulo,
.con-foto-de-fondo .buscador-zona__ayuda,
.con-foto-de-fondo:has(.banda) .cabecera-solida .menu a,
.con-foto-de-fondo:has(.banda) .cabecera-solida .menu-boton {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Enlace de rescate debajo del reproductor de la nota. Va siempre: cuando el
   dueno del video prohibe la reproduccion fuera de su plataforma el recuadro
   de arriba queda inservible, y no hay forma de detectarlo desde el navegador.
   Discreto a proposito —el camino normal es mirar el video ahi mismo. */
.video-salida {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--naranja-texto);
  text-decoration: none;
}
.video-salida::before {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6%22%2F%3E%3Cpath%20d%3D%22M10%2014%2021%203%22%2F%3E%3Cpath%20d%3D%22M21%2014v5a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h5%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6%22%2F%3E%3Cpath%20d%3D%22M10%2014%2021%203%22%2F%3E%3Cpath%20d%3D%22M21%2014v5a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h5%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.video-salida:hover,
.video-salida:focus-visible { text-decoration: underline; }

@media (max-width: 640px) {
  .video-salida { font-size: 12px; }
}

/* Las marcas de principio y fin del recorrido: parte del dibujo, no un
   marcador que se pueda tocar. */
.fin-recorrido { background: none; border: 0; }