/*
 * Sitio Inmuebles — ajustes de marca
 * ---------------------------------------------------------------------------
 * Esta hoja se carga DESPUÉS de las demás y corrige lo que el cambio de color
 * dejó ilegible.
 *
 * El problema: el naranja anterior (#F58634) era un color CLARO, así que los
 * textos oscuros encima se leían bien. El azul nuevo (#2f2b60) es OSCURO: esos
 * mismos textos quedaron negro sobre azul oscuro, ilegibles.
 *
 * Acá se fuerza texto blanco sobre los fondos de marca, y se ajustan los casos
 * donde el azul se usaba como color de texto sobre fondo blanco.
 */

:root {
    --sitioinmuebles-azul: #2f2b60;
    --sitioinmuebles-azul-oscuro: #211e45;
    --sitioinmuebles-azul-claro: #4a4590;
}

/* ---------------------------------------------------------------------------
   Texto sobre fondos de marca: siempre blanco
   --------------------------------------------------------------------------- */

.bg-primary,
.btn-primary,
.badge-primary,
.label-primary,
.bg-gradient-primary,
.navbar-primary,
.page-item.active .page-link,
.nav-pills .nav-link.active,
.custom-control-input:checked ~ .custom-control-label::before,
.dropdown-item.active,
.list-group-item.active {
    color: #fff !important;
    border-color: var(--sitioinmuebles-azul);
}

/* Consultas (/mensajes): el ítem activo del menú lateral (Pendientes) tiene
   fondo transparente por app-email.css, así que el blanco de arriba lo dejaba
   invisible — se veía la burbuja pero no el ícono ni el texto (16/8/2026). */
.email-application .sidebar .list-group .list-group-item.active,
.email-application .sidebar .list-group .list-group-item.active i {
    color: var(--sitioinmuebles-azul) !important;
    background: transparent;
}

.bg-primary a,
.bg-primary p,
.bg-primary span,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.bg-primary h4, .bg-primary h5, .bg-primary h6,
.btn-primary i,
.navbar .navbar-nav .nav-link,
.header-navbar .navbar-container ul.nav li a {
    color: #fff !important;
}

/* Los iconos y textos secundarios sobre la barra superior necesitan algo de
   transparencia para no competir con el título, pero sin perder legibilidad. */
.header-navbar .navbar-container ul.nav li a.nav-link small,
.header-navbar .navbar-container .user-name + .user-status {
    color: rgba(255, 255, 255, .8) !important;
}

/* EXCEPCIÓN: los menús desplegables abren un panel BLANCO. La regla de arriba
   los alcanzaba (también son "li a" dentro de la barra) y el texto quedaba
   blanco sobre blanco: el menú se veía como un recuadro vacío. Acá se les
   devuelve el gris de texto normal de la plantilla. */
.header-navbar .navbar-container ul.nav li .dropdown-menu a,
.header-navbar .navbar-container ul.nav li .dropdown-menu a span,
.navbar .navbar-nav .dropdown-menu a.nav-link {
    color: #6e6b7b !important;
}

.header-navbar .navbar-container ul.nav li .dropdown-menu a:hover,
.header-navbar .navbar-container ul.nav li .dropdown-menu a:hover span {
    color: var(--sitioinmuebles-azul) !important;
}

/* El elemento activo del desplegable sí lleva fondo de marca: texto blanco. */
.header-navbar .navbar-container ul.nav li .dropdown-menu li.active > a,
.header-navbar .navbar-container ul.nav li .dropdown-menu li.active > a span,
.header-navbar .navbar-container ul.nav li .dropdown-menu a.active,
.header-navbar .navbar-container ul.nav li .dropdown-menu a.active span {
    background-color: var(--sitioinmuebles-azul) !important;
    color: #fff !important;
}

/* EXCEPCIÓN: la franja del menú horizontal (Propiedades, Equipo, Tu sitio)
   NO es azul. El tema pinta de azul los dos header-navbar, pero a esta
   franja (navbar-horizontal.floating-nav) la repinta de BLANCO una regla
   posterior de horizontal-menu.css. La regla general de texto blanco de
   arriba la alcanzaba igual y el menú quedaba invisible hasta pasar el
   mouse. Acá vuelve al gris de texto de la plantilla. */
.horizontal-menu .header-navbar.navbar-horizontal ul.nav li a,
.horizontal-menu .header-navbar.navbar-horizontal ul.nav li a span,
.horizontal-menu .header-navbar.navbar-horizontal ul.nav li a i {
    color: #6e6b7b !important;
}

