/* Capa de componentes del sitio: se carga después de nucleo.css (contador de la red,
   formulario de alta, panel del reparto, burbujas de conversación y lo que se fue sumando). */

/* ============ CABECERA DE LA RED ============ */
.red-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.red-head h1 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  color: var(--noche);
}
.red-head p {
  margin: 8px 0 0;
  color: var(--texto-suave);
  font-size: 15px;
  max-width: 60ch;
}

/* Contador grande: es el número que crece de N a N+1 en la demo */
.contador {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 26px;
  border-radius: 18px;
  background: var(--marca-suave);
  border: 1px solid rgba(0, 152, 158, 0.25);
  border-left: 5px solid var(--cb-dorado);
}
.contador .n {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: var(--cb-turquesa-oscuro);
  letter-spacing: -0.03em;
}
.contador .l {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--noche);
  font-weight: 700;
}

/* ============ BADGE DE CÓDIGO Y ETIQUETA DESTACADA ============ */
.codigo-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--noche);
  color: #fff;
  border: 1px solid var(--cb-dorado);
}
.etiqueta-destacada {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--noche);
  color: var(--cb-dorado);
}
.chip-red {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--marca-suave);
  color: var(--cb-turquesa-oscuro);
  border: 1px solid rgba(0, 152, 158, 0.3);
}

/* En la card el código va arriba a la derecha: el badge del formato
   (distrito · estado) ya ocupa la esquina izquierda. */
.tarjeta .tarjeta-foto .codigo-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

/* ============ FORMULARIOS ============ */
.form-card {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra);
  padding: 28px;
  margin-bottom: 22px;
}
.form-card > h2 {
  margin: 0 0 4px;
  font-family: var(--fuente-ui);
  font-size: 17px;
  font-weight: 700;
  color: var(--noche);
}
.form-card > .ayuda {
  margin: 0 0 20px;
  color: var(--texto-suave);
  font-size: 13.5px;
}
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.campo.ancho {
  grid-column: 1 / -1;
}
.campo label {
  font-size: 13px;
  font-weight: 600;
  color: var(--noche);
}
.campo .pista {
  font-size: 12px;
  color: var(--texto-suave);
}
.campo input[type="text"],
.campo input[type="password"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="url"],
.campo select,
.campo textarea {
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--cb-gris-borde);
  border-radius: 10px;
  padding: 11px 12px;
  width: 100%;
  outline: none;
}
.campo textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

/* Campo con problema. El <form> lleva novalidate: el globo del navegador se iba
   en segundos y, si el campo estaba lejos, lo unico visible era el salto de la
   pagina hacia arriba. Esto se queda hasta que el agente corrige. */
.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea {
  border-color: #C0392B;
  background: #FDF5F4;
}
.campo.con-error label {
  color: #A3312A;
}
.campo-error {
  font-size: 12.5px;
  font-weight: 600;
  color: #A3312A;
}
.campo-error::before {
  content: "▲ ";
  font-size: 10px;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--cb-turquesa);
  box-shadow: 0 0 0 3px rgba(0, 152, 158, 0.15);
}

/* WhatsApp en dos partes: país con bandera + número local (_telefono.html).
   El <select> va transparente encima de la bandera y el código: el menú es el
   nativo y lo que se ve es la bandera en SVG. */
.tel {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.tel-pais {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 10px 0 12px;
  background: var(--cb-fondo-suave);
  border: 1px solid var(--cb-gris-borde);
  border-right: 0;
  border-radius: 10px 0 0 10px;
  font-size: 14px;
  color: var(--texto);
}
.tel-pais::after {
  content: "▾";
  font-size: 11px;
  color: var(--texto-suave);
}
.tel-bandera,
.tel-bandera > span {
  display: flex;
}
.tel-bandera > span[hidden] {
  display: none;
}
.tel-bandera svg {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.tel-codigo {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.tel-pais select,
.campo .tel-pais select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* con menos, iOS hace zoom al tocarlo */
}
.tel input {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  color: var(--texto);
  background: #fff;
  border: 1px solid var(--cb-gris-borde);
  border-radius: 0 10px 10px 0;
  padding: 11px 12px;
  outline: none;
}
.tel-pais:focus-within,
.tel input:focus {
  border-color: var(--cb-turquesa);
  box-shadow: 0 0 0 3px rgba(0, 152, 158, 0.15);
}
.con-error .tel-pais,
.con-error .tel input {
  border-color: #C0392B;
}
.con-error .tel input {
  background: #FDF5F4;
}
.campo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.campo-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cb-turquesa);
  flex: none;
}
.campo-check .txt strong {
  display: block;
  font-size: 14px;
  color: var(--noche);
}
.campo-check .txt span {
  font-size: 13px;
  color: var(--texto-suave);
}

