/* B58 · Sistema visual (Diseño 2.0). Se carga al final: re-estila, no borra nada. */
:root {
  --ui-noche: #15142C; --ui-morado: #24234A; --ui-morado-2: #34325F;
  --ui-turquesa: #00989E; --ui-turquesa-luz: #3FC9CE;
  --ui-dorado: #D4AF37; --ui-dorado-luz: #F2D27A; --ui-energia: #FF7F50;
  --ui-fondo: #F5F5F1; --ui-texto: #263238; --ui-texto-osc: #EDEDF5;
  --ui-texto-osc-2: rgba(237,237,245,.68);
  --ui-aurora: radial-gradient(900px 420px at 8% -10%, rgba(0,152,158,.35), transparent 60%),
               radial-gradient(800px 420px at 95% -20%, rgba(212,175,55,.16), transparent 60%), var(--ui-noche);
  --ui-borde-ia: linear-gradient(135deg, var(--ui-turquesa), var(--ui-dorado));
  --ui-sombra-1: 0 1px 2px rgba(21,20,44,.08), 0 2px 8px rgba(21,20,44,.06);
  --ui-sombra-2: 0 4px 14px rgba(21,20,44,.12);
  --ui-sombra-3: 0 14px 40px rgba(21,20,44,.22);
  --ui-glow: 0 0 0 1px rgba(63,201,206,.35), 0 8px 30px rgba(0,152,158,.28);
  --ui-r1: 12px; --ui-r2: 18px; --ui-r3: 24px;
  --ui-vidrio: rgba(36,35,74,.78);
  --ui-curva: cubic-bezier(.2,.8,.2,1); --cabecera-h: 72px;
}