/* El ítem activo del menú sí lleva la pastilla azul de marca: texto blanco. */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a span,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a i {
    color: #fff !important;
}

/* Los textos del menú horizontal y de sus desplegables van en negrita: la
   plantilla los deja en peso normal y sobre fondo blanco quedaban lavados.
   600 y no 700 porque la tipografía de Vuexy (Montserrat) en 700 ensancha el
   ítem y descoloca el ancho del desplegable. */
.horizontal-menu .header-navbar.navbar-horizontal ul.nav li a,
.horizontal-menu .header-navbar.navbar-horizontal ul.nav li a span,
.header-navbar .navbar-container ul.nav li .dropdown-menu a,
.header-navbar .navbar-container ul.nav li .dropdown-menu a span {
    font-weight: 600 !important;
}

/* ---------------------------------------------------------------------------
   Estados de los botones de marca
   --------------------------------------------------------------------------- */

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--sitioinmuebles-azul-oscuro) !important;
    border-color: var(--sitioinmuebles-azul-oscuro) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--sitioinmuebles-azul) !important;
    border-color: var(--sitioinmuebles-azul) !important;
}

.btn-outline-primary:hover {
    background-color: var(--sitioinmuebles-azul) !important;
    color: #fff !important;
}

/* El boton elegido de un grupo de opciones (btn-group-toggle: tipo de
   publicacion en Instagram, etc.). Sin esto, el color azul forzado de arriba
   pisaba el blanco del estado activo y el texto quedaba invisible sobre el
   fondo azul: "Carrusel" solo se leia al pasar el mouse (3/9/2026). */
.btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--sitioinmuebles-azul) !important;
    border-color: var(--sitioinmuebles-azul) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Enlaces y textos en color de marca sobre fondo claro
   --------------------------------------------------------------------------- */

.text-primary,
a.text-primary,
.card-link {
    color: var(--sitioinmuebles-azul) !important;
}

a.text-primary:hover,
.card-link:hover {
    color: var(--sitioinmuebles-azul-claro) !important;
}

/* ---------------------------------------------------------------------------
   Logotipo
   ---------------------------------------------------------------------------
   El distintivo circular del rebranding a InmoYa (fondo azul de marca, letras
   blancas) gustó como forma, no como marca. Decisión de Ernesto el 12/8/2026:
   se queda el círculo tal cual estaba y adentro dice "Si", en blanco.

   Es la misma estructura que tenía el de "YA": el círculo lo dibuja
   .brand-logo y las letras entran por ::after, porque la plantilla Vuexy pone
   el logo como imagen de fondo de un div vacío y no hay dónde escribir texto.

   Si algún día hay un isologo definitivo en blanco, esto se borra entero y se
   vuelve a la imagen (public/images/logo.png e isologo.png, que son el "Si"
   naranja sobre transparente y se pierden sobre este fondo azul).
   --------------------------------------------------------------------------- */