/* Sub-formulario de split: aparece al marcar "Compartir en red" */
.bloque-split {
  margin-top: 18px;
  padding: 20px;
  border-radius: 14px;
  background: var(--marca-suave);
  border: 1px solid rgba(0, 152, 158, 0.25);
}
.bloque-split h3 {
  margin: 0 0 4px;
  font-family: var(--fuente-ui);
  font-size: 15px;
  color: var(--noche);
}
.bloque-split .ayuda {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--texto-suave);
}

.acciones-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
}
.acciones-form .btn {
  font-size: 15px;
  padding: 14px 26px;
}

.aviso {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 22px;
  border-left: 4px solid var(--cb-turquesa);
  background: var(--marca-suave);
  color: var(--noche);
}
.aviso.suave {
  border-left-color: var(--cb-dorado);
  background: var(--fondo-suave);
}
.aviso.error {
  border-left-color: #A3312A;
  background: #FDF5F4;
}
/* B44: hallazgos altos nuevos del agente de calidad, en el panel del superadministrador. */
.aviso.aviso-calidad {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  border-left-color: #A3312A;
  background: #FDF5F4;
}
.aviso-calidad div { flex: 1 1 320px; line-height: 1.55; }
.aviso-calidad strong { display: block; margin-bottom: 2px; }
.aviso-calidad .btn { white-space: nowrap; }

/* B8: términos y privacidad. */
.texto-legal {
  max-width: 760px;
  line-height: 1.7;
  color: var(--texto);
}
.texto-legal h1 { margin: 0 0 18px; }
.texto-legal ul, .texto-legal ol { padding-left: 22px; }
.texto-legal li { margin-bottom: 8px; }
.enlaces-legales { display: block; margin-top: 6px; }
.enlaces-legales a { color: inherit; text-decoration: underline; }

/* B8-v2: términos y privacidad en un modal. */
html.legal-bloqueado { overflow: hidden; }
.legal-velo {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(36, 35, 74, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.legal-velo[hidden] { display: none; }
.legal-caja {
  background: #fff; border-radius: 20px; box-shadow: var(--sombra-fuerte);
  width: min(620px, 100%); max-height: min(86vh, 760px); max-height: min(86dvh, 760px); overflow-y: auto;
  padding: 26px 26px 22px;
}
.legal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.legal-cabeza h2 { margin: 0; font-size: 21px; color: var(--noche); }
.legal-cerrar {
  border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--texto-suave);
}
.legal-intro { margin: 10px 0 0; color: var(--texto); line-height: 1.6; }
.legal-borrador { margin: 10px 0 14px; font-size: 12.5px; font-weight: 600; color: #A3312A; }
.legal-seccion { border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 10px; }
.legal-seccion summary {
  cursor: pointer; padding: 12px 14px; font-weight: 600; color: var(--noche);
}
.legal-seccion .texto-legal { padding: 0 16px 8px; font-size: 14px; }
.legal-aceptar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 16px;
}

/* B10: la ayuda de /login, debajo del botón. */
.login-ayuda {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.login-ayuda strong {
  color: var(--noche);
}

/* ============ PANEL DE SPLIT EN EL DETALLE ============ */
.panel-split {
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 20px;
  background: var(--fondo-suave);
  margin-top: 18px;
}
.panel-split h3 {
  margin: 0 0 14px;
  font-family: var(--fuente-ui);
  font-size: 15px;
  color: var(--noche);
}

/* B9: las fotos del inmueble con su botón "Quitar", en el panel del dueño. */
.fotos-editar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.fotos-editar figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fotos-editar img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linea);
}
.fotos-editar .btn {
  width: 100%;
  justify-content: center;
  padding: 6px 8px;
  font-size: 12.5px;
}
.datos-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 0;
}
.datos-split div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.datos-split dt {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.datos-split dd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--noche);
}

/* ============ ESTADO VACÍO ============ */
.vacio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--texto-suave);
  border: 1px dashed var(--cb-gris-borde);
  border-radius: 18px;
}

