/* Revisión visual de alojamientos.
   Blanco y negro, texto de máximo contraste y líneas finas: el peso visual lo
   llevan la fotografía y el espacio en blanco, no los bordes. */

/* El atributo hidden debe ganar siempre: las capas que se muestran con
   display:flex lo pisarían y taparían la página entera. */
[hidden] { display: none !important; }

:root {
  --negro:   #000000;
  --tinta:   #111111;
  --gris:    #5c5c5c;   /* 7:1 sobre blanco */
  --suave:   #8a8a8a;
  --linea:   #a6a6a6;   /* se ve, sin pesar */
  --linea-fuerte: #6f6f6f;
  --linea-suave:  #d8d8d8;   /* separadores dentro de una tarjeta */
  --papel:   #fafafa;
  --verde:   #0f6b32;
  --ambar:   #8a5300;
  --rojo:    #a3121b;

  /* nombres heredados que usan otras hojas del proyecto */
  --gold: #000; --gold-dk: #000; --gold-hi: #333; --gold-lt: #fff;
  --dark: #000; --mid: #111; --gray: #5c5c5c; --cream: #fafafa; --borde: #a6a6a6;
}

body.visual {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--tinta);
  background: #fff;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.visual :where(h1, h2, h3, h4) {
  font-family: inherit; font-weight: 700; letter-spacing: -0.02em; color: var(--negro);
}
body.visual :where(h2) { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; margin: 0 0 10px; }
body.visual a { color: var(--negro); text-decoration: underline; text-underline-offset: 3px; }
body.visual a:hover { color: var(--gris); }

body.visual main { max-width: 1280px; margin-inline: auto; padding: 44px 56px 100px; }
body.con-panel main { margin-right: 420px; }
@media (max-width: 1100px) { body.visual main { padding: 28px 22px 60px; } }
@media (max-width: 900px) { body.con-panel main { margin-right: 0; } }

/* ---------- Cabecera ---------- */

body.visual header.principal {
  background: #fff; color: var(--negro); padding: 18px 56px;
  border-bottom: 1px solid var(--linea);
}
body.visual header.principal h1 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
body.visual header.principal h1 a { color: var(--negro); text-decoration: none; }
body.visual header.principal nav a {
  color: var(--gris); text-decoration: none; font-size: 14px; font-weight: 500;
  border: 0; border-radius: 0; padding: 6px 0; letter-spacing: 0; text-transform: none;
}
body.visual header.principal nav a:hover { background: none; color: var(--negro); }

.pista {
  background: #fff; color: var(--gris); border-bottom: 1px solid var(--linea);
  font-size: 14px; font-weight: 400; padding: 12px 56px; text-align: center;
}
.pista b { color: var(--negro); font-weight: 600; }

/* ---------- Rótulos ---------- */

.section-label {
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--suave); margin-bottom: 12px; display: block;
}
body.visual .subtitulo { color: var(--gris); font-size: 17px; margin: 0 0 30px; max-width: 760px; }

/* ---------- Filtros ---------- */

.resumen-estados { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.ficha-estado {
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--gris);
  background: #fff; border: 1px solid var(--linea); border-radius: 0;
  padding: 8px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .2s, color .2s, background .2s;
}
.ficha-estado b { font-weight: 700; color: var(--negro); }
.ficha-estado:hover { border-color: var(--linea-fuerte); color: var(--negro); }
.ficha-estado.activo { background: var(--negro); border-color: var(--negro); color: #fff; }
.ficha-estado.activo b { color: #fff; }
.ficha-estado.validado.activo { background: var(--verde); border-color: var(--verde); }
.ficha-estado.modificaciones.activo { background: var(--ambar); border-color: var(--ambar); }
.ficha-estado.eliminar.activo { background: var(--rojo); border-color: var(--rojo); }

.filtros-visual {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  padding: 0 0 22px; margin-bottom: 26px; border-bottom: 1px solid var(--linea);
}
.filtros-visual input[type="search"], .filtros-visual select {
  font-family: inherit; font-size: 16px; padding: 11px 14px;
  border: 1px solid var(--linea); border-radius: 0; background: #fff; color: var(--tinta);
}
.filtros-visual input[type="search"] { flex: 1; min-width: 240px; }
.filtros-visual input[type="search"]:focus, .filtros-visual select:focus {
  outline: none; border-color: var(--negro);
}
.resultados { font-size: 15px; color: var(--gris); margin-left: auto; }

/* ---------- Rejilla ---------- */

.rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; }
@media (max-width: 1100px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .rejilla { grid-template-columns: 1fr; } }

.alojamiento {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--linea); cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.alojamiento:hover { border-color: var(--negro); transform: translateY(-2px); }
.alojamiento .rc-media {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: #f0f0f0;
  border-bottom: 1px solid var(--linea);
}
.alojamiento .rc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.alojamiento:hover .rc-img { transform: scale(1.04); }
.alojamiento .rc-cat {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  background: #fff; color: var(--negro); padding: 6px 12px;
}
.alojamiento .rc-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.alojamiento .rc-title { font-size: 19px; font-weight: 700; color: var(--negro); line-height: 1.3; margin-bottom: 6px; }
.alojamiento .rc-meta {
  display: flex; align-items: flex-start; gap: 7px; font-size: 15px; color: var(--gris);
  line-height: 1.45; margin-bottom: 3px;
}
.alojamiento .rc-meta .ic { color: var(--suave); flex-shrink: 0; }
.alojamiento .rc-link {
  margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--negro);
  align-self: flex-start; border-bottom: 1px solid var(--negro); padding-bottom: 1px;
}