.brand-logo,
.header-navbar .brand-logo,
.horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-logo,
.main-menu .navbar-header .navbar-brand .brand-logo {
    background-image: none !important;
    background-color: var(--sitioinmuebles-azul) !important;
    border: 2px solid rgba(255, 255, 255, .85) !important;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Las letras. El tamaño acompaña al círculo, que cambia según el diseño.
   Van en mayúsculas: con "Si", la i minúscula no llega a la altura de la S y
   el conjunto se veía más chico que el "YA" anterior, aunque el cuerpo de la
   letra fuera el mismo.

   Arial Black por pedido de Ernesto (12/8/2026). Va con font-weight normal a
   propósito: la familia YA es la variante gruesa, y pedirle además negrita
   hace que el navegador la engorde por su cuenta y la deforme. */
.brand-logo::after {
    content: "SI";
    color: #fff !important;
    font-weight: 400;
    letter-spacing: .5px;
    font-family: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif;
    line-height: 1;
    font-size: 1.75rem;
}

/* En el menú horizontal el distintivo es grande (80px) y sobresale por debajo
   de la barra. Ahí las letras tienen que acompañar el tamaño.

   Los tamaños son mayores que los que tenía "YA" (1.05rem y 1.85rem) a
   propósito: "SI" son dos letras angostas y con aquel cuerpo quedaban chicas
   adentro del círculo, aunque midieran lo mismo. Acá manda cuánto llenan, no
   el número. */
.horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-logo::after {
    font-size: 3.2rem;
}

/* En la barra chica de los demás diseños. */
.header-navbar:not(.navbar-brand-center) .brand-logo,
.main-menu .brand-logo {
    width: 44px;
    height: 44px;
}

/* ---------------------------------------------------------------------------
   Detalles que quedaban con el color anterior
   --------------------------------------------------------------------------- */

.pace .pace-progress {
    background: var(--sitioinmuebles-azul) !important;
}

.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.active > a {
    background: var(--sitioinmuebles-azul) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Planes de la página principal
   ---------------------------------------------------------------------------
   Antes cada plan mostraba un único precio "por día", calculado dividiendo el
   total por la cantidad de días. Ahora se listan los plazos reales: cuántos
   días dura cada uno y cuánto sale en total.
   --------------------------------------------------------------------------- */

.plan-plazo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    border-bottom: 1px solid #eceaf3;
    font-size: 14px;
    text-align: left;
}

.plan-plazo:last-child { border-bottom: 0; }

/* El plazo más corto se resalta: es la puerta de entrada más habitual. */
.plan-plazo-destacado {
    background: #f5f4fa;
}

.plan-plazo-dias {
    color: #555;
    white-space: nowrap;
}

.plan-plazo-dias small {
    color: #999;
    font-size: .85em;
}

.plan-plazo-total {
    font-weight: 700;
    color: var(--sitioinmuebles-azul, #2f2b60);
    white-space: nowrap;
    font-size: 1.08em;
}

/* ---------------------------------------------------------------------------
   Botón flotante de WhatsApp en el CRM
   ---------------------------------------------------------------------------
   Dónde se ubica y por qué:

   - La esquina de abajo a la derecha ya la ocupa el botón de "subir"
     (.scroll-top: bottom 5%, right 30px, 40px de alto). Este se apila justo
     encima y alineado con él, así no se tapan.
   - El z-index es 98: por debajo del fondo oscuro de las ventanas emergentes
     (1040) y de los menús desplegables, para que no quede flotando sobre un
     formulario abierto ni intercepte un clic destinado a otro control.
   - Se oculta mientras hay una ventana emergente abierta: ahí el botón no
     tiene a dónde llevar y solo estorba.
   --------------------------------------------------------------------------- */

.whatsapp-flotante {
    position: fixed;
    bottom: calc(5% + 56px);
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #25d366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    z-index: 98;
    transition: transform .18s ease, box-shadow .18s ease;
}

.whatsapp-flotante:hover,
.whatsapp-flotante:focus {
    background-color: #1da851;
    color: #fff !important;
    transform: scale(1.07);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    text-decoration: none;
}

/* Con una ventana emergente abierta el botón sobra. */
body.modal-open .whatsapp-flotante {
    display: none;
}

/* En pantallas chicas el pie de las pantallas de carga trae los botones de
   guardar. Se corre a la izquierda para dejarlos libres. */
@media (max-width: 767px) {
    .whatsapp-flotante {
        width: 44px;
        height: 44px;
        font-size: 23px;
        bottom: 16px;
        right: auto;
        left: 16px;
    }

    .whatsapp-flotante svg {
        width: 23px;
        height: 23px;
    }
}

/* ---------------------------------------------------------------------------
   Variante para la pantalla de alta (/registro)
   ---------------------------------------------------------------------------
   Ahi no existe el boton de "subir" (.scroll-top), asi que el de WhatsApp baja
   a la esquina y no hace falta dejarle los 56px de lugar arriba. Ademas lleva
   el texto "Necesitas ayuda?" al lado: quien se esta dando de alta todavia no
   conoce el sistema y un circulo verde a secas no le dice nada.
   --------------------------------------------------------------------------- */

.whatsapp-flotante-registro {
    bottom: 24px;
    right: 24px;
    width: auto;
    height: 48px;
    padding: 0 18px 0 14px;
    border-radius: 24px;
    gap: 10px;
}

.whatsapp-flotante-registro .whatsapp-flotante-texto {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* En pantallas chicas queda solo el circulo con el logo: el texto se comeria
   media pantalla y el formulario de alta es largo. */
@media (max-width: 767px) {
    .whatsapp-flotante-registro {
        bottom: 16px;
        right: 16px;
        left: auto;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
        gap: 0;
    }

    .whatsapp-flotante-registro .whatsapp-flotante-texto {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Nombre del ambiente sobre la foto (sitio público)
   ---------------------------------------------------------------------------
   Es el texto que se carga en el CRM en "¿Qué hay en esta foto?". Ayuda a
   ubicarse al recorrer la galería. Va abajo a la izquierda, sobre un fondo
   oscuro semitransparente para que se lea tanto en fotos claras como oscuras.
   --------------------------------------------------------------------------- */

.carousel-item {
    position: relative;
}

.foto-ambiente {
    position: absolute;
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 90px);
    padding: 5px 12px;
    border-radius: 4px;
    background: rgba(20, 18, 40, .72);
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: .01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .foto-ambiente {
        left: 8px;
        bottom: 8px;
        font-size: 12.5px;
        padding: 4px 9px;
    }
}

/* ---------------------------------------------------------------------------
   Precios por operación (sitio público)
   ---------------------------------------------------------------------------
   Una propiedad puede estar en venta, alquiler y temporal a la vez. Cada
   operación se muestra con su nombre adelante, para que no queden dos números
   sueltos sin saber cuál es cuál.
   --------------------------------------------------------------------------- */

.precios-ops {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.precio-op {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.precio-op-nombre {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8b88a6;
    font-weight: 600;
}

.precio-op-monto {
    font-size: 26px;
    font-weight: 700;
    color: var(--sitioinmuebles-azul, #2f2b60);
    white-space: nowrap;
}

.precio-op-monto small {
    font-size: .5em;
    font-weight: 400;
    color: #888;
    text-transform: lowercase;
}

.precio-op-consultar {
    font-size: 20px;
    font-weight: 600;
    color: #777;
}

.precio-op-detalle {
    font-size: 13px;
    color: #777;
}

.precio-op-detalle em {
    font-style: normal;
    color: #4a9c5d;
}

/* En el listado va más chico y en una línea por operación. */
.precios-ops-compacto .precio-op {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
}

.precios-ops-compacto .precio-op-monto {
    font-size: 17px;
}

.precios-ops-compacto .precio-op-nombre {
    font-size: 10.5px;
}

/* ---------------------------------------------------------------------------
   Dirección de la propiedad (paso 1 de sumar)
   ---------------------------------------------------------------------------
   Las columnas de Bootstrap son porcentajes: en un monitor ancho, "Número" y
   "Código Postal" terminaban midiendo 400px para tres dígitos. Las columnas ya
   están repartidas a la medida del dato en la vista; acá le ponemos techo al
   bloque entero para que el formulario no se estire sin fin. */
.campos-direccion {
    max-width: 1000px;
}

/* ---------------------------------------------------------------------------
   Desplegables de ubicación (paso 1 de sumar)
   ---------------------------------------------------------------------------
   La primera opción es la consigna ("Seleccionar provincia *"): mientras no
   haya elección el select se ve gris como un placeholder. La clase la pone y
   la saca pintarConsigna() en wizard-steps.js; las opciones desplegadas
   conservan el color normal para que la lista se lea bien. */
select.sin-eleccion {
    color: #a9a9b3;
}

select.sin-eleccion option {
    color: #2c2c2c;
}

/* ---------------------------------------------------------------------------
   Características: cuadros clickeables en grilla (19/8/2026, pedido de
   Ernesto, referencia visual ZonaProp)
   ---------------------------------------------------------------------------
   Antes eran checkboxes con casillero al lado, en fila. Ahora cada opción es
   un cuadro clickeable (el <input type="checkbox"> real sigue adentro del
   <label>, así que clickear el cuadro entero lo tilda/destilda sin JS); JS
   solo pinta el estado seleccionado y maneja "Ver más" — ver
   caracteristicas-grid.js. Hasta 6 columnas, el resto se acomoda solo. */
.caract-grupo {
    margin-bottom: 1.5rem;
}

.caract-grupo-titulo {
    font-weight: 600;
    color: #5e5873;
}

.caract-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 1200px) {
    .caract-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .caract-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.caract-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 56px;
    padding: 10px 28px 10px 10px;
    border: 1px solid #d8d6de;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
    margin-bottom: 0;
}

.caract-card:hover {
    border-color: #7367f0;
}

.caract-card-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.caract-card-check {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    color: #7367f0;
    font-size: 14px;
    line-height: 1;
}

.caract-card-texto {
    font-size: 13px;
    color: #6e6b7b;
}

/* Estado tildado: lo pone/saca caracteristicas-grid.js al escuchar el
   'change' del checkbox real, así queda sincronizado sin importar cómo se
   haya tildado (click, teclado, o ya venía marcado al cargar la ficha). */
.caract-card-seleccionada {
    border-color: #7367f0;
    background-color: rgba(115, 103, 240, .08);
}

.caract-card-seleccionada .caract-card-check {
    display: inline-block;
}

.caract-card-seleccionada .caract-card-texto {
    color: #7367f0;
    font-weight: 600;
}

.caract-ver-mas {
    margin-top: 8px;
}

/* ------------------------------------------------------------------
   Los campos chicos cortaban el texto por abajo (31/8/2026)
   ------------------------------------------------------------------
   En la agenda —y en toda pantalla que use `form-control-sm`— las letras
   con cola (g, p, q, y, la ñ) aparecian cortadas al ras del borde:
   "Campaña Google Ads" se leia sin la parte de abajo de la p y la g.

   No era de la pantalla: el tema define

       .form-control-sm { height: calc(1em + 1rem + 2px);
                          padding: .5rem 1.5rem; line-height: 1 }

   Con `line-height: 1` la caja de la linea mide exactamente 1em, y en
   Montserrat las colas bajan mas que eso: lo que sobresale queda fuera del
   alto fijo y el navegador lo recorta. Por eso una fecha como "24/08/2026"
   se veia bien (no tiene colas) y un nombre propio no.

   Se le da aire a la linea y se deja que el alto lo calcule el contenido.
   Con `.35rem` de relleno el campo mide 29.2 px, exactamente lo mismo que
   antes: ninguna pantalla se mueve de lugar, lo unico que cambia es que la
   letra entra entera. Medido en Chrome, no estimado. Toca 25 vistas, todas
   las que usan `form-control-sm`; los campos de tamano normal no hacian
   falta (`.form-control` usa line-height 1.25 y ahi la cola entra justa).

   Va aca y no en public/css/bootstrap.css porque ese lo genera Laravel Mix
   desde resources/sass/bootstrap.scss: cualquier arreglo escrito alli se
   pierde en la proxima compilacion. Este archivo se carga ultimo en todos
   los layouts, asi que gana sin necesidad de !important. */
.form-control-sm,
.custom-select-sm {
    height: auto;
    line-height: 1.45;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* Redes sociales del ultimo paso del wizard de carga (sumar.blade.php,
   #redesSocialesGrid).

   Antes cada red era un `col-md-4` con `justify-content-between`: el nombre
   y el "Sin API conectada" eran dos cajas flex sin ancho minimo, asi que en
   cuanto la columna del wizard se angostaba (o el zoom del navegador subia)
   una se montaba sobre la otra, y el boton "Publicar" de Instagram se salia
   de su columna y tapaba el logo de Pinterest.

   Ahora es una grilla de verdad: las columnas se calculan solas segun el
   ancho disponible (`auto-fill` con un minimo de 220 px), nunca queda una
   columna mas angosta que su contenido. Cada red es una caja con borde, el
   nombre se recorta con puntos suspensivos si no entra y la accion (boton o
   leyenda) tiene ancho propio: no hay forma de que se solapen. */
#redesSocialesGrid.redes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .6rem;
}

.redes-grid .redes-fila-red {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-width: 0;
    padding: .45rem .7rem;
    border: 1px solid #ebe9f1;
    border-radius: .357rem;
}

.redes-grid .redes-red-nombre {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.redes-grid .redes-red-icono {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
}

.redes-grid .redes-red-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.redes-grid .redes-red-estado,
.redes-grid .redes-red-accion {
    flex: 0 0 auto;
    white-space: nowrap;
}

.redes-grid .redes-red-estado {
    font-size: .75rem;
}

/* Corregir mail y celular desde "Acerca de" (1/9/2026). El lápiz aparece al
   pasar por encima: si estuviera siempre visible, ensucia un panel que casi
   siempre se mira, no se edita. */
.dato-contacto .dato-editar {
  opacity: 0;
  transition: opacity .15s;
}

.dato-contacto:hover .dato-editar {
  opacity: 1;
}

.dato-contacto .dato-form {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: 1 1 auto;
}

.dato-contacto .dato-campo {
  max-width: 240px;
}

/* El campo que falta, en el asistente de alta/edición de propiedades.
   La pantalla baja sola hasta él (ver irAlCampoQueFalta en
   wizard-steps.js); el borde rojo es para que se distinga entre los
   veinte campos que quedan alrededor una vez que se llegó. */
.campo-que-falta,
.campo-que-falta:focus {
  border-color: #ff4961 !important;
  box-shadow: 0 0 0 .15rem rgba(255, 73, 97, .25) !important;
}

/* ---------------------------------------------------------------------------
   Asistente de propiedades (sumar): botón Siguiente/Guardar mientras se guarda
   (4/9/2026). wizard.css solo le deja el texto blanco al li.disabled, así que
   "Guardando…" no se distinguía de un botón común y se lo apretaba de nuevo.
   --------------------------------------------------------------------------- */
.app-content .wizard > .actions > ul > li.disabled > a {
    opacity: .6;
    cursor: wait;
    pointer-events: none;
}