/* ============ BARRA DE HERRAMIENTAS DE LA DEMO ============ */
.barra-demo {
  background: var(--noche);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  padding: 7px 0;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  border-top: 2px solid var(--cb-dorado);
}
.barra-demo .container {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.barra-demo b {
  color: var(--cb-dorado);
}

/* ============ EL PIE ============ */
/* Cada enlace de columna del pie es un <a> suelto: uno por línea. */
.pie-columna a {
  display: block;
  margin-bottom: 10px;
}

/* Identidad del agente en el cabecera */
.sesion {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-left: 14px;
  white-space: nowrap;
}
@media (hover: hover) { .sesion:hover { color: var(--cb-turquesa-oscuro); } }

/* ============ FORMULARIO DE PUBLICAR (3 bloques) ============ */
.bloque {
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 20px;
  box-shadow: var(--sombra);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.bloque-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linea);
}
.bloque-ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--marca-suave);
  color: var(--cb-turquesa-oscuro);
}
.bloque-ico .ico { width: 21px; height: 21px; }
.bloque-head h2 {
  margin: 0 0 3px;
  font-family: var(--fuente-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--noche);
}
.bloque-head p {
  margin: 0;
  font-size: 13.5px;
  color: var(--texto-suave);
  line-height: 1.55;
  max-width: 62ch;
}

/* El bloque de la red va arriba y se distingue: es la decisión de negocio. */
.bloque-red {
  background: linear-gradient(135deg, var(--marca-suave), #fff 70%);
  border-color: rgba(0, 152, 158, 0.3);
  border-left: 5px solid var(--cb-turquesa);
}
.bloque-red .campo-check .txt strong { font-size: 15.5px; }

/* El de datos clave se marca en dorado: son los que alimentan a la IA. */
.bloque-clave { border-top: 4px solid var(--cb-dorado); }
.bloque-clave .bloque-ico {
  background: rgba(212, 175, 55, 0.16);
  color: #8A6D1F;
}

.campos-compactos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.req {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb-turquesa-oscuro);
  background: var(--marca-suave);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* Los booleanos como chips, en vez de cuatro checkboxes sueltos */
.chips-check {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--cb-gris-borde);
  border-radius: 999px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}
@media (hover: hover) { .chip-check:hover { border-color: var(--cb-turquesa); } }
.chip-check input { accent-color: var(--cb-turquesa); margin: 0; }
.chip-check:has(input:checked) {
  background: var(--marca-suave);
  border-color: var(--cb-turquesa);
  color: var(--noche);
  font-weight: 600;
}

/* Lo opcional, plegado: publicar rápido es lo normal */
.mas-campos { margin-top: 20px; }
.mas-campos > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--cb-turquesa-oscuro);
  padding: 12px 16px;
  border: 1px dashed var(--cb-gris-borde);
  border-radius: 12px;
  list-style: none;
}
.mas-campos > summary::-webkit-details-marker { display: none; }
.mas-campos > summary::before { content: "+ "; font-weight: 700; }
.mas-campos[open] > summary::before { content: "− "; }
@media (hover: hover) { .mas-campos > summary:hover { border-color: var(--cb-turquesa); background: var(--fondo-suave); } }
.mas-campos[open] > summary { margin-bottom: 18px; }

.campo input[type="file"] {
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px dashed var(--cb-gris-borde);
  border-radius: 10px;
  width: 100%;
  background: var(--fondo-suave);
}
.campo input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  margin-right: 12px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: var(--cb-turquesa-oscuro);
  color: #fff;
  cursor: pointer;
}

.acciones-form .pista { margin-left: auto; }

/* ============ HERO DE BUSQUEDA ============ */
/* Header arriba y, pegado debajo, una franja a todo el ancho con una foto de
   fondo, el titulo y la barra de filtros encima. Es el patron de Urbania y
   Adondevivir, que entre los dos tienen casi todo el mercado: el usuario que
   llega ya sabe donde mirar. La misma pieza sirve para el catalogo de CoBroker
   y para la web propia de cada agente. */
.hero-busqueda{
  position:relative;
  isolation:isolate;
  padding:56px 0 34px;
  margin-bottom:34px;
  background-color:var(--noche);
  background-size:cover;
  background-position:center 62%;
  background-repeat:no-repeat;
}
/* Velo oscuro: sin el, el titulo blanco se pierde en las zonas claras de la
   foto, y cual son las zonas claras depende de la foto. */
