/*
 * InmoYa — 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 {
    --inmoya-azul: #2f2b60;
    --inmoya-azul-oscuro: #211e45;
    --inmoya-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(--inmoya-azul);
}

.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(--inmoya-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(--inmoya-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;
}

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

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

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

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

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

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

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

/* ---------------------------------------------------------------------------
   Logotipo provisional
   ---------------------------------------------------------------------------
   El logo original es una imagen con las letras "SI". Hasta tener el diseño
   definitivo de InmoYa, se dibuja por CSS un distintivo con las letras "YA",
   con la misma forma circular que tenía el anterior.

   Cuando exista el logo definitivo, reemplazar public/images/logo.png e
   isologo.png y borrar este bloque.
   --------------------------------------------------------------------------- */

.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(--inmoya-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. Van con el mismo tamaño relativo al círculo en cualquier
   variante, por eso el tamaño se expresa en porcentaje de la altura. */
.brand-logo::after {
    content: "YA";
    color: #fff !important;
    font-weight: 800;
    letter-spacing: .5px;
    font-family: inherit;
    line-height: 1;
    font-size: 1.05rem;
}

/* 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. */
.horizontal-menu .header-navbar.navbar-brand-center .navbar-header .navbar-brand .brand-logo::after {
    font-size: 1.85rem;
}

/* 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(--inmoya-azul) !important;
}

.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.active > a {
    background: var(--inmoya-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(--inmoya-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;
    }
}

/* ---------------------------------------------------------------------------
   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(--inmoya-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;
}