/* ---------- Iconos y mosaicos ---------- */
.ui-ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Iconos de marca (Simple Icons): rellenos, sin trazo. */
.ui-ic.ui-ic-marca { fill: currentColor; stroke: none; }
.ui-mosaico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #fff;
  background: linear-gradient(135deg, var(--ui-turquesa), #00757a); font-size: 20px; flex: none; }
.ui-mosaico.dorado { background: linear-gradient(135deg, var(--ui-dorado), #a8861f); }
.ui-mosaico.energia { background: linear-gradient(135deg, var(--ui-energia), #d85f33); }
.ui-mosaico.morado { background: linear-gradient(135deg, var(--ui-morado-2), var(--ui-morado)); }
.ui-mosaico.grande { width: 64px; height: 64px; border-radius: 18px; font-size: 34px; box-shadow: var(--ui-glow); }
/* Showroom 5 (2.6): el brillo, del color del ícono (antes turquesa también en los dorados, p. ej. «Tienes 3 meses…»). */
.ui-mosaico.grande.dorado { box-shadow: 0 0 0 1px rgba(212,175,55,.4), 0 8px 30px rgba(212,175,55,.32); }
.ui-mosaico.grande.energia { box-shadow: 0 0 0 1px rgba(255,127,80,.35), 0 8px 30px rgba(255,127,80,.28); }
.num { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Cabecera de vidrio ---------- */
body { background: var(--ui-fondo); }
.cabecera { background: var(--ui-aurora) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important;
  background-attachment: scroll !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important; box-shadow: none !important; }
.cabecera .cabecera-fila { min-height: 72px; height: 72px; gap: 14px; flex-wrap: nowrap; }
.cabecera .logo.sobre-oscuro .logotipo-a { color: var(--cb-dorado, #D4AF37); }   /* 2 nov: «Co» en el dorado del isotipo */
.cabecera .menu-principal { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: nowrap; }
.cabecera .menu-principal a { color: var(--ui-texto-osc-2); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 14px; transition: all .25s var(--ui-curva); }
@media (hover: hover) { .cabecera .menu-principal a:hover { color: #fff; background: rgba(255,255,255,.08); } }
.cabecera .menu-principal a.active { color: #fff; background: rgba(63,201,206,.16); box-shadow: inset 0 -2px 0 var(--ui-turquesa-luz); }
.cabecera .menu-principal a .ui-ic { font-size: 18px; }
.cabecera .menu-principal a::after { display: none !important; }
.cabecera .boton-publicar { background: linear-gradient(135deg, #007f85, #00686d); color: #fff; border: 0; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,152,158,.35); display: inline-flex; align-items: center; gap: 8px; transition: transform .15s, box-shadow .25s; }
@media (hover: hover) { .cabecera .boton-publicar:hover { box-shadow: var(--ui-glow); } }
.cabecera .boton-publicar:active, .btn:active { transform: scale(.97); }
.boton-publicar .mas-pts { background: var(--ui-dorado); color: #3a2c00; border-radius: 999px; font-size: 11px; padding: 2px 7px; font-weight: 800; }
/* B110 (22 oct, noche): «Buscar interesados» junto a «Publicar». ui.js le deja el texto solo si entra sin mandar nada de
   la barra a «Más»; si no, la lupa sola, y si ni la lupa entra, junta un poco los rótulos (nav-justa, nav-justa-2). */
.cabecera .boton-interesados { flex: none; justify-content: center; font-weight: 700; }
.cabecera .boton-interesados .ui-ic { font-size: 18px; }
.cabecera .boton-interesados.solo-lupa { inline-size: 40px; block-size: 40px; padding: 0; }
.cabecera .boton-interesados.solo-lupa .txt, .cabecera .boton-interesados.oculto { display: none; }
.cabecera .boton-cabecera.boton-interesados.active { background: rgba(63,201,206,.16); border-color: var(--ui-turquesa-luz); }
.cabecera .boton-interesados:focus-visible { outline: 3px solid var(--ui-turquesa-luz); outline-offset: 2px; }
.cabecera .nav-panel.nav-justa a, .cabecera .nav-panel.nav-justa .nav-mas > summary { padding-left: 8px; padding-right: 8px; }
.cabecera .nav-panel.nav-justa-2 a, .cabecera .nav-panel.nav-justa-2 .nav-mas > summary { padding-left: 6px; padding-right: 6px; }
.cabecera .sesion { color: var(--ui-texto-osc); }
.cabecera .menu-abrir span { background: #fff; }
.cabecera .insignia-cabecera { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }

/* Panel de la cuenta como vidrio con grupos */
.cabecera .menu-usuario-lista { background: var(--ui-vidrio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ui-r2); box-shadow: var(--ui-sombra-3); padding: 8px 0; min-width: 250px; overflow: hidden; }
.cabecera .menu-usuario-lista > :not(hr) { margin-left: 8px; margin-right: 8px; }
.cabecera .menu-usuario-lista a { color: var(--ui-texto-osc); border-radius: 10px; display: flex; align-items: center; gap: 10px; }
@media (hover: hover) { .cabecera .menu-usuario-lista a:hover { background: rgba(255,255,255,.1); } }
.cabecera .menu-usuario-grupo { color: var(--ui-dorado-luz); }

/* Chip de la cuenta (7 oct): anillo de nivel con el emblema (hace de avatar), el nombre corto y,
   debajo, los puntos. Es el <summary> del menú: todo el chip abre el menú de la cuenta. */
.chip-cuenta { display: inline-flex; align-items: center; gap: 10px; margin-left: 0; padding: 4px 12px 4px 4px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); color: var(--ui-texto-osc); cursor: pointer; white-space: nowrap;
  transition: background .25s, border-color .25s; }
.menu-usuario[open] > .chip-cuenta { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); }
@media (hover: hover) { .chip-cuenta:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.24); } }
.chip-cuenta:focus-visible { outline: 3px solid var(--ui-turquesa-luz); outline-offset: 2px; }
.chip-texto { display: grid; gap: 1px; line-height: 1.15; text-align: left; }
.chip-nombre { font-weight: 700; font-size: 14px; }
.chip-pts { display: inline-flex; align-items: center; gap: 4px; font-family: var(--fuente-num); font-weight: 600; font-size: 12px;
  font-variant-numeric: tabular-nums; color: rgba(237,237,245,.86); }
.chip-flecha { font-size: 12px; opacity: .8; }
.chip-sin-nivel { padding: 9px 14px; }
.chip-iniciales { display: none; }
.anillo-mini { position: relative; width: 38px; height: 38px; display: grid; place-items: center; }
.anillo-mini svg.anillo { position: absolute; inset: 0; width: 38px; height: 38px; transform: rotate(-90deg); }
.anillo-mini .emblema { width: 26px; height: 26px; display: grid; place-items: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px;
  color: #fff; background: var(--ui-morado-2); box-shadow: 0 0 0 2px var(--ins, var(--ui-turquesa)); flex: none; }
.avatar.xl { width: 72px; height: 72px; font-size: 24px; box-shadow: 0 0 0 3px var(--ins, var(--ui-turquesa)), 0 0 24px color-mix(in srgb, var(--ins, #00989E) 55%, transparent); }
.avatar.lg { width: 52px; height: 52px; font-size: 17px; }
/* Showroom 5 (2.1): la foto de Mi perfil en lugar de las iniciales (avatar, chip de la cabecera). */
.avatar.con-foto { overflow: hidden; }
.avatar.con-foto img, .chip-foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.anillo-mini .chip-foto { width: 30px; height: 30px; }
.anillo-mini .emblema.en-esquina { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ui-noche); box-shadow: 0 0 0 1.5px var(--ins, var(--ui-turquesa)); }
.chip-sin-nivel .chip-foto { flex: none; width: 34px; height: 34px; }

/* ---------- Barra inferior del celular ---------- */
.barra-movil { display: none; }
@media (max-width: 767px) {
  .barra-movil { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--ui-vidrio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.1);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .barra-movil a, .barra-movil button { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ui-texto-osc-2);
    font-size: 11px; font-weight: 600; background: none; border: 0; text-decoration: none; padding: 4px 0; cursor: pointer; font-family: inherit; }
  .barra-movil .ui-ic { font-size: 22px; }
  .barra-movil .act { color: var(--ui-turquesa-luz); }
  .barra-movil .central { transform: translateY(-14px); }
  .barra-movil .central .disco { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--ui-turquesa), #00757a); box-shadow: var(--ui-glow); border: 3px solid var(--ui-noche); }
  .barra-movil .central .disco .ui-ic { font-size: 26px; }
  body.con-barra-movil { padding-bottom: 76px; }
  .cabecera .boton-publicar, .cabecera .menu-principal, .cabecera .boton-interesados { display: none; }
  .cabecera .menu-principal.is-open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: var(--ui-noche); padding: 12px 16px; align-items: stretch; }
  .cabecera .cabecera-fila { gap: 8px; }
  .cabecera .lema { display: none; }
  .cabecera .insignia-cabecera { display: none; }
  .chip-cuenta { padding: 3px 9px 3px 3px; gap: 6px; }
  .chip-cuenta .chip-texto { display: none; }
  .chip-sin-nivel { padding: 3px 9px 3px 3px; }
  .chip-sin-nivel .chip-iniciales { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--ui-morado-2); color: #fff; }
}

/* Pie */
.pie-sitio { background: var(--ui-noche) !important;
  background-image: radial-gradient(circle at 1px 1px, rgba(63,201,206,.10) 1px, transparent 1.5px) !important; background-size: 26px 26px !important; }

/* ---------- Héroe, HUD, tarjetas ---------- */
.ui-heroe { background: var(--ui-aurora); color: var(--ui-texto-osc); position: relative; overflow: hidden; padding: 28px 0 34px; }
.ui-heroe::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(63,201,206,.22) 1px, transparent 1.6px); background-size: 34px 34px;
  animation: ui-deriva 60s linear infinite; }
@keyframes ui-deriva { to { background-position: 340px 170px; } }
.ui-heroe > .container { position: relative; }
.ui-heroe-fila { display: flex; gap: 18px; align-items: center; }
.ui-heroe h1 { font-family: var(--fuente-titulo); font-weight: 600; font-size: clamp(32px, 5vw, 56px); line-height: 1.02; margin: 0; color: #fff; }
.ui-heroe p.bajada { margin: 6px 0 0; color: var(--ui-texto-osc-2); font-size: 15px; max-width: 78ch; }
.ui-hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; }
.ui-hud-i { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: var(--ui-r2); padding: 14px 16px;
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ui-hud-i .ui-ic { font-size: 26px; color: var(--ui-turquesa-luz); grid-row: span 2; }
.ui-hud-i.dorado .ui-ic, .ui-hud-i.dorado .v { color: var(--ui-dorado-luz); }
.ui-hud-i .v { font-family: var(--fuente-num); font-weight: 700; font-size: clamp(26px, 4vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.ui-hud-i .r { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ui-texto-osc-2); }

.zona-juego { background: var(--ui-noche); background-image: var(--ui-aurora); background-attachment: fixed; color: var(--ui-texto-osc); }
.ui-card { background: #fff; border-radius: var(--ui-r2); box-shadow: var(--ui-sombra-1); padding: 22px; margin-top: 18px; color: var(--ui-texto); }
.ui-card.osc { background: linear-gradient(160deg, var(--ui-morado), var(--ui-noche)); color: var(--ui-texto-osc); box-shadow: var(--ui-sombra-3); border: 1px solid rgba(255,255,255,.08); }
.ui-card-t { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ui-card-t h2 { margin: 0; font-size: 18px; font-weight: 700; flex: 1; }
.ui-card-t a.accion { font-weight: 600; font-size: 14px; color: var(--ui-turquesa); text-decoration: none; }
.ui-card.osc .ui-card-t a.accion { color: var(--ui-turquesa-luz); }
.ui-card.reto { border: 2px solid var(--ui-energia); box-shadow: 0 8px 28px rgba(255,127,80,.18); }
.ui-card.dorada { background: linear-gradient(135deg, #3a2f0c, #5c4a12 55%, var(--ui-dorado)); color: #fff8dc; border: 1px solid var(--ui-dorado-luz); }

/* ---------- Barra, anillo, chips ---------- */
.ui-barra { height: 12px; border-radius: 99px; background: rgba(120,120,150,.22); overflow: hidden; position: relative; }
.ui-barra > i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--ui-turquesa), var(--ui-turquesa-luz));
  transition: width .9s var(--ui-curva); position: relative; overflow: hidden; }
.ui-barra > i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%); animation: ui-brillo 2.4s 1s ease-in-out 2; }
@keyframes ui-brillo { to { transform: translateX(100%); } }
.ui-barra.energia > i { background: linear-gradient(90deg, var(--ui-energia), #ffae8c); }
.ui-barra.dorado > i { background: linear-gradient(90deg, var(--ui-dorado), var(--ui-dorado-luz)); }
.ui-barra.grueso { height: 18px; }
.ui-anillo { position: relative; display: inline-grid; place-items: center; }
.ui-anillo svg { transform: rotate(-90deg); }
.ui-anillo .pista { stroke: rgba(120,120,150,.25); } .ui-anillo .prog { stroke: var(--ui-turquesa); stroke-linecap: round; transition: stroke-dashoffset 1s var(--ui-curva); }
.ui-anillo.dorado .prog { stroke: var(--ui-dorado); }
.ui-anillo .centro { position: absolute; text-align: center; line-height: 1.05; font-family: var(--fuente-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.ui-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(0,152,158,.12); color: #006d72; white-space: nowrap; }
.ui-chip.dorado { background: rgba(212,175,55,.18); color: #7a5f00; }
.ui-chip.energia { background: rgba(255,127,80,.16); color: #b64a1f; }
.ui-chip.gris { background: rgba(120,120,150,.16); color: #54546c; }
.ui-chip.osc { background: rgba(255,255,255,.1); color: var(--ui-texto-osc); }
.ui-chip.osc.dorado { color: var(--ui-dorado-luz); }
.ui-chip .ui-ic { font-size: 14px; }
.rotulo-demo { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 1px 7px;
  border-radius: 99px; background: rgba(120,120,150,.18); color: #54546c; vertical-align: middle; }

/* `ui.ayuda` (_ui.html): una nota en un (i) o un «?»; el texto aparece al pasar o al enfocar. Hasta el 22 oct vivía en
   ui-trabajo.css; aquí la tienen todas las pantallas (Mi inicio la usa en cada título). */
.ui-ayuda { position: relative; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: #6b6b85; cursor: help; font-size: 16px; flex: none; }
.ui-ayuda:focus-visible { color: var(--ui-turquesa); }
@media (hover: hover) { .ui-ayuda:hover { color: var(--ui-turquesa); } }
.ui-ayuda:focus-visible { outline: 3px solid var(--ui-turquesa-luz); outline-offset: 1px; }
.ui-ayuda::after { content: attr(data-tip); position: absolute; z-index: 30; top: calc(100% + 8px); right: -6px; width: max-content; max-width: min(280px, 80vw);
  padding: 9px 12px; border-radius: 10px; background: var(--ui-noche); color: #fff; font-size: 12.5px; font-weight: 500; line-height: 1.45;
  text-align: left; letter-spacing: 0; text-transform: none; box-shadow: var(--ui-sombra-2); opacity: 0; visibility: hidden; transition: opacity .15s; }
.ui-ayuda:focus::after, .ui-ayuda.abierta::after { opacity: 1; visibility: visible; }
/* Showroom 3: en el celular se abre con un toque (ui.js) y la zona tocable llega a 44 px. */
.ui-ayuda::before { content: ""; position: absolute; inset: -10px; }
@media (hover: hover) { .ui-ayuda:hover::after { opacity: 1; visibility: visible; } }

/* ---------- Botones ---------- */
.ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 999px; border: 0;
  font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; font-family: inherit; transition: transform .15s, box-shadow .25s, background .25s; }
.ui-btn:active { transform: scale(.97); }
.ui-btn:focus-visible, .ui-nodo:focus-visible, a:focus-visible { outline: 3px solid var(--ui-turquesa-luz); outline-offset: 2px; }
.ui-btn.primario { background: linear-gradient(135deg, var(--ui-turquesa), #00757a); color: #fff; box-shadow: 0 6px 18px rgba(0,152,158,.35); }
@media (hover: hover) { .ui-btn.primario:hover { box-shadow: var(--ui-glow); } }
.ui-btn.secundario { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@media (hover: hover) { .ui-btn.secundario:hover { background: rgba(255,255,255,.2); } }
.ui-btn.whatsapp { background: #25D366; color: #06371a; }
.ui-btn.logro { background: linear-gradient(135deg, var(--ui-dorado-luz), var(--ui-dorado)); color: #3a2c00; }
.ui-btn.hecho { background: var(--ui-dorado); color: #3a2c00; }
.ui-btn .check { stroke-dasharray: 24; stroke-dashoffset: 24; animation: ui-trazo .4s .05s forwards; }
@keyframes ui-trazo { to { stroke-dashoffset: 0; } }

/* ---------- Toasts y celebraciones ---------- */
.ui-toasts { position: fixed; top: 84px; right: 16px; z-index: 200; display: grid; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.ui-toast { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--ui-r1); background: var(--ui-vidrio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ui-texto-osc); box-shadow: var(--ui-sombra-3); border: 1px solid rgba(255,255,255,.12); cursor: pointer; animation: ui-entra .45s var(--ui-curva); }
.ui-toast.dorado { border-color: var(--ui-dorado); } .ui-toast.turquesa { border-color: var(--ui-turquesa-luz); }
.ui-toast.sale { opacity: 0; transform: translateX(20px); transition: all .3s; }
@media (max-width: 767px) { .ui-toasts { top: auto; bottom: 88px; right: 16px; } }
.ui-nivel { position: fixed; inset: 0; z-index: 300; background: rgba(10,9,28,.88); display: grid; place-items: center; padding: 20px; animation: ui-fundido .4s; }
.ui-nivel-caja { text-align: center; color: #fff; max-width: 420px; position: relative; }
.ui-nivel-caja .emb { width: 150px; height: 150px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ins) 45%, transparent), transparent 70%); animation: ui-crece .9s var(--ui-curva); }
.ui-nivel-caja h2 { font-family: var(--fuente-titulo); font-size: 44px; margin: 6px 0; }
#ui-confeti { position: fixed; inset: 0; z-index: 310; pointer-events: none; }
@keyframes ui-crece { from { transform: scale(.2); opacity: 0; } }
@keyframes ui-entra { from { opacity: 0; transform: translateY(12px); } }
@keyframes ui-fundido { from { opacity: 0; } }

/* Aparición escalonada */
[data-aparece] { opacity: 0; transform: translateY(14px); }
.ui-listo [data-aparece], body[data-sin-animar] [data-aparece] { opacity: 1; transform: none; transition: opacity .6s var(--ui-curva), transform .6s var(--ui-curva); }
body[data-sin-animar] [data-aparece] { transition: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  [data-aparece] { opacity: 1 !important; transform: none !important; transition: opacity .3s !important; }
  .ui-barra > i, .ui-pista .relleno { transition: none; }
}

.ui-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-lista li { display: flex; align-items: center; gap: 12px; }
.ui-lista li .ui-ic { font-size: 20px; color: var(--ui-turquesa); }
.ui-lista li .der { margin-left: auto; font-weight: 700; }

/* Correcciones de la primera pasada */
.ui-card-t h2 { font-family: var(--fuente-ui); color: inherit; letter-spacing: 0; }
h3 { font-family: var(--fuente-ui); font-weight: 700; }
.cabecera .cabecera-fila { max-width: 1440px; padding-left: 20px; padding-right: 20px; gap: 10px; }
/* Showroom 4 (10 oct): bajo 1.700 px la barra quedaba en solo íconos aunque sobrara espacio (7 oct:
   con los rótulos desbordaba a 1536). Ahora los rótulos se ven siempre: la barra usa el ancho de la
   ventana (hasta 1.640 px), los enlaces van más juntos, «Publicar inmueble» se acorta a «Publicar»
   bajo 1.500 px y, si aun así no entran, ui.js pasa las últimas opciones a «Más». */
@media (min-width: 768px) {
  .cabecera .cabecera-fila.container { width: min(1640px, calc(100% - 2 * clamp(12px, 1.5vw, 28px))); max-width: none;
    padding-left: 0; padding-right: 0; }
  .cabecera .nav-panel { min-width: 0; gap: 2px; }
  .cabecera .nav-panel a { padding: 8px 10px; gap: 6px; }
  /* De 768 a 960 px nucleo.css la convierte en una lista desplegable: en el panel es la
     misma fila, con «Más» si no entra. */
  .cabecera .nav-panel { position: static; flex-direction: row; background: none; border: 0; padding: 0; }
  .cabecera .nav-panel a { border-bottom: 0; }
  .cabecera .toggle-panel { display: none; }
}
@media (min-width: 768px) and (max-width: 1499px) { .cabecera .boton-publicar .boton-largo { display: none; } }
.cabecera .nav-mas { position: relative; flex: none; }
.cabecera .nav-mas[hidden] { display: none; }
.cabecera .nav-mas > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 999px;
  color: var(--ui-texto-osc-2); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: all .25s var(--ui-curva); }
.cabecera .nav-mas > summary::-webkit-details-marker { display: none; }
.cabecera .nav-mas > summary .ui-ic { font-size: 18px; }
.cabecera .nav-mas > summary .chip-flecha { font-size: 11px; }
@media (hover: hover) { .cabecera .nav-mas > summary:hover { color: #fff; background: rgba(255,255,255,.08); } }
.cabecera .nav-mas[open] > summary, .cabecera .nav-mas > summary.active { color: #fff; background: rgba(63,201,206,.16); }
.cabecera .nav-mas > summary:focus-visible { outline: 3px solid var(--ui-turquesa-luz); outline-offset: 2px; }
.cabecera .nav-mas-lista { position: absolute; top: calc(100% + 12px); right: 0; min-width: 220px; display: grid; gap: 2px; padding: 8px;
  background: var(--ui-vidrio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ui-r2); box-shadow: var(--ui-sombra-3); z-index: 80; }
.cabecera .nav-mas-lista a { border-radius: 10px; padding: 10px 12px; }
.cabecera .marca-portal { flex: none; }
.ui-card-t { flex-wrap: wrap; } .ui-card-t h2 { min-width: 0; }

/* ---------- 4 oct · Deuda de D2: QR, medallas, primeros pasos, avisos ---------- */
a.ui-toast { text-decoration: none; }
.ui-toast.serio { border-color: rgba(237,237,245,.35); }
.ui-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.ui-nivel-lista { list-style: none; padding: 0; margin: 10px 0 20px; color: rgba(237,237,245,.8); }
.ui-nivel-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ui-dialogo { border: 0; border-radius: var(--ui-r3); padding: 26px 24px; width: min(420px, calc(100vw - 32px)); box-shadow: var(--ui-sombra-3); text-align: center; color: var(--ui-texto); }
.ui-dialogo h2 { font-family: var(--fuente-ui); font-size: 20px; margin: 0 0 6px; }
.ui-dialogo::backdrop { background: rgba(10,9,28,.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ui-dialogo[open] { animation: ui-entra .35s var(--ui-curva); }

/* Campos: el mismo formulario de siempre, con foco y bordes de la marca */
.campo input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), .campo select, .campo textarea {
  border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--ui-turquesa) !important; box-shadow: 0 0 0 3px rgba(0,152,158,.18) !important; outline: none; }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }

/* Visitante: «Ingreso de agentes» como botón de vidrio claro sobre la cabecera. */
.cabecera .boton-cabecera:not(.boton-publicar) { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); }
@media (hover: hover) { .cabecera .boton-cabecera:not(.boton-publicar):hover { background: rgba(255,255,255,.18); border-color: var(--ui-turquesa-luz); } }
.cabecera .menu-principal a { -webkit-text-fill-color: currentColor; }
/* El correo no tenía el estilo de los demás campos. */
.campo input[type="email"], .campo input[type="search"] {
  font-family: inherit; font-size: 14px; color: var(--texto); background: #fff; border: 1px solid var(--cb-gris-borde);
  border-radius: 12px; padding: 11px 12px; width: 100%; outline: none; }
/* «Publicar» dentro del menú es solo del celular: en escritorio ya está el botón. */
.cabecera .menu-principal a.solo-movil { display: none; }
@media (max-width: 767px) { .cabecera .menu-principal.is-open a.solo-movil { display: inline-flex; } }
/* B110 (22 oct): «Buscar interesados» en el menú de la cuenta, solo en el celular (en la computadora va en la barra). */
.cabecera .menu-usuario-lista a.solo-movil { display: none; }
@media (max-width: 767px) { .cabecera .menu-usuario-lista a.solo-movil { display: flex; } }
.cabecera .menu-usuario-lista a.active { color: #fff; background: rgba(63,201,206,.16); }

/* ---------- D3 · Zona de trabajo: piezas comunes ---------- */
.ui-pagina-trabajo { padding-top: 22px; padding-bottom: 56px; }
.ui-hud-i .v small { font-size: .55em; opacity: .7; margin-left: 2px; }
.ui-heroe-foto { background: var(--ui-noche); }
.ui-heroe-fondo { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.15); opacity: .7; transform: scale(1.05); }
.ui-heroe-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,44,.62), rgba(21,20,44,.88)), radial-gradient(700px 300px at 10% 0%, rgba(0,152,158,.25), transparent 60%); }
.ui-heroe-foto::before { z-index: 1; }
.ui-heroe-foto > .container { z-index: 2; }
.ui-btn.secundario-claro { background: #fff; color: var(--ui-morado); border: 1px solid rgba(36,35,74,.14); box-shadow: var(--ui-sombra-1); }
@media (hover: hover) { .ui-btn.secundario-claro:hover { border-color: var(--ui-turquesa); color: #006d72; } }
.ui-btn.fantasma { background: transparent; color: inherit; height: 38px; padding: 0 10px; }
@media (hover: hover) { .ui-btn.fantasma:hover { background: rgba(120,120,150,.12); } }

/* Avisos con icono */
.ui-aviso { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--ui-r2); background: #fff; box-shadow: var(--ui-sombra-1); margin: 0 0 16px; border-left: 5px solid var(--ui-turquesa); }
.ui-aviso-serio { border-left-color: var(--ui-energia); }
.ui-aviso-dorado { border-left-color: var(--ui-dorado); }
.ui-aviso-info { border-left-color: var(--ui-morado-2); }
.ui-aviso-cuerpo { flex: 1; display: flex; gap: 12px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.ui-aviso-cuerpo > p { margin: 0; flex: 1 1 320px; line-height: 1.5; }
.ui-aviso-cuerpo strong { display: inline; }

/* Estado vacío ilustrado */
.ui-vacio { text-align: center; padding: 30px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-vacio img { width: 180px; height: auto; }
.ui-vacio h3 { margin: 6px 0 0; font-size: 20px; color: var(--ui-texto); }
.ui-vacio p { margin: 0 0 10px; color: #6b6b85; }
.sin-resultados { grid-column: 1 / -1; }

/* Tarjetas: subir 3 px y zoom suave (§2.7), cinta y chips de indicadores */
@media (hover: hover) { .tarjeta:hover { transform: translateY(-3px); box-shadow: var(--ui-sombra-3); } }
@media (hover: hover) { .tarjeta:hover .tarjeta-foto img { transform: scale(1.04); } }
.ui-hud-i .v { white-space: nowrap; }
@media (max-width: 480px) { .ui-hud { gap: 8px; } .ui-hud-i { padding: 12px; gap: 2px 8px; } .ui-hud-i .v { font-size: 22px; } .ui-hud-i .ui-ic { font-size: 20px; } .ui-hud-i .r { font-size: 10px; letter-spacing: .1em; } }

.ui-heroe-compacto { padding: 20px 0 22px; }
.ui-heroe-compacto .ui-heroe-fila h1 { font-size: clamp(30px, 4vw, 44px); }
.ui-heroe-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* Top 5 como podio (Inicio y Dashboard) */
.ui-podio { display: grid; gap: 10px; }
.ui-puesto { display: grid; grid-template-columns: 40px 84px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: var(--ui-r1); background: #fff; box-shadow: var(--ui-sombra-1); }
.ui-puesto img { width: 84px; height: 62px; object-fit: cover; border-radius: 10px; }
.medalla-p { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-family: var(--fuente-num); font-variant-numeric: tabular-nums; color: #3a2c00; }
.medalla-p.p1 { background: linear-gradient(135deg, #f7e08a, #d4af37); } .medalla-p.p2 { background: linear-gradient(135deg, #f2f2f6, #a9aab8); } .medalla-p.p3 { background: linear-gradient(135deg, #e9b98b, #b0703a); } .medalla-p.px { background: #e6e6ee; color: #54546c; }
@media (max-width: 560px) { .ui-puesto { grid-template-columns: 36px 1fr auto; } .ui-puesto img { display: none; } }
.top5-item { list-style: none; }
.ui-podio.top5 { padding: 0; margin: 0; }
.ui-puesto { text-decoration: none; color: inherit; transition: transform .25s var(--ui-curva), box-shadow .25s; }
@media (hover: hover) { .ui-puesto:hover { transform: translateY(-3px); box-shadow: var(--ui-sombra-2); } }
.ui-puesto .top5-foto { width: 84px; height: 62px; object-fit: cover; border-radius: 10px; }
.ui-puesto .top5-datos { display: grid; gap: 2px; min-width: 0; }
.ui-puesto .top5-meta, .ui-puesto .top5-porque { font-size: 13px; color: #6b6b85; }
.ui-puesto .top5-puntaje { background: none; padding: 0; min-width: 0; box-shadow: none; }

/* tabla_pro (§2.6): cabecera fija, cebra suave, números alineados. En el celular, las tablas con
   data-rotulo ya se vuelven tarjetas (dashboard.css / cobroker.css). */
.tabla-pro { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.tabla-pro thead th { position: sticky; top: 0; z-index: 1; background: #f2f3f7; color: #54546c; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; text-align: left; }
.tabla-pro tbody tr:nth-child(even) td { background: rgba(21,20,44,.025); }
@media (hover: hover) { .tabla-pro tbody tr:hover td { background: rgba(0,152,158,.06); } }
.tabla-pro .num, .tabla-pro td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Título de página con icono en mosaico (pantallas sin héroe: legales, datos) */
.ui-titulo-icono { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.ui-titulo-icono h1 { margin: 0; }

/* B71: la cortesía de lanzamiento, como nota dentro del menú de la cuenta. */
.menu-usuario-nota { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--cb-charcoal, #263238); }
.cabecera .menu-usuario-nota { color: var(--ui-dorado-luz); padding: 8px 10px; }
/* B71 v1.1: "Incluye N meses por colegas que invitaste", debajo de la fecha. */
.menu-usuario-nota-sub { display: block; font-size: 12px; font-weight: 500; opacity: .85; margin-top: 2px; }

/* B68: compartir. Con el menú del celular a mano, "Compartir" reemplaza al botón de
   WhatsApp (que ya está dentro del menú); "Copiar enlace" se queda. */
.ui-compartir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ui-compartir.con-nativo [data-compartir-wa] { display: none; }
.ui-compartir [hidden] { display: none !important; }
@media (max-width: 640px) { .ui-compartir .ui-btn { flex: 1 1 100%; justify-content: center; } }
/* B76: la condición del programa de referidos junto a los botones de invitar. */
.ui-nota-referidos { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-suave, #6b6b80); }
.ui-nota-referidos a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.osc .ui-nota-referidos { color: var(--ui-texto-osc-2, rgba(255,255,255,.72)); }
.ui-compartir-centro { justify-content: center; margin-top: 14px; }

/* ---------- B65 (ola 2): bandeja «Por atender» (Inicio y Conversaciones) ---------- */
.ui-por-atender { background: #fff; border-radius: var(--ui-r2); box-shadow: var(--ui-sombra-1); padding: 18px; margin: 0 0 18px; border-top: 4px solid var(--ui-energia); }
.ui-por-atender-titulo { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.ui-por-atender-titulo h2 { margin: 0; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.ui-por-atender-item { border: 1px solid rgba(36,35,74,.1); border-radius: var(--ui-r1); padding: 14px; margin-top: 12px; background: var(--ui-fondo); }
.ui-por-atender-cab { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ui-por-atender-cab > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ui-por-atender-pregunta { margin: 10px 0 6px; font-size: 15px; font-weight: 600; color: var(--ui-morado); overflow-wrap: anywhere; }
.ui-por-atender-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; margin-top: 10px; }
.ui-responder { flex: 1 1 100%; }
.ui-responder > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ui-responder > summary::-webkit-details-marker { display: none; }
.ui-responder-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ui-responder-form textarea, .ui-faq-guardar textarea, .ui-faq-guardar input[type=text] { width: 100%; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 10px; padding: 10px 12px; font: inherit; }
.ui-responder-form .ui-btn { align-self: flex-start; }
/* Showroom 5 (2.2): abierto, el formulario ya trae «Enviar por …»; el botón que lo abre sobraba. */
.ui-responder[open] > summary { display: none; }
.ui-responder[open] > .ui-responder-form { margin-top: 0; }
.ui-faq-guardar { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ui-faq-visible { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 6px; }
.ui-faq-visible legend { font-weight: 700; margin-bottom: 4px; }
@media (max-width: 600px) {
  .ui-por-atender { padding: 14px; }
  .ui-por-atender-acciones > .btn, .ui-por-atender-acciones form, .ui-responder-form .ui-btn { width: 100%; }
}
/* B65: preguntas frecuentes en Editar aviso y en la ficha */
.ui-faq-editar { margin-top: 18px; }
.ui-faq-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid rgba(36,35,74,.1); }
.ui-faq-item input[type=text], .ui-faq-item textarea { width: 100%; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 10px; padding: 10px 12px; font: inherit; }
.ui-faq-item h3 { margin: 0 0 4px; font-size: 16px; }
.ui-faq-ficha-item { border-bottom: 1px solid rgba(0,0,0,.08); padding: 10px 0; }
.ui-faq-ficha-item > summary { cursor: pointer; font-weight: 600; color: var(--cb-morado, #24234A); }
.ui-faq-ficha-item > p { margin: 8px 0 0; }
.ui-por-atender-hilo { margin: 0 0 12px; }
.ui-por-atender-hilo-t { margin: 0; font-size: 16px; display: flex; gap: 8px; align-items: center; }
@media (max-width: 600px) {
  .ui-por-atender-cab > div { flex: 1 1 calc(100% - 56px); }
  .ui-por-atender-cab .ui-chip { margin-left: 50px; }
}
.ui-faq-editar { max-width: calc(100% - 316px); }
@media (max-width: 960px) { .ui-faq-editar { max-width: none; } }

/* ---------- B74 (ola 2): «Por cerrar», la misión y el embudo del interesado ---------- */
.ui-por-cerrar { border-top-color: var(--ui-dorado); }
.ui-por-cerrar-item { border: 1px solid rgba(36,35,74,.1); border-radius: var(--ui-r1); padding: 14px; margin-top: 12px; background: var(--ui-fondo); }
/* Showroom 5 (2.2): «Por cerrar» más compacto: en dos columnas desde 1000 px y con botones de 38 px. */
.ui-por-cerrar-lista .ui-por-cerrar-item { padding: 12px; }
.ui-por-cerrar-lista .ui-por-cerrar-acciones { gap: 6px; }
.ui-por-cerrar-lista .ui-por-cerrar-acciones .btn { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
@media (min-width: 1000px) {
  .ui-por-cerrar-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin-top: 12px; }
  .ui-por-cerrar-lista .ui-por-cerrar-item { margin-top: 0; }
}
.ui-por-cerrar-item .lead-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.ui-por-cerrar-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.ui-por-cerrar-acciones form { margin: 0; }
.ui-por-cerrar-no > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ui-por-cerrar-no > summary::-webkit-details-marker { display: none; }
.ui-por-cerrar-no[open] { flex: 1 1 100%; }
.ui-por-cerrar-motivo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.ui-por-cerrar-motivo select { border: 1px solid #CFD8DC; border-radius: 10px; padding: 8px 10px; font: inherit; max-width: 100%; }
.ui-mision-embudo { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: var(--ui-r1); background: rgba(212,175,55,.10); margin: 6px 0 4px; font-size: 14px; }
.ui-mision-embudo.cumplida { background: rgba(212,175,55,.22); }
.ui-embudo-lead { background: #fff; border-radius: var(--ui-r1); box-shadow: var(--ui-sombra-1); padding: 12px 14px; margin: 0 0 12px; }
.ui-embudo-lead > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-embudo-t { font-size: 14px; margin: 14px 0 6px; }
.ui-embudo-historial { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 4px; }
.ui-embudo-historial .cuando { font-variant-numeric: tabular-nums; color: #54546c; }
.ui-embudo-historial .fuente { font-weight: 700; }
@media (max-width: 600px) {
  .ui-mision-embudo { grid-template-columns: 1fr; }
  .ui-por-cerrar-acciones > form, .ui-por-cerrar-acciones .btn { width: 100%; }
}
.ui-cierre { display: grid; gap: 8px; }
.ui-cierre-ok { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.ui-interesados-aviso { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ui-interesados-aviso li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* En la columna angosta del detalle del aviso: el aviso ya se sabe, y el chip va abajo. */
.panel-split .ui-por-cerrar-item .ui-por-atender-cab > div { flex: 1 1 calc(100% - 56px); }
.panel-split .ui-por-cerrar-item .ui-por-atender-cab > div .lead-sub { display: none; }
.panel-split .ui-por-cerrar-item .ui-por-atender-cab .ui-chip { margin-left: 50px; }
.panel-split .ui-por-cerrar-acciones > form, .panel-split .ui-por-cerrar-acciones .btn { width: 100%; }

/* ---------- B70 (ola 2): «Reserva y venta» ---------- */
.ui-reserva select, .ui-reserva input[type=date], .ui-reserva input[type=text] { width: 100%; box-sizing: border-box; border: 1px solid #CFD8DC; border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; }
.ui-reserva .ui-monto { display: flex; gap: 8px; }
.ui-reserva .ui-monto select { width: auto; flex: none; }
.ui-reserva-form { margin-top: 8px; }
.ui-reserva-form > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ui-reserva-form > summary::-webkit-details-marker { display: none; }
.ui-reserva .ui-aviso-legal { margin-top: 12px; font-size: 12.5px; }
.ui-reserva .acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- B66 (ola 2): visita manual y «¿Asistió?» ---------- */
.ui-registrar-visita > summary { list-style: none; cursor: pointer; display: inline-flex; }
.ui-registrar-visita > summary::-webkit-details-marker { display: none; }
.ui-registrar-visita-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.ui-registrar-visita-form input { border: 1px solid #CFD8DC; border-radius: 10px; padding: 8px 10px; font: inherit; }
.ui-asistio { align-items: center; }
.ui-asistio-pregunta { margin: 8px 0 4px; }

/* Menú de la cuenta (7 oct): las dos líneas que enmarcan el aviso del periodo sin costo. 1 px, de
   borde a borde del menú, con el mismo aire vertical que ocupa un ítem (10 px). Sobre el menú oscuro
   de la cabecera el trazo oscuro no se vería: allí la misma línea va en claro y sutil. */
.menu-usuario-linea { border: 0; border-top: 1px solid rgba(21,20,44,.18); margin: 10px 0; height: 0; }
.cabecera .menu-usuario-linea { border-top-color: rgba(255,255,255,.16); }

/* Pie (7 oct): «Síguenos». Íconos monocromos de 20 px en un área táctil de 40 px. */
.pie-redes { margin-top: 4px; }
.pie-redes-t { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,237,245,.72); margin-bottom: 6px; }
.pie-redes-lista { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0 0 0 -10px; padding: 0; }
.pie-redes-lista a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: rgba(237,237,245,.72);
  transition: color .15s, transform .15s; }
.pie-redes-lista a .ui-ic { font-size: 20px; }
.pie-redes-lista a:focus-visible { color: var(--ui-turquesa-luz); transform: translateY(-1px); }
@media (hover: hover) { .pie-redes-lista a:hover { color: var(--ui-turquesa-luz); transform: translateY(-1px); } }
.pie-redes-lista a:focus-visible { outline: 2px solid var(--ui-turquesa-luz); outline-offset: 1px; }
@media (max-width: 640px) {
  .pie-redes { text-align: center; }
  .pie-redes-lista { justify-content: center; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pie-redes-lista a { transition: none; }
  .pie-redes-lista a:focus-visible { transform: none; }
  @media (hover: hover) { .pie-redes-lista a:hover { transform: none; } }
}

/* ---------- Showroom 4 · Cabecera pública ---------- */
/* Sin «Inmuebles» (hacía lo mismo que el logo): el hueco empuja «Ingreso de agentes» a la derecha.
   La puerta de las agentes se ve exclusiva: el dorado de la marca con texto oscuro (7,6:1 a 10,8:1), la llave
   del set de íconos y un foco blanco bien visible sobre la cabecera oscura. */
.cabecera .nav-hueco { flex: 1; }
.cabecera .boton-cabecera.boton-ingreso { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .01em;
  color: #2B2100; -webkit-text-fill-color: #2B2100; background: linear-gradient(135deg, var(--ui-dorado-luz), var(--ui-dorado));
  border: 1px solid rgba(255,236,170,.65); box-shadow: 0 6px 20px rgba(212,175,55,.32), inset 0 1px 0 rgba(255,255,255,.45); }
.cabecera .boton-cabecera.boton-ingreso .ui-ic { font-size: 18px; stroke-width: 2; }
@media (hover: hover) { .cabecera .boton-cabecera.boton-ingreso:hover { background: linear-gradient(135deg, #F7DF97, #DDBB4A); border-color: #FFF3C8;
  color: #2B2100; box-shadow: 0 8px 26px rgba(212,175,55,.45), inset 0 1px 0 rgba(255,255,255,.5); } }
.cabecera .boton-cabecera.boton-ingreso:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 360px) { .cabecera .boton-cabecera.boton-ingreso { padding: 8px 10px; gap: 5px; } .cabecera .boton-cabecera.boton-ingreso .ui-ic { font-size: 16px; } }
/* Showroom 4: en el celular el menú de la cuenta se abre pegado al borde derecho de la pantalla (el chip
   no está en la esquina: a 320 px se salía 12 px por la izquierda). */
@media (max-width: 767px) { .cabecera .menu-usuario-lista { position: fixed; top: calc(var(--cabecera-h) + 6px); right: 8px;
  left: auto; min-width: 0; width: min(280px, calc(100vw - 16px)); max-height: calc(100vh - var(--cabecera-h) - 90px);
  max-height: calc(100dvh - var(--cabecera-h) - 90px); overflow-y: auto; overscroll-behavior: contain; } }

/* ---------- Showroom 4 · 2.3 Menú público (sin sesión) ---------- */
/* Comprar ▾ · Lanzamientos · Entrega inmediata · Distritos ▾ · ¿Cómo funciona? y, a la derecha,
   «Ingreso de agentes». Desde 1.100 px en la fila; debajo, dentro del ☰ (en el celular, con «Ingreso
   de agentes» arriba). Los desplegables son <details>: sin JS abren y cierran igual.
   B99 (14 oct): con «Planes» (y Alquilar, desde Showroom 5) la fila no entra antes de 1.280 px: medido, a
   1.100–1.270 las últimas opciones quedaban debajo de «Ingreso de agentes». Desde entonces, la fila va
   desde 1.280 px y, de 1.100 a 1.279, el ☰ de siempre. */
.cabecera .nav-publico { gap: 2px; min-width: 0; }
.cabecera .nav-publico > a:not(.boton-cabecera), .cabecera .nav-desp > summary { color: var(--ui-texto-osc-2); font-weight: 600; font-size: 14.5px;
  padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: all .25s var(--ui-curva); }
.cabecera .nav-desp { position: relative; }
.cabecera .nav-desp > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cabecera .nav-desp > summary::-webkit-details-marker { display: none; }
.cabecera .nav-desp > summary .chip-flecha { font-size: 11px; transition: transform .2s; }
.cabecera .nav-desp[open] > summary .chip-flecha { transform: rotate(180deg); }
@media (hover: hover) { .cabecera .nav-desp > summary:hover { color: #fff; background: rgba(255,255,255,.08); } }
.cabecera .nav-desp[open] > summary { color: #fff; background: rgba(255,255,255,.1); }
.cabecera .nav-desp > summary:focus-visible { outline: 3px solid var(--ui-turquesa-luz); outline-offset: 2px; }
.cabecera .nav-desp-lista { position: absolute; top: calc(100% + 12px); left: 0; min-width: 210px; display: grid; gap: 2px; padding: 8px;
  background: var(--ui-vidrio); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--ui-r2); box-shadow: var(--ui-sombra-3); z-index: 80; }
.cabecera .nav-desp-distritos { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 330px; }
.cabecera .nav-desp-lista a { color: var(--ui-texto-osc); -webkit-text-fill-color: currentColor; padding: 10px 12px; border-radius: 10px;
  font-weight: 600; font-size: 14px; white-space: nowrap; }
@media (hover: hover) { .cabecera .nav-desp-lista a:hover { background: rgba(255,255,255,.1); color: #fff; } }
.cabecera .nav-publico .boton-ingreso.en-menu { display: none; }
.cabecera .toggle-publico { display: none; }
@media (max-width: 1279px) {
  .cabecera .nav-publico { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: var(--ui-noche); padding: 12px 16px 16px; gap: 4px; box-shadow: var(--ui-sombra-3); }
  .cabecera .nav-publico.is-open { display: flex; }
  .cabecera .toggle-publico { display: block; margin-left: 8px; }
  .cabecera .nav-publico > a:not(.boton-cabecera), .cabecera .nav-desp > summary { border-radius: 12px; padding: 12px 14px; font-size: 15px; }
  .cabecera .nav-desp > summary { width: 100%; justify-content: space-between; }
  .cabecera .nav-desp-lista { position: static; min-width: 0; margin: 2px 0 6px; background: rgba(255,255,255,.05); box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; }
  .cabecera .nav-desp-distritos { min-width: 0; }
}
@media (max-width: 767px) {
  .cabecera .boton-cabecera.boton-ingreso:not(.en-menu) { display: none; }
  .cabecera .nav-publico .boton-ingreso.en-menu { display: inline-flex; justify-content: center; margin-bottom: 8px; padding: 12px 16px; }
  .cabecera .nav-publico { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- Showroom 5 · Menú público: cada opción con su ícono ---------- */
.cabecera .nav-publico > a:not(.boton-cabecera) { display: inline-flex; align-items: center; gap: 6px; }
.cabecera .nav-publico > a .ui-ic, .cabecera .nav-desp > summary .ui-ic { font-size: 17px; opacity: .85; }
.cabecera .nav-desp-lista a { display: flex; align-items: center; gap: 9px; }
.cabecera .nav-desp-lista a .ui-ic { font-size: 16px; opacity: .7; }
@media (min-width: 1280px) {
  /* En la fila, más juntas: con Alquilar y los íconos entran desde 1.366 px. */
  .cabecera .nav-publico > a:not(.boton-cabecera), .cabecera .nav-desp > summary { padding: 8px 10px; font-size: 14px; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  /* B99: con «Planes», de 1.280 a 1.365 px un poco más juntas (a 1.280 quedan 10 px antes de «Ingreso de agentes»). */
  .cabecera .nav-publico > a:not(.boton-cabecera), .cabecera .nav-desp > summary { padding-inline: 7px; }
}
@media (max-width: 1279px) {
  /* En el ☰, los desplegables alineados a la izquierda como el resto; la flecha, al extremo. */
  .cabecera .nav-desp > summary { justify-content: flex-start; }
  .cabecera .nav-desp > summary .chip-flecha { margin-left: auto; }
}

/* Showroom 5.1: el avatar único en tablas y listas (admin, Visitas, Conversaciones) y en el chip de la
   cabecera, que ya no dibuja su foto ni su inicial por su cuenta. */
.avatar.av-xs { width: 24px; height: 24px; font-size: 10px; box-shadow: none; }
.ui-agente-av { display: inline-flex; align-items: center; gap: 8px; min-width: 0; vertical-align: middle; }
.ui-agente-av-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-persona > .avatar { margin-top: -3px; }
.ui-atencion-manual > .avatar { margin-right: 6px; vertical-align: middle; }
.avatar.chip-foto { box-shadow: none; background: none; }
.chip-sin-nivel .avatar.chip-foto { width: 34px; height: 34px; }
.avatar.chip-iniciales { display: none; }
@media (max-width: 767px) {
  .chip-sin-nivel .avatar.chip-iniciales { display: inline-grid; width: 34px; height: 34px; font-size: 13px; box-shadow: none; }
}