:root {
  --fondo: #f6f7f9;
  --panel: #ffffff;
  --texto: #1b1f24;
  --suave: #6b7280;
  --borde: #e2e5ea;
  --azul: #1a5fb4;
  --verde: #1a7f4b;
  --nuevo: #b45309;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14171c;
    --panel: #1c2027;
    --texto: #e7e9ec;
    --suave: #9aa2ad;
    --borde: #2c323b;
    --azul: #6aa8f0;
    --verde: #5cc98d;
    --nuevo: #e0a458;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main { max-width: 1000px; margin: 0 auto; padding: 24px 16px 60px; }

h1 { font-size: 22px; margin: 0 0 18px; }

a { color: var(--azul); }

.secundario { color: var(--suave); font-size: 14px; }

/* cabecera */
.cabecera {
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.barra {
  max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; min-height: 56px;
}

/* marca */
.marca {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--texto);
  margin-right: 8px; flex-shrink: 0;
}
.logo {
  width: 34px; height: 34px; object-fit: contain; flex: none;
}
.marca-txt { display: flex; flex-direction: column; line-height: 1.1; }
.marca-txt { font-weight: 660; font-size: 15.5px; letter-spacing: -.01em; }
.marca-txt small {
  font-weight: 400; font-size: 11.5px; color: var(--suave);
  letter-spacing: .02em;
}

/* secciones */
.menu { display: flex; gap: 2px; margin-right: auto; }
.menu .enlace {
  position: relative;
  padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 550;
  color: var(--suave); text-decoration: none;
  transition: background .12s, color .12s;
}
.menu .enlace:hover { background: color-mix(in srgb, var(--suave) 12%, transparent); color: var(--texto); }
.menu .enlace.activo { color: var(--azul); background: color-mix(in srgb, var(--azul) 12%, transparent); }

/* usuario */
.usuario { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 22px;
  text-decoration: none; color: var(--texto);
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.chip:hover { background: color-mix(in srgb, var(--suave) 12%, transparent); }
.chip.activo { border-color: var(--azul); }
.inicial {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--azul) 22%, transparent);
  color: var(--azul); font-weight: 700; font-size: 13px;
}
.chip .nombre {
  font-size: 13.5px; font-weight: 550;
  max-width: 120px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.salir {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 11px; border-radius: 8px;
  font-size: 13.5px; color: var(--suave); text-decoration: none;
  transition: background .12s, color .12s;
}
.salir:hover { background: color-mix(in srgb, #c0392b 14%, transparent); color: #c0392b; }
@media (prefers-color-scheme: dark) { .salir:hover { color: #f2b8b5; } }

/* Selector de idioma. Dos codigos de dos letras y no un desplegable: son solo
   dos idiomas, y un <select> para elegir entre dos cuesta dos clics en vez de
   uno. Vive fuera del bloque de usuario para que tambien se vea sin haber
   entrado, que es justo donde primero hace falta. */
.idiomas { display: flex; gap: 2px; margin-left: auto; }
.barra .usuario ~ .idiomas { margin-left: 0; }
.idioma {
  padding: 6px 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
  color: var(--suave); text-decoration: none;
  transition: background .12s, color .12s;
}
.idioma:hover { background: color-mix(in srgb, var(--suave) 16%, transparent);
               color: var(--texto); }
.idioma.activo { background: color-mix(in srgb, var(--azul) 14%, transparent);
                 color: var(--azul); }
.idioma.activo:hover { cursor: default; }

/* Hoja de telemarketing. Se rellena con el propietario al telefono, asi que
   manda que se tabule rapido y que nada obligue a buscar con el raton: campos
   anchos, en el mismo orden que el PDF y que las preguntas de la llamada. */
.hoja-captacion { display: flex; flex-direction: column; gap: 14px; }
.hoja-fila { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.hoja-captacion .campo { display: flex; flex-direction: column; gap: 4px; }
.hoja-captacion .campo.crece { flex: 1 1 240px; }
.hoja-captacion .campo.estrecho { flex: 0 0 92px; }
.hoja-captacion .campo input,
.hoja-captacion .campo textarea { width: 100%; }
.hoja-captacion label,
.hoja-captacion .etiqueta-grupo { font-size: 13px; color: var(--suave); }
.hoja-captacion textarea { resize: vertical; min-height: 76px; }

.opciones { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
.opcion {
  display: flex; align-items: center; gap: 5px;
  padding: 7px 10px; border: 1px solid var(--borde); border-radius: 7px;
  font-size: 13.5px; cursor: pointer;
}
.opcion:has(input:checked) {
  border-color: var(--azul); color: var(--azul);
  background: color-mix(in srgb, var(--azul) 10%, transparent);
}
.opcion input { margin: 0; }

.extras { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 2px; }
.extras .interruptor { padding: 7px 10px; border: 1px solid var(--borde);
                       border-radius: 7px; font-size: 13.5px; }
.extras .interruptor:has(input:checked) {
  border-color: var(--verde); color: var(--verde);
  background: color-mix(in srgb, var(--verde) 10%, transparent);
}

/* «sin preguntar» es la ausencia de respuesta, no una respuesta: en azul como
   las otras tres parecia que alguien habia contestado eso. */
.opcion.neutra:has(input:checked) {
  border-color: var(--borde); color: var(--suave); background: transparent;
}

.hoja-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Con borde y no como texto azul suelto: el boton de recordatorios ya paso por
   esto y nadie lo pulsaba porque no parecia pulsable. */
.hoja-acciones .boton:not(.ver) { border-color: var(--borde); color: var(--texto); }
.hoja-acciones .boton:not(.ver):hover { border-color: var(--azul); color: var(--azul); }
.boton.peligro-suave { color: #c0392b; border-color: color-mix(in srgb, #c0392b 35%, var(--borde)); }
.boton.peligro-suave:hover { background: color-mix(in srgb, #c0392b 12%, transparent); }
.pie-hoja { margin: 0; font-size: 12.5px; }

footer {
  max-width: 1000px; margin: 0 auto; padding: 0 16px 40px;
  color: var(--suave); font-size: 13px;
}

/* acceso */
.acceso { max-width: 400px; margin: 52px auto; }
.acceso .sello { display: block; margin: 0 auto 18px; }
.acceso h1 { text-align: center; }
.acceso form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.acceso label { font-size: 14px; color: var(--suave); }

input, select, button {
  font: inherit; padding: 9px 11px;
  border: 1px solid var(--borde); border-radius: 7px;
  background: var(--panel); color: var(--texto);
}
button { cursor: pointer; }
.acceso button { background: var(--azul); color: #fff; border-color: var(--azul); font-weight: 600; }

.aviso { padding: 14px 16px; border-radius: 8px; margin: 16px 0; font-size: 15px; }
.aviso p { margin: 0 0 8px; }
.aviso p:last-child { margin: 0; }
.aviso.ok { background: color-mix(in srgb, var(--verde) 12%, transparent); }
.aviso.mal { background: color-mix(in srgb, #c0392b 14%, transparent); }
.aviso.dev {
  background: color-mix(in srgb, var(--nuevo) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--nuevo) 45%, transparent);
}
.aviso.dev .boton.ver { display: inline-block; }
.aviso code { font-size: 13px; }

/* filtros */
.filtros {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 20px;
}
.fila-principal {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: end;
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.crece { flex: 1 1 220px; }
.campo label { font-size: 12px; color: var(--suave); font-weight: 600; }
.campo input { width: 135px; }
.campo.crece select { width: 100%; }
.campo.busca-texto { flex: 2 1 320px; }
.campo.busca-texto input { width: 100%; }

/* buscador de municipio: se monta encima del <select>, que queda oculto
   pero sigue siendo quien lleva el valor al formulario. */
.combo { position: relative; }
.combo.activo > select { display: none; }
.campo .combo-entrada { width: 100%; box-sizing: border-box; padding-right: 30px; }
.combo-entrada:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 20%, transparent);
}
.combo-borrar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--suave); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 3px 7px; border-radius: 999px;
}
.combo-borrar:hover { color: var(--texto); background: rgba(128,128,128,.2); }
.combo-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 5px; list-style: none;
  max-height: 264px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.combo-opcion {
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px;
}
.combo-opcion.activa { background: color-mix(in srgb, var(--azul) 16%, transparent); }
.combo-opcion.elegida { font-weight: 600; color: var(--azul); }
.combo-vacio { padding: 12px 10px; color: var(--suave); font-size: 14px; }

.interruptor {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; cursor: pointer; padding-bottom: 9px;
  user-select: none;
}
.interruptor input { width: 17px; height: 17px; cursor: pointer; }

.cargando { font-size: 13px; color: var(--suave); opacity: 0; padding-bottom: 10px; }
.htmx-request .cargando, .cargando.htmx-request { opacity: 1; }

.avanzado { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 10px; }
.avanzado summary {
  font-size: 13.5px; color: var(--azul); cursor: pointer;
  list-style: none; width: fit-content;
}
.avanzado summary::-webkit-details-marker { display: none; }
.avanzado summary::before { content: "▸ "; }
.avanzado[open] summary::before { content: "▾ "; }
.fila-avanzada {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: end; margin-top: 12px;
}
.limpiar { font-size: 13.5px; margin-left: auto; padding-bottom: 10px; }
.limpiar.exportar { margin-left: auto; }
.limpiar.exportar + .limpiar { margin-left: 0; }

/* La cabecera es sticky: sin este margen, al subir al cambiar de pagina el
   recuento queda medio tapado por ella. */
#lista { scroll-margin-top: 70px; }
.recuento { color: var(--suave); font-size: 14.5px; margin: 0 0 14px; }
.recuento strong { color: var(--texto); font-size: 16px; }

/* rejilla de fichas */
.titular { margin-bottom: 16px; }
.titular h1 { margin-bottom: 2px; }
.titular .secundario { margin: 0; }

.rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

.ficha {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.ficha:hover { box-shadow: 0 6px 20px rgb(0 0 0 / .10); transform: translateY(-2px); }
.ficha.revisada { opacity: .55; }
.ficha.revisada:hover { opacity: 1; }

/* foto */
.foto {
  position: relative; display: block;
  aspect-ratio: 4 / 3; background: var(--borde);
  overflow: hidden; text-decoration: none;
}
.foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background: var(--borde);
}
.sin-foto {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--suave); font-size: 13px;
  background: repeating-linear-gradient(45deg,
      transparent, transparent 9px,
      color-mix(in srgb, var(--suave) 8%, transparent) 9px,
      color-mix(in srgb, var(--suave) 8%, transparent) 18px);
}

.cinta {
  position: absolute; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 20px;
  backdrop-filter: blur(4px);
}
.cinta.nuevo    { top: 10px; left: 10px;  background: #b45309; color: #fff; }
.cinta.revisado { top: 10px; left: 10px;  background: var(--verde); color: #fff; }
.cinta.portal   { bottom: 10px; right: 10px; text-transform: none; font-weight: 500;
                  background: rgb(0 0 0 / .62); color: #fff; }

/* cuerpo */
.cuerpo { padding: 12px 14px 4px; flex: 1; }
.precio { font-size: 21px; font-weight: 680; line-height: 1.2; }
.lugar { font-size: 15px; font-weight: 550; margin-top: 2px; }

.rasgos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rasgos span {
  font-size: 12px; color: var(--suave);
  border: 1px solid var(--borde); border-radius: 6px; padding: 2px 7px;
}

.alerta {
  margin-top: 9px; font-size: 12.5px; padding: 5px 8px; border-radius: 6px;
  color: #b3261e; background: color-mix(in srgb, #b3261e 11%, transparent);
}
@media (prefers-color-scheme: dark) { .alerta { color: #f2b8b5; } }

.tambien {
  margin-top: 9px; font-size: 12.5px; padding: 5px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--azul) 11%, transparent);
}
.fecha { margin-top: 9px; font-size: 12.5px; color: var(--suave); }

.acciones-ficha { display: flex; gap: 8px; padding: 0 14px 14px; align-items: stretch; }
.acciones-ficha .boton { flex: 1; padding: 9px 10px; }
.hueco-globo { display: contents; }

.fecha .lleva {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  border-radius: 999px; font-weight: 700; font-size: 11.5px;
  background: color-mix(in srgb, var(--nuevo) 16%, transparent);
  color: var(--nuevo);
}

.alerta.retirado {
  background: color-mix(in srgb, #b1462f 14%, transparent);
  border: 1px solid color-mix(in srgb, #b1462f 40%, transparent);
  color: var(--texto);
}

/* notas y recordatorio */
.fila-notas { padding: 0 14px 14px; margin-top: -6px; }
.fila-notas .envoltura-notas { display: block; }
.fila-notas .boton { display: block; width: 100%; padding: 9px 10px; }
.boton.notas-abrir {
  background: transparent; border-color: var(--borde); color: var(--suave);
  font-weight: 500;
}
.boton.notas-abrir.citada {
  border-color: color-mix(in srgb, var(--azul) 45%, transparent);
  color: var(--azul); font-weight: 600;
}
.boton.notas-abrir:hover { border-color: var(--azul); color: var(--azul); }
.boton.notas-abrir.toca {
  border-color: var(--nuevo); color: var(--nuevo); font-weight: 600;
  background: color-mix(in srgb, var(--nuevo) 12%, transparent);
}
.globo.notas { width: min(420px, calc(100vw - 32px)); }
.globo .nota-ok { margin: 0 0 10px; font-size: 13px; color: var(--verde); }
.globo .recordatorio {
  margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--azul);
}
.globo .recordatorio.vencido { color: var(--nuevo); }
.form-nota textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); resize: vertical;
}
.form-nota textarea:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 20%, transparent);
}
.fila-nota {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; font-size: 13px; color: var(--suave);
}
.fila-nota input[type=date] { font-size: 13px; padding: 7px 9px; }
.fila-nota .boton.ver { margin-left: auto; }
.lista-notas {
  list-style: none; margin: 14px 0 0; padding: 12px 0 0;
  border-top: 1px solid var(--borde);
  max-height: 210px; overflow-y: auto;
}
.lista-notas li + li { margin-top: 12px; }
.texto-nota { margin: 0; font-size: 14px; white-space: pre-wrap; }
.quien-nota { margin: 2px 0 0; font-size: 11.5px; color: var(--suave); }

.boton.chico-nota {
  display: inline-block; margin-top: 6px; padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  background: transparent; border-color: var(--borde); color: var(--suave);
}
.boton.chico-nota:hover { border-color: var(--azul); color: var(--azul); }
.boton.chico-nota.citada {
  border-color: color-mix(in srgb, var(--azul) 45%, transparent);
  color: var(--azul); font-weight: 600;
}
.boton.chico-nota.toca {
  border-color: var(--nuevo); color: var(--nuevo); font-weight: 700;
  background: color-mix(in srgb, var(--nuevo) 12%, transparent);
}

/* el calendario vacio sigue a la vista, pero sin gritar */
.calendario.vacio-cal { opacity: .5; }

/* calendario de recordatorios: ocupa toda la tarjeta */
.cal-barra {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  flex-wrap: wrap;
}
.cal-mover {
  width: 30px; height: 30px; padding: 0; line-height: 1;
  border: 1px solid var(--borde); border-radius: 8px;
  background: var(--fondo); color: var(--texto); font-size: 17px;
}
.cal-mover:hover { border-color: var(--azul); color: var(--azul); }
.cal-mes { font-size: 15.5px; min-width: 10ch; }
.cal-mes::first-letter { text-transform: uppercase; }
.cal-hoy {
  border: 1px solid var(--borde); border-radius: 8px; background: none;
  color: var(--azul); font-size: 12.5px; padding: 5px 11px;
}
.cal-barra .cuantas { margin-left: auto; }

.calendario { width: 100%; }
.cabecera-cal, .semana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cabecera-cal span {
  text-align: center; font-size: 11px; font-weight: 600;
  color: var(--suave); padding-bottom: 5px; text-transform: uppercase;
  letter-spacing: .03em;
}
.semana + .semana { margin-top: 4px; }
.dia {
  position: relative; display: grid; place-items: center;
  min-height: 46px; padding: 0; border-radius: 9px;
  font-size: 13.5px; cursor: pointer;
  background: var(--fondo); border: 1px solid transparent; color: var(--texto);
}
.dia:hover { border-color: var(--azul); }
.dia.otro-mes { opacity: .3; }
.dia.pasado { opacity: .5; }
.dia.pasado.otro-mes { opacity: .22; }
.dia.hoy { border-color: var(--azul); font-weight: 700; }
.dia.con-llamadas {
  background: color-mix(in srgb, var(--azul) 18%, transparent);
  font-weight: 600; opacity: 1;
}
.dia.con-llamadas.pasado {
  background: color-mix(in srgb, var(--nuevo) 22%, transparent);
}
.dia.elegido {
  outline: 2px solid var(--azul); outline-offset: -2px; opacity: 1;
}
.dia .punto {
  position: absolute; right: 3px; top: 3px;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: var(--azul); color: #fff;
  font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
.dia.con-llamadas.pasado .punto { background: var(--nuevo); }

.cal-dia {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde);
}
.cal-dia h3 { margin: 0 0 10px; font-size: 14.5px; }
.nota-cal { margin-top: 12px; }
.nota-cal .atrasados { color: var(--nuevo); }
h2 .cuantas, .cal-barra .cuantas {
  display: inline-block; padding: 2px 10px;
  border-radius: 999px; font-size: 12.5px;
  background: color-mix(in srgb, var(--azul) 16%, transparent);
  color: var(--azul); font-weight: 600;
}
.calendario.vacio-cal { opacity: .55; }

@media (max-width: 560px) {
  .dia { min-height: 40px; font-size: 12.5px; }
  .cal-barra .cuantas { margin-left: 0; }
}

.bloque.hoy { border-left: 3px solid var(--nuevo); }
.bloque.hoy h2 .cuantas {
  display: inline-block; margin-left: 7px; padding: 1px 9px;
  border-radius: 999px; font-size: 13px;
  background: color-mix(in srgb, var(--nuevo) 16%, transparent);
  color: var(--nuevo);
}

/* bajada de precio: la senal mas fuerte de la tarjeta despues del precio */
.precio .bajada {
  display: inline-block; vertical-align: 2px; margin-left: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--verde); background: color-mix(in srgb, var(--verde) 14%, transparent);
  border-radius: 999px; padding: 2px 8px;
}

/* El principal de la tarjeta es "Ver anuncio". Este es secundario y se pinta
   como tal: contorno, sin relleno. */
.boton.contacto-pedir {
  background: transparent; border-color: var(--borde); color: var(--suave);
  font-weight: 500;
}
.boton.contacto-pedir:hover { border-color: var(--azul); color: var(--azul); }
.boton.contacto-pedir.htmx-request { opacity: .55; }

/* globo del contacto: se pide al portal al abrirlo y no se guarda */
.globo {
  border: 1px solid var(--borde); border-radius: 14px;
  background: var(--panel); color: var(--texto);
  padding: 20px 22px 18px; width: min(320px, calc(100vw - 32px));
  box-shadow: 0 18px 50px rgb(0 0 0 / .28);
}
.globo::backdrop { background: rgb(0 0 0 / .45); }
.globo-cerrar { position: absolute; top: 8px; right: 10px; }
.globo-cerrar button {
  border: 0; background: none; color: var(--suave);
  font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 999px;
}
.globo-cerrar button:hover { color: var(--texto); background: rgba(128,128,128,.18); }
.globo-donde {
  margin: 0 0 12px; font-size: 13px; color: var(--suave);
  padding-right: 26px;
}
.globo-datos { display: flex; flex-direction: column; gap: 4px; }
.globo .tel { font-size: 22px; font-weight: 700; color: var(--texto); text-decoration: none; }
.globo .tel:hover { color: var(--azul); }
.globo .correo { font-size: 14px; color: var(--azul); word-break: break-all; }
.globo .nota-tel {
  margin: 12px 0 14px; font-size: 12px; color: var(--suave); line-height: 1.45;
}
.globo .nota-tel.sin-dato { margin-top: 0; font-size: 14px; color: var(--texto); }
.globo .boton.ver { display: block; }

/* captacion */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.captacion {
  display: flex; gap: 7px; padding: 10px 14px 12px;
  border-top: 1px solid var(--borde); margin-top: 10px;
}
.captacion select {
  font-size: 13px; padding: 7px 8px; border-radius: 7px; flex: 1; min-width: 0;
}
.sel-estado { font-weight: 600; }
.captacion { position: relative; flex-wrap: wrap; }
.choque {
  flex: 1 0 100%; margin: 0 0 8px; padding: 7px 10px; border-radius: 7px;
  font-size: 12.5px; line-height: 1.4;
  background: color-mix(in srgb, #c0392b 14%, transparent);
  border: 1px solid color-mix(in srgb, #c0392b 38%, transparent);
}
.choque.suave {
  background: color-mix(in srgb, var(--nuevo) 14%, transparent);
  border-color: color-mix(in srgb, var(--nuevo) 38%, transparent);
}

.captacion .ojo {
  flex: none; width: 32px; padding: 0; line-height: 1;
  border: 1px solid var(--borde); border-radius: 7px;
  background: transparent; color: var(--suave); font-size: 13px;
}
.captacion .ojo:hover { border-color: #c0392b; color: #c0392b; }
.captacion .ojo.tachado { border-color: var(--azul); color: var(--azul); }
.ficha .captacion .ojo.tachado ~ * { opacity: 1; }

.captacion .boton.coger {
  border: 1px dashed var(--borde); background: transparent;
  color: var(--azul); font-size: 13px; padding: 7px 11px; flex-shrink: 0;
}
.captacion .boton.coger:hover { border-style: solid; background: color-mix(in srgb, var(--azul) 10%, transparent); }

/* el color del borde superior dice en que punto esta */
.captacion.estado-contactado  { border-top-color: #2f80c2; }
.captacion.estado-no_contesta { border-top-color: #b08300; }
.captacion.estado-cita        { border-top-color: #7a42c9; }
.captacion.estado-captado     { border-top-color: var(--verde); }
.captacion.estado-rechaza,
.captacion.estado-descartado  { border-top-color: var(--suave); }

.ficha.cerrada { opacity: .58; }
.ficha.cerrada:hover { opacity: 1; }

.cinta.paso { top: 10px; left: 10px; color: #fff; }
.cinta.paso-contactado  { background: #2f80c2; }
.cinta.paso-no_contesta { background: #b08300; }
.cinta.paso-cita        { background: #7a42c9; }
.cinta.paso-captado     { background: #1a7f4b; }
.cinta.paso-rechaza,
.cinta.paso-descartado  { background: #5c6672; }

.boton {
  font-size: 13.5px; padding: 8px 13px; border-radius: 8px;
  text-align: center; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; font-weight: 600;
}
.boton.ver { background: var(--azul); color: #fff; }
.boton.ver:hover { filter: brightness(1.08); }
.boton.visto {
  border-color: var(--borde); background: transparent; color: var(--suave);
  font-weight: 500;
}
.boton.visto:hover { border-color: var(--verde); color: var(--verde); }
.boton.visto.activo { color: var(--verde); border-color: var(--verde); }

.vacio {
  text-align: center; padding: 60px 20px; color: var(--suave);
  background: var(--panel); border: 1px dashed var(--borde); border-radius: 12px;
}
.vacio-titulo { font-size: 17px; color: var(--texto); margin-bottom: 6px; }
.vacio .boton.ver { display: inline-block; margin-top: 10px; }

.paginas {
  display: flex; gap: 18px; justify-content: center; align-items: center;
  margin-top: 26px; font-size: 14px;
}
.boton.paso { background: var(--panel); border-color: var(--borde); color: var(--azul); }

@media (max-width: 620px) {
  .rejilla { grid-template-columns: 1fr; }

  /* En movil no cabe todo en una linea: se recorta lo prescindible en vez
     de dejar que "Salir" se salga de la pantalla, que es lo que pasaba. */
  .barra { padding: 0 12px; gap: 4px; min-height: 52px; }
  .marca-txt small { display: none; }
  .marca { margin-right: 4px; }
  .menu .enlace { padding: 8px 9px; font-size: 13.5px; }
  .chip { padding: 4px; }
  .chip .nombre { display: none; }
  .texto-salir { display: none; }
  .salir { padding: 8px; }

  .fila-principal { gap: 12px; }
  .campo.crece { flex: 1 1 100%; }
  .campo input { width: 100%; }
  .campo { flex: 1 1 calc(50% - 6px); }
  .interruptor { flex: 1 1 100%; padding-bottom: 0; }
  .limpiar { margin-left: 0; padding-bottom: 0; }
  .titular h1 { font-size: 20px; }
}

/* preferencias */
.ancho { max-width: 620px; }
.preferencias section {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.preferencias h2 { font-size: 16px; margin: 0 0 4px; }
.preferencias section > .secundario { margin: 0 0 12px; }
/* --- zonas: buscador, etiquetas de lo elegido y rejilla --- */
.zonas .buscador { position: relative; }
.zonas .buscador svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--suave); pointer-events: none;
}
.zonas .buscador input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); color: inherit; font: inherit;
}
.zonas .buscador input::placeholder { color: var(--suave); }
.zonas .buscador input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent);
}

.elegidas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin: 12px 0 10px; font-size: 13px;
  /* Con 20 y pico zonas las etiquetas empujaban la lista fuera de la
     pantalla en el movil: a partir de tres filas, scroll. */
  max-height: 104px; overflow-y: auto;
}
.elegidas .ninguna { color: var(--suave); }
.chip-zona {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--azul) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--azul) 35%, transparent);
  color: var(--texto); line-height: 1.5;
}
.chip-zona .quita-chip {
  border: 0; background: none; cursor: pointer; color: var(--suave);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 999px;
}
.chip-zona .quita-chip:hover { color: var(--texto); background: rgba(128,128,128,.22); }
.quitar-todas {
  border: 0; background: none; padding: 0 4px; font: inherit;
  color: var(--azul); cursor: pointer; text-decoration: underline;
}

.municipios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; max-height: 296px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo);
}
.zona {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  font-size: 14px; user-select: none;
}
.zona:hover { background: var(--panel); }
.zona[hidden] { display: none; }
.zona input { position: absolute; opacity: 0; width: 0; height: 0; }
.zona .tic {
  flex: none; width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--borde); background: var(--panel);
  display: grid; place-items: center;
}
.zona input:checked + .tic { background: var(--azul); border-color: var(--azul); }
.zona input:checked + .tic::after {
  content: ""; width: 3.5px; height: 7.5px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.zona input:focus-visible + .tic {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 30%, transparent);
}
.zona .nombre-zona {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sin-zonas {
  margin: 0; padding: 22px 10px; text-align: center; color: var(--suave);
  border: 1px dashed var(--borde); border-radius: 10px;
}
.cuantos {
  color: var(--suave); font-size: 12px; font-variant-numeric: tabular-nums;
}
.pareja { display: flex; gap: 16px; flex-wrap: wrap; }
.acciones { display: flex; gap: 18px; align-items: center; }
.acciones button {
  background: var(--azul); color: #fff; border-color: var(--azul);
  font-weight: 600; padding: 10px 22px;
}

.pie-acceso { margin-top: 14px; }
.acceso .aviso.dev .boton.ver { margin-top: 6px; }

/* ---------------------------------------------------------- mi panel */
.enlace.oculto { display: none; }

.cifras {
  display: grid; gap: 12px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cifra {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 11px; padding: 15px 16px; text-decoration: none;
  color: var(--texto);
}
a.cifra:hover { border-color: var(--azul); }
.cifra.destacada { border-color: color-mix(in srgb, var(--azul) 45%, var(--borde)); }
.cifra .num {
  font-size: 29px; font-weight: 680; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.cifra .num.exito { color: var(--verde); }
.pie-cifra { font-size: 12.5px; color: var(--suave); line-height: 1.35; }

.bloque {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.bloque h2 { font-size: 16px; margin: 0 0 14px; }

/* embudo */
.embudo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.embudo a {
  display: grid; grid-template-columns: 128px 1fr 42px; gap: 12px;
  align-items: center; text-decoration: none; color: var(--texto);
  padding: 3px 0;
}
.embudo a:hover .etq { color: var(--azul); }
.embudo .etq { font-size: 13.5px; }
/* No se llama .barra: ese nombre ya es el contenedor de la cabecera
   (display:flex, min-height:56px) y su min-height gana sobre cualquier
   height que se ponga aqui, dejando las barras como manchas verticales. */
.embudo .pista {
  display: block; height: 9px; background: var(--borde);
  border-radius: 99px; overflow: hidden;
}
.embudo .pista i { display: block; height: 100%; border-radius: 99px; }
.embudo .val {
  font-size: 13.5px; font-weight: 650; text-align: right;
  font-variant-numeric: tabular-nums;
}
.nota-embudo { margin: 14px 0 0; }

/* mis captaciones */
.lista-mias { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mia {
  display: grid; grid-template-columns: 56px 1fr auto auto; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--borde);
}
.mia:last-child { border-bottom: none; }
.mini { display: block; width: 56px; height: 42px; border-radius: 7px; overflow: hidden; background: var(--borde); }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sin-foto.pequena {
  position: static; display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 14px;
}
.mia-linea1 { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.mia-linea1 strong { font-size: 15.5px; }
.lugar-mini { font-size: 14px; }
.mia-linea2 { font-size: 12.5px; margin-top: 1px; }
.pastilla {
  font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 20px;
  color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent);
  white-space: nowrap;
}

/* El estado se cambia aqui mismo; el color del desplegable dice en que punto
   esta, igual que la pastilla a la que sustituye. */
.sel-mia {
  font-size: 12.5px; font-weight: 600; padding: 5px 8px; border-radius: 7px;
  color: var(--c); border-color: color-mix(in srgb, var(--c) 45%, var(--borde));
  background: color-mix(in srgb, var(--c) 10%, var(--panel));
  max-width: 148px;
}
.sel-mia:hover { border-color: var(--c); }
.bloque h2 .cargando { margin-left: 10px; font-weight: 400; }
.cuando {
  font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* actividad */
.actividad { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.actividad li {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 12px;
  align-items: baseline; padding: 7px 0; font-size: 13.5px;
  border-bottom: 1px solid var(--borde);
}
.actividad li:last-child { border-bottom: none; }
.que-inmueble { font-size: 12.5px; text-align: right; white-space: nowrap; }

/* cuenta */
.enlaces-cuenta { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.enlaces-cuenta a {
  display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--borde); border-radius: 9px; padding: 13px 15px;
  text-decoration: none; color: var(--texto);
}
.enlaces-cuenta a:hover { border-color: var(--azul); }
.enlaces-cuenta strong { font-size: 14.5px; }
.enlaces-cuenta .secundario { font-size: 12.5px; }

.vacio.pequeno { padding: 30px 18px; }

@media (max-width: 620px) {
  .embudo a { grid-template-columns: 104px 1fr 34px; gap: 9px; }
  .mia { grid-template-columns: 48px 1fr auto; }
  .mia .cuando { display: none; }
  .sel-mia { max-width: 124px; font-size: 12px; }
  .mini { width: 48px; height: 36px; }
  .actividad li { grid-template-columns: 1fr; gap: 2px; }
  .que-inmueble { text-align: left; }
}

/* ------------------------------------------------- administracion */
.alta-agente {
  display: flex; gap: 14px; align-items: end; flex-wrap: wrap;
  margin-bottom: 10px;
}
.alta-agente .campo.crece { flex: 1 1 210px; }
.alta-agente input { width: 100%; }
.alta-agente .interruptor { padding-bottom: 9px; }

.lista-agentes { list-style: none; margin: 0; padding: 0; }
.agente-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--borde);
}
.agente-fila:first-child { border-top: 0; }
.agente-fila.inactivo { opacity: .55; }
.agente-datos { flex: 1; min-width: 0; }
.agente-linea1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agente-linea2 { font-size: 13px; }
.etiqueta {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .02em;
}
.etiqueta.admin {
  background: color-mix(in srgb, var(--azul) 16%, transparent); color: var(--azul);
}
.etiqueta.baja {
  background: color-mix(in srgb, var(--suave) 20%, transparent); color: var(--suave);
}
.etiqueta.sin-clave {
  background: color-mix(in srgb, var(--nuevo) 16%, transparent); color: var(--nuevo);
}
.agente-acciones { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.agente-acciones form { margin: 0; }
.boton.chico {
  font-size: 12.5px; padding: 6px 11px; background: transparent;
  border-color: var(--borde); color: var(--suave); font-weight: 500;
}
.boton.chico:hover { border-color: var(--azul); color: var(--azul); }
.boton.chico.peligro:hover { border-color: #c0392b; color: #c0392b; }

@media (max-width: 620px) {
  .agente-fila { flex-wrap: wrap; }
  .agente-acciones { width: 100%; justify-content: flex-start; }
}

/* ---------------------------------------------------- ficha de detalle */
.migas { margin: 0 0 14px; font-size: 14px; }
.ficha-detalle {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 22px; margin-bottom: 22px; align-items: start;
}
.ficha-foto {
  /* `position: relative` NO es decorativo: `.sin-foto` es `position:absolute;
     inset:0`, y sin un ancestro posicionado se estiraba sobre la pagina
     entera. Quedaba una capa invisible por encima de todo que se tragaba los
     clics: la ficha de un anuncio sin foto no se podia usar. */
  position: relative;
  aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--borde); display: grid; place-items: center;
}
.ficha-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-cabecera h1 { margin: 2px 0 10px; font-size: 20px; color: var(--suave); }
.precio.grande { font-size: 30px; font-weight: 700; }
.ficha-acciones { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.ficha-acciones .boton { flex: 1 1 180px; padding: 10px 14px; }

.ir-ficha {
  display: inline-block; font-size: 12.5px; margin-bottom: 4px;
  text-decoration: none; font-weight: 600;
}
.ir-ficha:hover { text-decoration: underline; }

.linea-precios, .linea-historial { list-style: none; margin: 0; padding: 0; }
.linea-precios li, .linea-historial li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--borde); font-size: 14px;
}
.linea-precios li:first-child, .linea-historial li:first-child { border-top: 0; }
.linea-precios .cuando, .linea-historial .cuando {
  color: var(--suave); font-size: 12.5px; min-width: 11ch;
  font-variant-numeric: tabular-nums;
}
.linea-precios .movimiento, .linea-historial .que { flex: 1; min-width: 190px; }
.linea-precios .salto { font-weight: 700; }
.linea-precios li.baja .salto { color: var(--verde); }
.linea-precios li.sube .salto { color: var(--nuevo); }
.linea-historial .quien { color: var(--suave); font-size: 12.5px; }
.lista-notas.larga { max-height: none; }

@media (max-width: 720px) {
  .ficha-detalle { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ cifras de agencia */
.sub-menu { display: flex; gap: 4px; margin: 0 0 18px; }
.sub-menu a {
  padding: 7px 14px; border-radius: 8px; text-decoration: none;
  font-size: 14px; font-weight: 550; color: var(--suave);
}
.sub-menu a:hover { background: color-mix(in srgb, var(--suave) 12%, transparent); }
.sub-menu a.activo {
  background: color-mix(in srgb, var(--azul) 12%, transparent); color: var(--azul);
}

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--suave); font-weight: 700;
  padding: 0 10px 8px 0; border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .num-celda { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .num-celda.exito { color: var(--verde); font-weight: 600; }

.lista-tiempos { list-style: none; margin: 0 0 12px; padding: 0; }
.lista-tiempos li {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--borde);
}
.lista-tiempos li:first-child { border-top: 0; }
.lista-tiempos .dato {
  font-size: 22px; font-weight: 700; min-width: 5ch;
  font-variant-numeric: tabular-nums;
}
.lista-tiempos .dato.malo { color: var(--nuevo); }

@media (max-width: 620px) {
  .tabla { font-size: 13px; }
  .tabla th:nth-child(3), .tabla td:nth-child(3) { display: none; }
}

.bloque h3.sub { font-size: 14px; margin: 18px 0 8px; color: var(--suave); }