.hero-busqueda::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(18,20,28,.80) 0%,
    rgba(18,20,28,.66) 48%,
    rgba(18,20,28,.58) 100%
  );
}
.hero-busqueda .hero-texto{
  display:flex;
  /* Showroom 2: el recuadro del contador, centrado en alto con el título y el texto. */
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.hero-busqueda h1{
  margin:0;
  font-family: var(--fuente-titulo);
  font-size:clamp(32px, 4.2vw, 50px);
  line-height:1.05;
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-busqueda p{
  margin:10px 0 0;
  color:rgba(255,255,255,.92);
  font-size:16px;
  max-width:64ch;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
/* El contador del catalogo, sobre la foto. Showroom 2: alineado con el borde derecho de la
   barra de búsqueda (la misma columna del contenedor), número y rótulo en la misma línea base
   y el mismo margen por dentro arriba y abajo, a un lado y al otro. */
/* Showroom 4: era verde sobre verde claro (poco contraste). Ahora va con la cabecera oscura:
   vidrio noche casi opaco, número blanco y rótulo dorado claro, con el acento
   dorado de la marca a la izquierda (contra una foto blanca detrás: 11,9:1 y 8,1:1). En la web del agente el
   acento es su color (base_agente). */
.hero-busqueda .contador{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-left:auto;
  padding:14px 22px 14px 20px;
  flex-shrink:0;
  background:rgba(21,20,44,.86);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  border-left:4px solid var(--contador-acento, var(--cb-dorado));
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.hero-busqueda .contador .n{
  display:inline;
  font-family: var(--fuente-num); font-variant-numeric: tabular-nums;
  font-size:44px;
  line-height:1;
  font-weight:700;
  color:#fff;
  letter-spacing:-.02em;
}
.hero-busqueda .contador .l{
  display:inline;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
  color:var(--contador-rotulo, #F2D27A);
}
/* Dentro del hero la barra de filtros flota sobre la foto: se le sube la sombra
   y se le quita el margen de abajo, que ahi lo pone el propio hero. */
.hero-busqueda .buscador{
  margin-bottom:0;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.35);
}
@media (max-width:760px){
  .hero-busqueda{padding:34px 0 26px; margin-bottom:26px}
  .hero-busqueda .hero-texto{margin-bottom:18px}
  /* Debajo del texto, a la izquierda, con aire antes de la barra de búsqueda. */
  .hero-busqueda .contador{margin-left:0; padding:10px 16px}
  .hero-busqueda .contador .n{font-size:34px}
}

/* El catalogo no lleva el padding superior de .seccion: el hero va pegado a la
   cabecera, que es justo lo que hace que se lea como una sola pieza. */
.section-catalogo{padding-bottom:64px}

/* Como .bajo-cabecera pero sin los 34px de aire: lo usan las paginas que arrancan
   con el hero, que tiene que quedar pegado a la barra. */
.pegado-a-topbar{padding-top:var(--cabecera-h)}

/* Bloque 3: panel de funciones en prueba (solo administradores). */
.funciones-prueba .funcion { margin: 12px 0; }
.funciones-prueba code { font-size: 12px; color: var(--cb-turquesa-oscuro); }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-simple th, .tabla-simple td {
  text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--linea); vertical-align: top;
}
/* Todo lo que muestre datos de un simulador -PREV. */
.rotulo-prev {
  display: inline-block; padding: 1px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 700;
  color: #A3312A; background: #FDF5F4; border: 1px solid rgba(163, 49, 42, .3);
}

/* B16-PREV: seguimiento extendido y créditos. */
.extendido-activo { color: var(--cb-turquesa-oscuro); }
.comprar-creditos summary { list-style: none; display: inline-flex; cursor: pointer; }
.comprar-creditos summary::-webkit-details-marker { display: none; }
.comprar-creditos .paquetes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }

/* B5-PREV: página de datos del interesado. */
.opciones-radio { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.opciones-radio label { display: flex; align-items: center; gap: 6px; font-weight: 400; }

/* Gestión de usuarios (B19–B23). */
.form-card h3.ajustes-sub { margin: 18px 0 4px; font-size: 14.5px; color: var(--noche); }
.form-card h3.ajustes-sub + .pista { margin: 0 0 14px; font-size: 12.5px; color: var(--texto-suave); }

/* B19: menú de la cuenta en la cabecera (un <details>, sin JS). */
.menu-usuario { position: relative; margin-left: 14px; }
.menu-usuario > summary { list-style: none; cursor: pointer; margin-left: 0; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario-lista {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  min-width: 210px; padding: 6px 0;
  background: #fff; border: 1px solid var(--linea); border-radius: 14px;
  box-shadow: var(--sombra);
}
.menu-usuario-lista a {
  display: block; padding: 10px 18px; font-size: 14px; color: var(--noche);
  white-space: nowrap;
}
@media (hover: hover) { .menu-usuario-lista a:hover { background: var(--fondo-suave); color: var(--cb-turquesa-oscuro); } }

/* B19: "ver como". Fijo abajo para no tapar la barra de arriba, que también es fija. */
.banda-ver-como {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--cb-morado); color: #fff; font-size: 14px;
  box-shadow: 0 -10px 30px rgba(36, 35, 74, .22);
}
.banda-ver-como form { margin: 0; }
.banda-ver-como button {
  border: 0; border-radius: 999px; padding: 7px 18px; cursor: pointer;
  background: #fff; color: var(--cb-morado); font-weight: 700; font-size: 13.5px;
}
body.con-ver-como { padding-bottom: 64px; }

/* B19: páginas de aviso (sin permiso, solo lectura). */
.aviso-pagina h1 { margin: 0 0 10px; color: var(--noche); font-size: 26px; }
.aviso-pagina p { margin: 0 auto 18px; max-width: 52ch; }
.acciones-aviso { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.acciones-aviso form { margin: 0; }

/* B19: /admin/usuarios. */
.migas { margin: 0 0 8px; font-size: 13.5px; }
.pestanas-admin { display: flex; gap: 6px; margin: 0 0 18px; border-bottom: 1px solid var(--linea); }
.pestanas-admin a {
  padding: 10px 14px; margin-bottom: -1px; font-weight: 600; font-size: 14px;
  color: var(--texto-suave); border-bottom: 2px solid transparent;
}
.pestanas-admin a.activa { color: var(--noche); border-bottom-color: var(--cb-turquesa); }
.filtros-admin { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.filtros-admin input[type="search"] { flex: 1 1 260px; }
.filtros-admin input, .filtros-admin select {
  padding: 10px 12px; border: 1px solid var(--cb-gris-borde); border-radius: 10px;
  font: inherit; font-size: 14px; background: #fff; min-width: 0;
}
.filtros-admin .btn { padding: 10px 18px; }
.filtros-admin .limpiar { font-size: 13.5px; }
.pista-admin { margin: 0 0 12px; font-size: 12.5px; color: var(--texto-suave); }
.tabla-admin-marco { padding: 0; overflow-x: auto; }
.tabla-admin { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-admin th, .tabla-admin td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea);
  vertical-align: middle; white-space: nowrap;
}
.tabla-admin th a { color: var(--noche); font-weight: 700; font-size: 12.5px; }
.tabla-admin td.num { text-align: right; }
.tabla-admin tr.fila-apagada td { color: var(--texto-suave); }
.tabla-admin .sin-filas { text-align: center; color: var(--texto-suave); padding: 28px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.estado-cuenta {
  display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.estado-habilitada { background: var(--marca-suave); color: var(--cb-turquesa-oscuro); }
.estado-deshabilitada { background: #FBF1DC; color: #7A5608; }
.estado-eliminada { background: #ECEEEA; color: #5F6E75; }
.presencia { display: inline-flex; align-items: center; gap: 7px; cursor: help; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.punto-conectado { background: var(--cb-turquesa); box-shadow: 0 0 0 3px rgba(0, 152, 158, .18); }
.punto-inactivo { background: var(--cb-dorado); }
.punto-desconectado { background: #B0B4B6; }
.cuenta-linea { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.datos-cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 0; }
.datos-cuenta dt { font-size: 12px; color: var(--texto-suave); }
.datos-cuenta dd { margin: 2px 0 0; font-weight: 600; color: var(--noche); }
.opcional { font-weight: 400; color: var(--texto-suave); }
.btn.peligro { background: #A3312A; border-color: #A3312A; color: #fff; }
.confirmar-accion summary { list-style: none; display: inline-flex; cursor: pointer; }
.confirmar-accion summary::-webkit-details-marker { display: none; }
.confirmar-accion[open] summary { display: none; }
.confirmar-accion form { margin-top: 4px; }

/* B20: crear cuenta desde /login. */
.login-crear { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--texto-suave); }
.login-crear a { font-weight: 700; }

/* B21: "¿Olvidaste tu contraseña?". Sin JS, el aviso se abre con el ancla #olvide. */
.login-olvido { align-self: flex-end; font-size: 13px; margin-top: 2px; }
#olvide:target { display: flex; }

/* Lo simulado va como "(S)" en gris, con la leyenda al pie (Visitas y la ficha). */
.rotulo-s { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--texto-suave); cursor: help; }
.leyenda-s { margin-top: 14px; font-size: 12.5px; color: var(--texto-suave); }

/* B38: insignias de nivel. El color del nivel va en el ícono y en un tinte suave;
   el texto, siempre en el color del cuerpo. */
.insignia-ico { flex: none; vertical-align: -3px; }
.insignia {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  color: var(--cb-charcoal, #263238); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ins, #6B7C85) 40%, #fff);
  background: color-mix(in srgb, var(--ins, #6B7C85) 9%, #fff);
}
.sesion .insignia-ico { margin-right: 2px; }
.menu-usuario-grupo {
  display: block; margin: 6px 0 2px; padding: 8px 18px 2px; border-top: 1px solid var(--linea);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-suave);
}
/* B38: "Destacado en el portal" (Líder de Red en adelante). Discreto, arriba a la derecha. */
/* 3 oct: una sola pastilla plana, abajo a la izquierda (antes iba encima del código y,
   con el borde dorado de los dos, se veía doble). */
.chips-tarjeta {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 32px);
}
.destacado-chip, .prueba-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px;
  font-weight: 700; letter-spacing: .04em; line-height: 1.3;
  border: 0; box-shadow: none; text-shadow: none;
}
/* Showroom (10 oct): el Destacado es dorado (#D4AF37) y legible, igual en el catálogo, la web
   del agente y Mi cartera (`.ui-cinta-destacado`). Los colores van escritos aquí: la web del
   agente no carga ui.css. Texto #3a2c00 sobre el dorado: contraste AA de sobra. */
.destacado-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-weight: 800;
  background: linear-gradient(135deg, #F2D27A, #D4AF37); color: #3a2c00;
  box-shadow: 0 4px 14px rgba(212,175,55,.45);
}
.destacado-ico { width: 13px; height: 13px; fill: currentColor; flex: none; }
.tarjeta.tarjeta-destacada { box-shadow: 0 0 0 2px #D4AF37, 0 10px 30px rgba(212,175,55,.22); }
/* B46: dato de prueba visible (superadministrador, cuentas de prueba o interruptor). */
.prueba-chip { background: #fff; color: var(--cb-morado); }
.aviso-demostracion { border-left-color: var(--cb-morado); background: #f1f0f7; }
/* Showroom (10 oct): la franja del Modo Showroom (solo el superadministrador). */
.aviso-showroom { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  border-left-color: #D4AF37; }
.aviso-showroom a { font-weight: 700; }
/* B38: cuánto de la red ve el agente según su nivel. */
.aviso-nivel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.aviso-nivel > div { flex: 1 1 320px; }
.aviso-nivel strong { display: block; color: var(--noche); }
.aviso-nivel span { font-size: 14px; }
/* B38: la insignia en la web propia, discreta: un ícono junto a la marca y el
   nombre del nivel en el pie. */
.wa-insignia-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #fff; flex: none; }
/* Showroom 2: la insignia del nivel en la cabecera de su web (antes, solo el ícono). Una pastilla
   clara sobre la barra de su marca, con el color del nivel en el borde. */
.wa-insignia-cab { display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px 3px 3px;
  border-radius: 999px; background: rgba(255,255,255,.12); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ins, #fff) 70%, #fff); }
.wa-insignia-txt { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: #fff; }
@media (max-width: 420px) { .wa-insignia-txt { display: none; } .wa-insignia-cab { padding: 3px; } }
.wa-insignia { display: block; margin-top: 8px; }

/* ============ B45: EDITAR UN AVISO PUBLICADO ============ */
/* En Mi cartera: "Editar" sobre la foto, abajo a la derecha (abajo a la izquierda va
   Propio/Red). Acompaña el salto de la tarjeta al pasar el mouse. */
.tarjeta-envoltura { position: relative; display: flex; }
.tarjeta-envoltura > .tarjeta { flex: 1; }
.tarjeta-editar {
  position: absolute; top: 208px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 6px 14px; border-radius: 999px;
  background: #fff; color: var(--cb-turquesa-oscuro);
  font-size: 13px; font-weight: 700; text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: transform .35s ease;
}
.tarjeta-editar .ico { width: 15px; height: 15px; }
@media (hover: hover) { .tarjeta-envoltura:hover .tarjeta-editar { transform: translateY(-10px); } }
.tarjeta-editar:focus-visible { outline: 3px solid var(--cb-turquesa); outline-offset: 2px; }

/* En el detalle: arriba, junto al título. */
.btn-editar-aviso { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.btn-editar-aviso .ico { width: 16px; height: 16px; }
.aviso-edicion-admin { border-left-color: var(--cb-morado); }
.lista-cambios { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
.lista-cambios li { padding: 7px 0; border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }
.lista-cambios li span { display: block; color: var(--texto-suave); font-size: 12px; }

/* El formulario: las fotos en tarjetas con flechas, cómodas con el pulgar. */
.fotos-orden {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.foto-item {
  border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.foto-marco { position: relative; aspect-ratio: 4 / 3; background: #eee; }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-principal-chip {
  display: none; position: absolute; top: 8px; left: 8px; padding: 3px 10px;
  border-radius: 999px; background: var(--cb-morado); color: #fff; font-size: 12px; font-weight: 700;
}
.foto-item.es-principal .foto-principal-chip { display: inline-block; }
.foto-item.es-principal { border-color: var(--cb-turquesa); box-shadow: 0 0 0 2px rgba(0, 152, 158, .25); }
.foto-item.se-quita { opacity: .5; }
.foto-item.se-quita .foto-marco::after {
  content: "Se quita al guardar"; position: absolute; inset: auto 0 0 0; padding: 6px;
  background: rgba(36, 35, 74, .85); color: #fff; font-size: 12.5px; text-align: center;
}
.foto-controles { padding: 10px 12px 12px; display: grid; gap: 8px; font-size: 13.5px; }
.foto-posicion { display: flex; align-items: center; gap: 6px; }
.foto-posicion label { font-size: 12.5px; color: var(--texto-suave); }
.foto-posicion input { width: 56px; min-height: 40px; padding: 6px 8px; }
.foto-mover { min-width: 44px; min-height: 40px; padding: 0; justify-content: center; font-size: 18px; }
.foto-opcion { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.foto-opcion input { width: 20px; height: 20px; }
.foto-reemplazar { display: grid; gap: 4px; font-size: 12.5px; color: var(--texto-suave); }
.foto-reemplazar input { font-size: 12.5px; max-width: 100%; }
.acciones-editar { position: sticky; bottom: 0; z-index: 5; background: #fff; padding: 12px 0; }
@media (max-width: 640px) {
  .fotos-orden { grid-template-columns: 1fr 1fr; gap: 10px; }
  .foto-controles { padding: 8px; }
  .foto-posicion { flex-wrap: wrap; gap: 4px; }
  .foto-posicion label { display: none; }
  .foto-posicion input { width: 42px; padding: 6px 4px; }
  .foto-mover { min-width: 38px; }
  .foto-reemplazar input { width: 100%; }
  .acciones-editar .btn { flex: 1; justify-content: center; }
}
.filtro-cambios { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filtro-cambios input { max-width: 180px; }
.tabla-desplazable { overflow-x: auto; }
.tabla-cambios .valor-cambio { max-width: 260px; overflow-wrap: anywhere; font-size: 13px; }

/* ============ B56: INSIGNIA DE NIVEL EN EL ENCABEZADO ============ */
/* Dos tramos: el nivel en su color (el texto, el de más contraste: oscuro sobre el
   dorado, el celeste y el esmeralda; blanco sobre el púrpura) y los puntos con la
   moneda sobre blanco. Toda la pastilla lleva a "Mis logros". */
.insignia-cabecera {
  display: inline-flex; align-items: stretch; margin-left: 14px; flex: none;
  border: 1.5px solid var(--ins, #6B7C85); border-radius: 999px; overflow: hidden;
  font-size: 12.5px; font-weight: 700; line-height: 1; text-decoration: none;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
@media (hover: hover) { .insignia-cabecera:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .14); } }
.insignia-cabecera:focus-visible { outline: 3px solid var(--ins, #6B7C85); outline-offset: 2px; }
.insignia-cabecera .ic-nivel {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 7px;
  background: var(--ins, #6B7C85); color: var(--ins-texto, #1F2937);
}
.insignia-cabecera .ic-puntos {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 6px;
  background: #fff; color: #1F2937; font-variant-numeric: tabular-nums;
}
.insignia-cabecera .insignia-ico, .insignia-cabecera .moneda-ico { vertical-align: 0; flex: none; }
.moneda-ico { flex: none; vertical-align: -2px; }
.insignia-cabecera + .menu-usuario { margin-left: 10px; }
.menu-principal .solo-movil { display: none; }
.sesion-nombre-corto { display: none; }
/* Celular: la pastilla y el nombre se quedan; "Publicar inmueble" pasa al menú ☰, el
   nombre va solo con el primero (completo, en el menú de la cuenta) y la marca no se
   encoge debajo de la pastilla. */
@media (max-width: 640px) {
  .menu-principal .solo-movil { display: block; font-weight: 700; color: var(--cb-turquesa-oscuro); }
  .cabecera-fila > .boton-publicar { display: none; }
  .cabecera-fila:has(.insignia-cabecera) { gap: 6px; }
  .cabecera-fila:has(.insignia-cabecera) .marca-portal { flex: none; }
  .cabecera-fila:has(.insignia-cabecera) .lema { display: none; }
  .insignia-cabecera { margin-left: auto; font-size: 11.5px; }
  .insignia-cabecera .ic-nivel { padding: 4px 6px 4px 5px; gap: 4px; }
  .insignia-cabecera .ic-puntos { padding: 4px 6px 4px 4px; gap: 3px; }
  .insignia-cabecera + .menu-usuario { margin-left: 4px; }
  .menu-usuario .sesion { margin-left: 0; }
  .menu-usuario .sesion-nombre { display: none; }
  .menu-usuario .sesion-nombre-corto {
    display: inline-block; max-width: 58px; overflow: hidden; text-overflow: ellipsis;
    vertical-align: bottom;
  }
}
@media (max-width: 360px) {
  .cabecera-fila:has(.insignia-cabecera) { --logo-tam: 22px; }
}

/* ============ B57: CONTRASEÑAS DESDE /admin/usuarios ============ */
.clave-con-ojo { display: flex; gap: 8px; align-items: stretch; }
.clave-con-ojo input { flex: 1; min-width: 0; }
.btn-ojo { flex: none; padding: 0 14px; min-height: 44px; border: 1px solid var(--linea);
  border-radius: 12px; background: #fff; color: var(--noche); font-weight: 600; font-size: 13px;
  cursor: pointer; }
.btn-ojo[aria-pressed="true"] { background: var(--fondo-suave, #f6f8f8); }
.aviso-claves { border-left-color: #B45309; background: #FFF7ED; }
.aviso-claves a { font-weight: 700; }
.aviso-claves .pista { display: block; margin-top: 4px; }

/* ============ B51: SERVICIO CAÍDO ============ */
/* Rojo, fijo abajo y por encima de todo: el superadministrador lo ve en cualquier
   pantalla hasta que la dirección pública vuelva a responder. */
.aviso-servicio-caido {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 95;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 14px 18px; border-radius: 14px; background: #B42318; color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .25); font-size: 14px;
}
.aviso-servicio-caido strong { flex: 1 1 100%; font-size: 15px; }
.aviso-servicio-caido a { color: #fff; font-weight: 700; text-decoration: underline; }
.con-ver-como .aviso-servicio-caido { bottom: 76px; }
.servicio-ok { color: #1F7A4D; font-weight: 700; }
.servicio-mal { color: #B42318; font-weight: 700; }

/* ============ B50: COMPARTIR MI WEB ============ */
.compartir-web { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.compartir-web > div:first-child { display: grid; gap: 2px; min-width: 0; }
.compartir-web .pista { overflow-wrap: anywhere; }

/* ============ B52: QUÉ CORREGIR EN MI CARTERA ============ */
.mejoras { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 18px 20px; margin: 0 0 22px; }
.mejoras h2 { margin: 0 0 4px; font-size: 19px; color: var(--noche); }
.mejoras > ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.mejora { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 14px;
  border: 1px solid var(--linea); border-left: 5px solid #B9C2C6; }
.mejora-alta { border-left-color: #B7791F; }
.mejora-media { border-left-color: #D4AF37; }
.mejora > img, .mejora-sin-foto { flex: none; width: 76px; height: 76px; border-radius: 12px; object-fit: cover; }
.mejora-sin-foto { display: grid; place-items: center; background: #EEF1F1; font-size: 12px; color: var(--texto-suave); }
.mejora-datos { min-width: 0; flex: 1; }
.mejora-datos ul { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
@media (max-width: 640px) {
  .mejoras { padding: 14px; }
  .mejora { flex-direction: column; }
  .mejora > img, .mejora-sin-foto { width: 100%; height: 140px; }
}

/* Showroom 3 (10 oct): los términos en el iPhone. La cabecera (con su «×») y «Continuar» quedan fijos
   dentro del modal mientras se lee; el texto se desplaza por dentro, sin mover la página. */
.legal-cabeza { position: sticky; top: -26px; z-index: 2; background: #fff; margin: -26px -26px 0; padding: 18px 26px 8px; }
.legal-aceptar { position: sticky; bottom: -22px; z-index: 2; background: #fff; margin: 16px -26px -22px; padding: 12px 26px 18px;
  border-top: 1px solid var(--linea); }

/* (Showroom 5: el logotipo vive en nucleo.css y _logotipo.html.) */

/* ============ SHOWROOM 4: DESTACADO SOBRIO ============ */
/* En la grilla del home el Destacado ya no es dorado (el dorado es de la franja de Super destacados):
   noche de la marca con texto blanco (≈18:1) y la estrella en turquesa claro. */
.destacado-chip.destacado-sobrio { background: #15142C; color: #fff; box-shadow: 0 4px 12px rgba(21,20,44,.28); font-weight: 700; }
.destacado-chip.destacado-sobrio .destacado-ico { fill: #3FC9CE; }
.tarjeta.tarjeta-sobria { box-shadow: 0 0 0 1px rgba(21,20,44,.14), 0 8px 22px rgba(21,20,44,.10); }