.alojamiento .cinta {
  position: absolute; top: 0; right: 0; z-index: 3; color: #fff;
  font-size: 12px; font-weight: 600; padding: 6px 12px;
}
.alojamiento.estado-validado { border-color: var(--verde); }
.alojamiento.estado-modificaciones { border-color: var(--ambar); }
.alojamiento.estado-eliminar { border-color: var(--rojo); }
.alojamiento.estado-eliminar .rc-img { filter: grayscale(.85); }

/* ---------- Ficha ---------- */

.barra-ficha {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--linea);
}
.volver { font-size: 15px; font-weight: 500; color: var(--gris); text-decoration: none; }
.volver:hover { color: var(--negro); }
.navegacion-ficha { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.navegacion-ficha .posicion { font-size: 14px; color: var(--suave); }
.navegacion-ficha .boton {
  width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--linea); background: #fff; color: var(--negro);
  border-radius: 0; font-size: 16px; text-decoration: none; transition: border-color .2s;
}
.navegacion-ficha .boton:hover { border-color: var(--negro); background: #fff; color: var(--negro); }

.barra-estado {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--linea); border-radius: 0; padding: 14px 18px; margin-bottom: 20px;
}
.rotulo-estado { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.pista-estado { display: block; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--gris); margin-top: 2px; }
.segmentos { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.segmento {
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--gris);
  background: #fff; border: 1px solid var(--linea); border-radius: 0;
  padding: 9px 18px; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s;
}
.segmento:hover { border-color: var(--color, var(--negro)); color: var(--negro); }
.segmento.activo { background: var(--color); border-color: var(--color); color: #fff; font-weight: 600; }
.segmento.quitar-estado { color: var(--suave); }

.portada {
  position: relative; overflow: hidden; min-height: 420px;
  background: #f0f0f0 center/cover no-repeat; display: flex; align-items: flex-end;
}
.portada .velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.6) 32%, rgba(0,0,0,.2) 62%, rgba(0,0,0,0) 88%),
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,0) 65%);
}
.portada .texto { position: relative; z-index: 2; padding: 40px 44px; max-width: 760px; color: #fff; }
.portada .eyebrow {
  display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 14px;
}
.portada .eyebrow .linea { width: 28px; height: 2px; background: #fff; flex: none; }
.portada h2 {
  font-size: clamp(32px, 3.6vw, 50px); color: #fff; line-height: 1.1;
  font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px;
}
.portada .enlace-portal {
  display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--negro);
  font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 0;
  text-decoration: none; transition: gap .25s;
}
.portada .enlace-portal:hover { gap: 15px; background: #fff; color: var(--negro); }

.columnas { display: grid; grid-template-columns: 1.7fr 1fr; gap: 56px; margin-top: 40px; align-items: start; }
@media (max-width: 1024px) { .columnas { grid-template-columns: 1fr; gap: 36px; } }

.bloque-texto { margin-bottom: 44px; }
.bloque-texto h3 { font-size: clamp(20px, 2.2vw, 26px); color: var(--negro); line-height: 1.3; margin: 0 0 14px; }
.descripcion { font-size: 17px; color: var(--tinta); line-height: 1.85; white-space: pre-wrap; }

.aside-columna { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 24px; }
@media (max-width: 1024px) { .aside-columna { position: static; } }

.fact-card { border: 1px solid var(--linea); border-radius: 0; background: #fff; padding: 22px 24px; }
.fact-card h3 {
  font-size: 12px; font-weight: 600; color: var(--suave); margin: 0 0 6px;
  letter-spacing: .16em; text-transform: uppercase;
}
.fact-list { display: flex; flex-direction: column; }
.dato-visual {
  display: flex; gap: 13px; padding: 14px 8px; border-bottom: 1px solid var(--linea-suave);
  align-items: flex-start; position: relative; border-radius: 0;
}
.dato-visual:last-child { border-bottom: none; }
.dato-visual .icono { color: var(--suave); flex: none; font-size: 16px; width: 20px; text-align: center; margin-top: 2px; }
.dato-visual .contenido { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.dato-visual .rotulo { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.dato-visual .texto { font-size: 16px; color: var(--tinta); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.dato-visual .texto a { color: var(--negro); }

.servicios-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.servicio-chip {
  font-size: 14px; font-weight: 400; color: var(--tinta); background: var(--papel);
  border: 1px solid var(--linea); border-radius: 0; padding: 7px 14px; position: relative;
}

.galeria-destacada {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 8px; aspect-ratio: 16/9; margin-bottom: 8px;
}
.galeria-destacada .foto:first-child { grid-row: 1 / 3; }
.galeria-visual { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 700px) { .galeria-visual { grid-template-columns: repeat(2, 1fr); } }
.foto { position: relative; overflow: hidden; background: #f0f0f0; border-radius: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.galeria-visual .foto { aspect-ratio: 1; }
.foto:hover img { transform: scale(1.03); }

.cabecera-galeria { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 14px; }
.cabecera-galeria .section-label { margin: 0; }
.cabecera-galeria .cuenta { font-size: 15px; color: var(--suave); }

.tarjeta-ubicacion .detail-map { margin-bottom: 6px; }
.tarjeta-ubicacion .fact-list .dato-visual { border-bottom: none; }
.detail-map { border: 1px solid var(--linea); border-radius: 0; line-height: 0; position: relative; overflow: hidden; }
.mapa-encaje { display: block; width: 100%; height: 220px; border: 0; }
.tapa-mapa { position: absolute; inset: 0; }
.ver-mapa {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 14px; font-weight: 600; color: var(--negro); text-decoration: none;
  border-bottom: 1px solid var(--negro); padding-bottom: 1px; transition: gap .25s;
}
.ver-mapa:hover { gap: 12px; color: var(--negro); background: none; }
.sin-mapa { font-size: 15px; color: var(--suave); margin: 4px 0 0; }

.apartado-vacio {
  color: var(--gris); font-size: 15px; line-height: 1.6; margin: 0; padding: 12px 14px;
  background: var(--papel); border-radius: 0;
}

/* ---------- Elemento gestionable ---------- */

[data-anotable] {
  position: relative;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3 L5 24 L10.5 18.5 L14 27 L18 25.3 L14.5 17 L22 17 Z' fill='%23000' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='8' r='7' fill='%23fff' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M21 11 L26.5 5.5' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 4 2, pointer;
  /* Solo el fondo se atenúa: la marca de revisión debe aparecer al instante. */
  transition: background-color .18s;
}
[data-anotable]:hover { background-color: var(--papel); box-shadow: 0 0 0 1px var(--linea-fuerte); }
.portada[data-anotable]:hover, .foto[data-anotable]:hover {
  background-color: transparent; box-shadow: inset 0 0 0 2px #fff;
}
[data-anotable]:hover::after {
  content: 'clic para revisar'; position: absolute; top: 6px; right: 8px; z-index: 6;
  background: var(--negro); color: #fff; font-size: 11px; font-weight: 500;
  padding: 3px 9px; border-radius: 0; pointer-events: none; letter-spacing: .02em;
}
.portada[data-anotable]:hover::after { top: 14px; right: 14px; inset: auto 14px auto auto; }
.portada .texto [data-anotable] { display: inline-block; padding: 3px 9px; margin-left: -9px; border-radius: 0; }
.portada .texto .eyebrow[data-anotable] { display: inline-flex; }
.portada .texto [data-anotable]:hover { background-color: rgba(255,255,255,.18); box-shadow: none; }
.portada .texto [data-anotable]:hover::after { top: -9px; right: -4px; }

/* Con elementos anidados solo se resalta el más pequeño, que es el que recibe el clic. */
[data-anotable]:has([data-anotable]:hover) { background-color: transparent; box-shadow: none; }
[data-anotable]:has([data-anotable]:hover)::after { content: none; }

[data-anotable].marcado { box-shadow: 0 0 0 2px var(--marca); background-color: #fff; }
.portada[data-anotable].marcado, .foto[data-anotable].marcado { background-color: transparent; }
.portada .texto [data-anotable].marcado { background-color: rgba(255,255,255,.16); }
[data-anotable].marcado::before {
  content: ''; position: absolute; top: 0; left: 0; z-index: 7;
  width: 24px; height: 22px; background-color: var(--marca);
  background-repeat: no-repeat; background-position: center;
  background-size: 13px 13px; background-image: var(--dibujo);
}
[data-anotable].marca-validado { --marca: var(--verde); }
[data-anotable].marca-corregir, [data-anotable].marca-modificaciones { --marca: var(--ambar); }
[data-anotable].marca-anadir { --marca: var(--negro); }
[data-anotable].marca-eliminar { --marca: var(--rojo); }
[data-anotable].destacado { animation: latido 1.4s ease-out; }

@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 2px var(--marca, var(--negro)); }
  35% { box-shadow: 0 0 0 7px rgba(0,0,0,.13); }
}

/* ---------- Menú ---------- */

.menu-contextual {
  position: absolute; z-index: 900; background: #fff; border: 1px solid var(--linea);
  border-radius: 0; box-shadow: 0 12px 34px rgba(0,0,0,.14); min-width: 268px; padding: 6px;
}
.menu-contextual .titulo {
  padding: 9px 12px 11px; color: var(--suave); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-bottom: 1px solid var(--linea-suave); margin-bottom: 5px;
}
.menu-contextual button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; padding: 11px 12px; border-radius: 0; cursor: pointer;
  font-family: inherit; font-size: 15.5px; font-weight: 400; color: var(--tinta);
  transition: background .15s;
}
.menu-contextual button:hover { background: var(--papel); }
.menu-contextual .separador { height: 1px; background: var(--linea-suave); margin: 5px 0; }

/* ---------- Panel ---------- */

.abrir-panel {
  position: fixed; right: 26px; bottom: 26px; z-index: 500;
  background: var(--negro); color: #fff; border: 0; padding: 14px 24px; border-radius: 0;
  font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.abrir-panel:hover { background: #262626; }
.abrir-panel b { margin-left: 7px; background: rgba(255,255,255,.22); padding: 1px 9px; border-radius: 0; }

.panel-revision {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; z-index: 600;
  background: #fff; border-left: 1px solid var(--linea);
  box-shadow: -8px 0 30px rgba(0,0,0,.08); display: flex; flex-direction: column;
}
@media (max-width: 900px) { .panel-revision { width: 100%; } }

.panel-cabecera {
  display: flex; align-items: flex-start; gap: 10px; padding: 22px 24px 18px;
  border-bottom: 1px solid var(--linea);
}
.panel-titulo { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.panel-ficha { font-size: 19px; font-weight: 700; line-height: 1.3; margin-top: 3px; color: var(--negro); }
.cerrar-panel {
  margin-left: auto; background: none; border: 1px solid var(--linea); color: var(--gris);
  width: 34px; height: 34px; border-radius: 0; font-size: 18px; cursor: pointer; line-height: 1;
}
.cerrar-panel:hover { border-color: var(--negro); color: var(--negro); }

.panel-cuerpo { padding: 0 0 30px; overflow-y: auto; flex: 1; }

/* El panel tiene tres apartados y solo tres. Cada uno arranca con una barra
   negra a todo el ancho: no hace falta leer nada para ver dónde empieza uno y
   acaba el otro. */
.panel-cuerpo section { padding: 0; }
.panel-cuerpo section + section { margin-top: 26px; }

.panel-cuerpo h4 {
  margin: 0; padding: 15px 24px;
  background: var(--negro); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}

/* El número del apartado, en un cuadrado blanco. */
.panel-cuerpo h4 .numero {
  flex: none; width: 22px; height: 22px; background: #fff; color: var(--negro);
  font-size: 13px; font-weight: 800; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
}

.cuenta-seccion {
  margin-left: auto; background: #fff; color: var(--negro);
  font-size: 12px; font-weight: 800; letter-spacing: 0;
  min-width: 22px; padding: 3px 8px; text-align: center;
}

/* El contenido va sangrado y encerrado, para que se vea de qué barra cuelga. */
.panel-cuerpo .dentro {
  padding: 20px 24px 24px;
  border: 1px solid var(--linea); border-top: 0;
}

/* Dentro del primer apartado hay dos cosas: estado y notas. */
.subapartado + .subapartado { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea-suave); }
.rotulo-sub {
  display: block; margin-bottom: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--suave);
}

.estado-actual { padding: 12px 15px; border-radius: 0; font-size: 15px; font-weight: 600; color: #fff; }
.estado-actual.validado { background: var(--verde); }
.estado-actual.modificaciones { background: var(--ambar); }
.estado-actual.eliminar { background: var(--rojo); }
.estado-actual.ninguno { background: var(--papel); color: var(--gris); font-weight: 400; }

.nota-grande, .nota-item {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: 16px;
  border: 1px solid var(--linea); border-radius: 0; background: #fff;
  resize: vertical; line-height: 1.6; color: var(--tinta);
}
.nota-grande { min-height: 150px; }
.nota-item { min-height: 88px; }
.nota-grande:focus, .nota-item:focus { outline: none; border-color: var(--negro); }

.filtro-marcas { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.filtro-marcas button {
  border: 1px solid var(--linea); background: #fff; padding: 6px 13px; border-radius: 0;
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--gris);
}
.filtro-marcas button:hover { border-color: var(--linea-fuerte); color: var(--negro); }
.filtro-marcas button.activo { background: var(--color, var(--negro)); border-color: transparent; color: #fff; }

.lista-items { display: flex; flex-direction: column; gap: 14px; }
.item-revision { border: 1px solid var(--linea); border-radius: 0; padding: 14px; background: #fff; }
.item-revision.es-nuevo { border-left: 3px solid var(--negro); }
.item-cabecera { display: flex; align-items: center; gap: 10px; }
.punto-marca {
  width: 22px; height: 22px; border-radius: 0; color: #fff; flex: none;
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.item-etiqueta { flex: 1; font-size: 16px; font-weight: 600; color: var(--negro); cursor: pointer; }
.item-etiqueta:hover { text-decoration: underline; }
.quitar { border: 0; background: none; color: var(--suave); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.quitar:hover { color: var(--rojo); }
.item-estado { font-size: 13px; color: var(--suave); margin: 3px 0 10px 32px; }
.titulo-nuevo {
  flex: 1; min-width: 0; font-family: inherit; font-size: 16px; font-weight: 600;
  color: var(--negro); border: 1px solid var(--linea); border-radius: 0; background: #fff; padding: 8px 10px;
}
.titulo-nuevo:focus { outline: none; border-color: var(--negro); }

.pedir-campo {
  width: 100%; margin-top: 16px; padding: 13px; cursor: pointer; border-radius: 0;
  background: #fff; border: 1px dashed var(--linea-fuerte); color: var(--gris);
  font-family: inherit; font-size: 15px; font-weight: 500;
}
.pedir-campo:hover { border-color: var(--negro); color: var(--negro); }

.panel-vacio { color: var(--gris); font-size: 15px; line-height: 1.7; }
.panel-cuerpo .panel-pie { margin: 26px 24px 0; padding-top: 18px; border-top: 1px solid var(--linea-suave); }
.panel-pie { color: var(--suave); font-size: 14px; }

/* ---------- Visor de fotos ---------- */

.visor-foto {
  position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 960;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 34px;
}
.visor-foto img { max-width: 100%; max-height: 100%; border-radius: 0; }

/* ---------- Barra del archivo ---------- */

body.visual .barra-archivo {
  background: #fff; border-bottom: 1px solid var(--linea); color: var(--gris);
  font-size: 14px; padding: 11px 56px;
}
body.visual .barra-archivo.conectada { background: #f4f9f5; color: var(--verde); border-bottom-color: #dceadf; }
body.visual .barra-archivo.aviso { background: #fdf9f0; color: var(--ambar); border-bottom-color: #eee0c6; }
body.visual .enlace-boton { color: var(--negro); }
body.visual .vacio { border: 1px solid var(--linea); border-radius: 0; color: var(--gris); background: #fff; }

/* ---------- Aviso de guardado ---------- */

.sincronizacion {
  position: fixed; left: 22px; bottom: 22px; z-index: 480;
  background: #fff; border: 1px solid var(--linea); color: var(--gris);
  font-size: 13px; padding: 8px 14px; max-width: 420px;
}
.sincronizacion:empty { display: none; }
.sincronizacion.trabajando { border-color: var(--negro); color: var(--negro); }
.sincronizacion.error { border-color: var(--rojo); color: var(--rojo); }

/* ---------- Adjuntos: fotos, vídeos, audios y documentos ---------- */

.zona-soltar {
  border: 1px dashed var(--linea-fuerte); padding: 18px 16px; text-align: center;
  font-size: 14px; color: var(--gris); line-height: 1.5;
}
.zona-soltar.encima { border-color: var(--negro); background: var(--papel); color: var(--negro); }
.zona-soltar b { color: var(--negro); }
.enlace-suelto {
  border: 0; background: none; padding: 0; font: inherit; color: var(--negro);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.progreso-subidas:not(:empty) { margin-top: 12px; display: grid; gap: 8px; }
.subida { font-size: 13px; color: var(--gris); }
.nombre-subida { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.subida .barra { display: block; height: 4px; background: var(--linea-suave); margin-top: 4px; }
.subida .barra span { display: block; height: 100%; background: var(--negro); transition: width .2s linear; }

.galeria-adjuntos, .adjuntos-item {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px;
  margin-top: 12px;
}
.adjuntos-item { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 10px; }

.adjunto { position: relative; margin: 0; border: 1px solid var(--linea); background: #fff; }
.adjunto .vista-adjunto {
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--papel);
}
.adjunto img, .adjunto video, .adjunto iframe {
  width: 100%; height: 100%; object-fit: cover; border: 0; display: block;
}
.adjunto img { cursor: zoom-in; }
.adjunto audio { width: 100%; padding: 0 8px; }
.adjunto .icono-archivo { font-size: 30px; }
.adjunto figcaption { padding: 7px 9px; font-size: 12px; line-height: 1.35; }
.adjunto figcaption a {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--negro);
}
.detalle-adjunto { display: block; color: var(--suave); margin-top: 2px; }
.quitar-adjunto {
  position: absolute; top: 0; right: 0; width: 24px; height: 24px; line-height: 22px;
  border: 1px solid var(--linea); border-top: 0; border-right: 0; background: #fff;
  color: var(--gris); cursor: pointer; font-size: 16px; padding: 0;
}
.quitar-adjunto:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }

.adjuntar-item {
  margin-top: 8px; width: 100%; border: 1px solid var(--linea); background: #fff;
  font: inherit; font-size: 13px; color: var(--gris); padding: 6px 10px; cursor: pointer;
}
.adjuntar-item:hover { border-color: var(--negro); color: var(--negro); }

.panel-ayuda { font-size: 13px; color: var(--gris); margin: 10px 0 0; }

/* Un clip discreto avisa de que ese elemento ya tiene archivos aportados. */
[data-anotable].con-adjuntos:not(:hover)::after {
  content: attr(data-adjuntos);
  position: absolute; right: 0; bottom: 0; z-index: 3;
  background: #fff no-repeat 5px center; border: 1px solid var(--linea);
  border-right: 0; border-bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5 12.3 19.2a4.9 4.9 0 0 1-6.9-6.9l7.7-7.7a3.3 3.3 0 0 1 4.6 4.6l-7.7 7.7a1.6 1.6 0 0 1-2.3-2.3l7.1-7.1'/%3E%3C/svg%3E");
  background-size: 11px 11px;
  font-size: 11px; line-height: 1; padding: 4px 6px 4px 20px; color: var(--gris);
}

/* ---------- Medios aportados en la revisión ---------- */

.cuenta-aportadas:not(:empty) {
  margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--linea);
  font-weight: 600; color: var(--negro);
}

.galeria-visual.aportadas:empty { display: none; }
.galeria-visual.aportadas { margin-top: 14px; }

.foto.aportada { position: relative; box-shadow: 0 0 0 2px var(--negro); }
.sello-nuevo {
  position: absolute; left: 0; top: 0; z-index: 4;
  background: var(--negro); color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 8px; letter-spacing: .04em; pointer-events: none;
}

.anadir-fotos {
  margin-top: 14px; width: 100%; border: 1px dashed var(--linea-fuerte); background: #fff;
  font: inherit; font-size: 14px; color: var(--gris); padding: 12px 14px; cursor: pointer;
}
.anadir-fotos:hover { border-style: solid; border-color: var(--negro); color: var(--negro); }

#medios-aportados:empty { display: none; }
#medios-aportados .galeria-adjuntos {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.cuenta-subidas { font-size: 13px; font-weight: 600; color: var(--negro); margin-bottom: 6px; }

/* Velo al arrastrar archivos sobre la ficha */
.velo-soltar {
  position: fixed; inset: 0; z-index: 620; background: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.velo-soltar span {
  border: 2px dashed var(--negro); padding: 40px 60px;
  font-size: 22px; font-weight: 600; color: var(--negro);
}

/* ---------- Iconos ---------- */

/* Todos los iconos son SVG de trazo (iconos.js): se pintan del color del texto
   que los rodea y no dependen de ninguna tipografía ni de los emojis del
   sistema, que cada ordenador dibujaba a su manera. */
.ico {
  width: 1.05em; height: 1.05em; flex: none;
  vertical-align: -0.16em; pointer-events: none;
}

/* Dibujo en blanco de cada marca, para la insignia de la esquina. */
[data-anotable].marca-validado {
  --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.8 12.6 4.8 4.8L19.2 7.2'/%3E%3C/svg%3E");
}
[data-anotable].marca-corregir, [data-anotable].marca-modificaciones {
  --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4.2L19 9.2a2.1 2.1 0 0 0-3-3L5.2 17 4 20Z'/%3E%3Cpath d='m14.6 7.6 2.8 2.8'/%3E%3C/svg%3E");
}
[data-anotable].marca-anadir {
  --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
[data-anotable].marca-eliminar {
  --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
}

/* Ajustes de tamaño allí donde el icono no acompaña a un texto. */
.menu-contextual button .ico { width: 16px; height: 16px; margin-right: 9px; color: var(--gris); }
.menu-contextual button:hover .ico { color: var(--negro); }
.menu-contextual button .ico.marcada { margin: 0 0 0 auto; color: var(--negro); }

.dato-visual .icono .ico, .alojamiento .rc-meta .ic .ico { width: 17px; height: 17px; }
.punto-marca .ico { width: 13px; height: 13px; vertical-align: -0.18em; }
.filtro-marcas button .ico { width: 13px; height: 13px; }
.ficha-estado .ico { width: 15px; height: 15px; margin-right: 3px; }
.estado-actual .ico { width: 15px; height: 15px; margin-right: 3px; }
.adjunto .icono-archivo .ico { width: 30px; height: 30px; color: var(--gris); }
.quitar-adjunto .ico, .cerrar-panel .ico, .item-cabecera .quitar .ico { width: 14px; height: 14px; }
.adjuntar-item .ico, .pedir-campo .ico, .anadir-fotos .ico { width: 15px; height: 15px; margin-right: 6px; }
.aporte .ico { width: 22px; height: 22px; color: var(--gris); }

/* En el menú, cada opción lleva su icono en su color. */
.menu-contextual button .ico.de-marca { color: var(--color, var(--gris)); }
.menu-contextual button.activo { font-weight: 600; }

/* ---------- Apartados de vídeos y documentos ---------- */

.apartado-medios .lista-medios:not(.vacia) { margin-top: 4px; }
.lista-medios.vacia { display: block; }
.lista-medios.vacia::before {
  content: attr(data-vacio);
  display: block; border: 1px dashed var(--linea); padding: 22px 20px;
  color: var(--gris); font-size: 15px; line-height: 1.5;
}

.acciones-medios { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.anadir-medio {
  border: 1px solid var(--linea-fuerte); background: #fff; font: inherit; font-size: 14px;
  color: var(--negro); padding: 10px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.anadir-medio:hover { background: var(--negro); border-color: var(--negro); color: #fff; }
.anadir-medio .ico { width: 16px; height: 16px; }


/* ---------- Avisos y preguntas ---------- */

.capa-dialogo {
  position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
body.con-dialogo { overflow: hidden; }

.dialogo {
  background: #fff; border: 1px solid var(--negro); width: min(520px, 100%);
  max-height: 88vh; overflow-y: auto; padding: 26px 28px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.cabecera-dialogo { display: flex; align-items: flex-start; gap: 13px; }
.cabecera-dialogo h2 {
  font-size: 21px; line-height: 1.25; margin: 0; letter-spacing: -0.01em;
}
.marca-dialogo { flex: none; margin-top: 1px; color: var(--negro); }
.marca-dialogo .ico { width: 22px; height: 22px; }
.dialogo.peligro .marca-dialogo { color: var(--rojo); }
.dialogo.error .marca-dialogo { color: var(--rojo); }

.cuerpo-dialogo { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--tinta); }
.cuerpo-dialogo p { margin: 0 0 10px; }
.cuerpo-dialogo p:last-child { margin-bottom: 0; }
.lista-dialogo {
  margin: 10px 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--linea-suave); font-size: 14px;
}
.lista-dialogo li {
  padding: 7px 0; border-bottom: 1px solid var(--linea-suave);
  overflow-wrap: anywhere; color: var(--gris);
}

.campo-dialogo { display: block; margin-top: 18px; }
.campo-dialogo span {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--suave); margin-bottom: 7px;
}
.campo-dialogo input {
  width: 100%; border: 1px solid var(--linea-fuerte); background: #fff;
  font: inherit; font-size: 15px; padding: 11px 13px; color: var(--tinta);
}
.campo-dialogo input:focus { outline: 2px solid var(--negro); outline-offset: -1px; }

.botones-dialogo { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.boton-dialogo {
  border: 1px solid var(--negro); font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 20px; cursor: pointer;
}
.boton-dialogo.principal { background: var(--negro); color: #fff; }
.boton-dialogo.principal:hover { background: #fff; color: var(--negro); }
.boton-dialogo.secundario { background: #fff; color: var(--negro); border-color: var(--linea-fuerte); }
.boton-dialogo.secundario:hover { border-color: var(--negro); }
.dialogo.peligro .boton-dialogo.principal { background: var(--rojo); border-color: var(--rojo); }
.dialogo.peligro .boton-dialogo.principal:hover { background: #fff; color: var(--rojo); }

/* ---------- Lo aportado en la revisión ---------- */

/* Las fotos que sube quien revisa no se revisan a sí mismas: ni cursor de
   edición, ni distintivo de "clic para revisar" tapando el botón de quitar. */
.foto.aportada { cursor: zoom-in; box-shadow: 0 0 0 2px var(--negro); }
.foto.aportada:hover::after { content: none; }
.foto.aportada .quitar-adjunto { opacity: 1; z-index: 5; }

/* El sello va sobre la miniatura, en la esquina de arriba a la izquierda. */
.vista-adjunto { position: relative; }
.adjunto .sello-nuevo { left: 0; top: 0; }

/* La entradilla del portal: el texto en negrita que abre la ficha, antes de la
   descripción. Se ve como allí, con más cuerpo que el resto. */
.entradilla {
  font-size: 20px; line-height: 1.55; font-weight: 600; color: var(--negro);
  margin: 0 0 18px; padding-bottom: 18px;
  border-bottom: 1px solid var(--linea-suave);
}
@media (max-width: 700px) { .entradilla { font-size: 18px; } }

/* ---------- Globo con la indicación ---------- */

/* Al pasar el puntero por algo marcado se lee lo que se indicó, sin abrir el
   panel. Sustituye al aviso del navegador, que tardaba y cortaba el texto. */
.globo-nota {
  position: fixed; z-index: 700; max-width: 340px;
  background: #fff; border: 1px solid var(--negro);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  padding: 0; pointer-events: none;
}

.globo-cabecera {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-bottom: 1px solid var(--linea-suave);
  background: var(--papel);
  font-size: 13px; line-height: 1.3;
}
.globo-cabecera .ico { width: 15px; height: 15px; color: var(--marca, var(--negro)); }
.globo-cabecera b { font-weight: 600; color: var(--marca, var(--negro)); white-space: nowrap; }
.globo-campo {
  margin-left: auto; padding-left: 10px; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.globo-nota-texto {
  margin: 0; padding: 12px 13px; font-size: 15px; line-height: 1.5;
  color: var(--tinta); overflow-wrap: anywhere;
}
.globo-sin-nota {
  margin: 0; padding: 10px 13px; font-size: 13px; color: var(--suave); font-style: italic;
}

/* Lo que ya publica el portal, dentro de los apartados de medios. */
#portal-videos:empty, #portal-documentos:empty { display: none; }
.adjunto.del-portal { border-color: var(--linea); }
.adjunto.del-portal .vista-adjunto { background: #fff; }
.adjunto.del-portal audio { width: 100%; padding: 0 8px; }
.adjunto.del-portal.documento .vista-adjunto { background: var(--papel); }

/* ---------- Tarjetas anchas de vídeos, audioguías y documentos ---------- */

/* Los títulos del portal son largos ("Audioguía: Cáceres ciudad accesible"),
   así que estas tarjetas son más anchas y el título se parte en varias líneas
   en vez de cortarse. */
.galeria-adjuntos.anchas {
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}
.galeria-adjuntos.anchas .adjunto figcaption { padding: 11px 13px 12px; font-size: 13.5px; }
.galeria-adjuntos.anchas .adjunto figcaption a {
  white-space: normal; overflow: visible; text-overflow: clip;
  line-height: 1.4; font-weight: 500;
}
.galeria-adjuntos.anchas .detalle-adjunto { margin-top: 5px; word-break: break-word; }

/* El documento no necesita media tarjeta de hueco para un icono. */
.galeria-adjuntos.anchas .adjunto.documento .vista-adjunto { aspect-ratio: auto; padding: 18px 0; }
.galeria-adjuntos.anchas .adjunto.documento .icono-archivo .ico { width: 34px; height: 34px; }

/* El audio tampoco: solo hace falta el reproductor. */
.galeria-adjuntos.anchas .adjunto.audio .vista-adjunto {
  aspect-ratio: auto; padding: 14px 10px; background: var(--papel);
}
.galeria-adjuntos.anchas .adjunto.audio audio { width: 100%; height: 36px; }

/* ---------- Recorrido de una ruta ---------- */

.mapa-recorrido {
  height: 420px; border: 1px solid var(--linea); margin-bottom: 16px;
  background: var(--papel);
}
@media (max-width: 700px) { .mapa-recorrido { height: 300px; } }

/* Dónde empieza y dónde acaba. */
.punta-ruta span {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; background: var(--negro); color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 700;
  border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.4);
}

.descarga-recorrido {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 11px 14px;
  border: 1px solid var(--linea); background: var(--papel);
  font-size: 15px;
}
.descarga-recorrido .ico { width: 17px; height: 17px; color: var(--gris); }
.descarga-recorrido span { color: var(--suave); font-size: 13px; }

/* Los puntos por los que pasa, en orden. */
.paradas { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); }
.parada {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 15px; border-bottom: 1px solid var(--linea-suave);
}
.parada:last-child { border-bottom: 0; }
.orden-parada {
  flex: none; width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  background: var(--negro); color: #fff;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.datos-parada { flex: 1; min-width: 0; line-height: 1.35; }
.datos-parada b { display: block; font-size: 16px; font-weight: 600; color: var(--negro); }
.papel-parada { font-size: 13px; color: var(--suave); }
.ir-al-punto { flex: none; color: var(--gris); display: flex; }
.ir-al-punto:hover { color: var(--negro); }
.ir-al-punto .ico { width: 17px; height: 17px; }

/* El primero y el último se distinguen, como en el mapa. */
.parada:first-child .orden-parada, .parada:last-child .orden-parada { background: var(--negro); }
.parada:first-child .papel-parada, .parada:last-child .papel-parada {
  color: var(--negro); font-weight: 600;
}

/* Los puntos del itinerario, sobre el mapa. */
.parada-mapa span {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; background: #fff; color: var(--negro);
  font-family: inherit; font-size: 12px; font-weight: 700;
  border: 2px solid var(--negro); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.parada:not(:has(.papel-parada)) { opacity: 1; }

/* Sobre el mapa no se enseña el distintivo de revisar ni el cursor de edición:
   ahí se arrastra, se hace zoom y se pulsan los puntos. */
.mapa-recorrido, .mapa-recorrido * { cursor: auto; }
.mapa-recorrido .leaflet-grab { cursor: grab; }
.mapa-recorrido .leaflet-dragging .leaflet-grab { cursor: grabbing; }
/* El círculo que se ve es un span dentro del marcador, y la regla de arriba
   se lo comía: hay que nombrarlo también o el cursor no cambia al pasar. */
.mapa-recorrido .leaflet-marker-icon,
.mapa-recorrido .leaflet-marker-icon *,
.mapa-recorrido .leaflet-control a,
.mapa-recorrido .leaflet-popup a { cursor: pointer; }
.apartado-recorrido:has(.mapa-recorrido:hover) { background-color: transparent !important; box-shadow: none !important; }
.apartado-recorrido:has(.mapa-recorrido:hover)::after { content: none !important; }

/* Al pasar por encima, el punto crece un poco: así se ve que se puede pulsar. */
.parada-mapa span, .punta-ruta span { transition: transform .12s ease, background-color .12s ease; }
.parada-mapa:hover span {
  transform: scale(1.25); background: var(--negro); color: #fff;
}
.punta-ruta:hover span { transform: scale(1.18); }