/* La grafica del panel nuevo (.NET 10), sobre Bootswatch Cerulean 5.
 *
 * No carga las hojas de la app vieja: los bloques que hacen a la paridad visual estan COPIADOS de
 * alla (adm.css y panel.css, al 26/08/2026) y adaptados al markup nuevo. Si un pixel difiere, la
 * fuente de verdad es la pantalla vieja al lado de la nueva. Cuando la migracion termine, esta
 * hoja ES la hoja del panel: lo que hoy es "copiado de" pasa a ser el original. */

/* ==================================================================== los colores, de adm.css */
:root {
    /* La marca. El rojo es de Inmobiliatica y no se toca: no sale del tema. */
    --marca: #ed1b24;
    --marca-clara: #f4373f;
    --marca-oscura: #d4161e;
    --marca-hover: #a9030a;

    /* Los grises. */
    --texto: #1e2f44;
    --texto-suave: #4a5560;
    --texto-apagado: #6b7c93;
    --texto-tenue: #9aa8ba;
    --borde: #e6e6e6;
    --borde-suave: #e3eaf2;
    --borde-tenue: #edf1f5;
    --fondo-claro: #f7f9fc;
    --fondo-gris: #f1f3f6;

    /* El gris de las dos franjas que quedan a los costados de la columna del panel. Es el que
       tenia antes de la migracion: sale de sb-admin-2.css de la app vieja, donde estaba como
       "background-color: #f2f2f2 !important". La columna en si va blanca (ver .contenedorPanel). */
    --fondo-app: #f2f2f2;

    /* El rojo y el verde de las acciones. Nacieron en inmuebles.css, para el listado, y suben al
       tema ahora que los usa tambien el mapa de Red: son los mismos botones diciendo lo mismo en
       dos pantallas, y separados se iban a desincronizar al primer retoque. El verde es el de
       Bootstrap 3, no el del tema (#73a839), que es oliva y se apaga al lado del rojo. */
    --inm-rojo: #d9534f;
    --inm-rojo-hover: #c9433f;
    --inm-verde: #5cb85c;
    --inm-verde-hover: #4cae4c;

    /* El gris del isotipo de Inmobiliatica -el cuadrado con la casita del pie-. Sale de muestrear
       LogoAdmPie.png, no de estimarlo a ojo, para que el boton y el logo sean el mismo gris. */
    --inm-gris: #6d6d6d;
    --inm-gris-hover: #5b5b5b;

    /* Los titulos. El tema Bootswatch Cerulean los pinta de celeste (#2fa4e7) con esta variable,
       y sobre blanco se leen flojos. Se sobreescribe ACA y no en el archivo del tema, que es un
       build minificado de terceros: tocarlo se pierde en cuanto se actualice el tema, y ademas no
       se puede leer para revisarlo. Aca queda a la vista y con su motivo. */
    --bs-heading-color: var(--texto);

    /* Las sombras. */
    --sombra-tarjeta: 0 8px 20px rgba(0, 46, 82, 0.2);
    --sombra-fila: 0 1px 2px rgba(0, 0, 0, 0.04);
    --sombra-hover: 0 3px 8px rgba(0, 46, 82, 0.1);

    /* Del tema (Bootswatch Cerulean). */
    --tema-primario: #2fa4e7;
    --tema-primario-hover: #178acc;
    --tema-exito: #73a839;
    --tema-exito-hover: #59822c;
    --tema-info: #033c73;
    --tema-aviso: #dd5600;
    --tema-peligro: #c71c22;
    --tema-titulo: #317eac;
}

/* Como el .hidden de Bootstrap 3, que el 5 ya no trae: lo usa el menu para los modulos sin permiso. */
.hidden { display: none !important; }

/* ==================================================================== la caja del panel
 * La app vieja es un .container de Bootstrap 3: 1170px centrados sobre blanco. */
body { background: var(--fondo-app); margin: 0; }

.contenedorPanel {
    width: 1170px;
    max-width: 100%;
    margin: 0 auto;
    /* La columna del panel se queda BLANCA: el gris de --fondo-app es solo para las dos franjas
       que quedan a los costados en pantallas anchas. Es a proposito y no un descuido: pintarla de
       gris tambien se probo y no es lo que se quiere. */
    background: #fff;

    /* Columna flexible de al menos una pantalla de alto, para que el pie quede SIEMPRE abajo. En
       las secciones con pocos registros -Tickets vacio, Consultas con una sola- el pie subia hasta
       la mitad y debajo quedaba un blanco enorme. Con esto el cuerpo se estira y el pie se apoya
       en el borde inferior. Las barras de arriba son position:fixed, asi que no entran en el flex
       y no hay que compensarlas. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Red de seguridad: si algun contenido llegara a desbordar a lo ancho, se recorta en vez de
       ensanchar el viewport y descolocar la barra fija de arriba (que es position:fixed y se
       ancla al ancho del viewport). */
    overflow-x: clip;
}

/* ==================================================================== la cabecera blanca */
.BarraAdmTop {
    position: fixed;
    z-index: 100;
    width: 1170px;
    max-width: 100%;
    margin: 0;
    padding: 15px 0;
    background: #fff;
}

.AdmLogo { display: inline-block; float: left; margin: 0 0 0 30px; padding: 0; }

/* Sin padding-top en escritorio: con el buscador al lado, esos 8 pixeles lo empujaban de mas. En
   angosto el buscador se oculta y el icono queda solo en la barra, y ahi si los necesita para no
   pegarse al borde de arriba (ver el media query). */
.botonLogOut {
    display: inline-block;
    float: right;
    color: #000;
    font-size: 25px;
    padding-right: 12px;
    position: relative;
    cursor: pointer;
}

/* El acceso al Panel del Sistema, en la barra blanca y solo para el equipo. En el rojo de la
   marca para que se lea como "algo nuestro", a la izquierda del boton de cerrar sesion. */
.botonSistema {
    display: inline-block;
    float: left;
    color: var(--marca);
    font-size: 22px;
    /* Al lado del logo: el logo empieza en top 15px (padding de la barra); este padding-top lo
       centra a su altura. */
    padding-top: 13px;
    margin-left: 6px;
}

    .botonSistema:hover { color: var(--marca-hover); }

.search-box {
    position: absolute;
    width: 620px;
    bottom: 1.5em;
    right: 0;
    padding-right: 50px;
}

    /* La lupa va a la izquierda, adentro del campo, y el texto arranca después de ella: igual que
       el buscador viejo. */
    .search-box > .fa-search {
        position: absolute;
        left: 22px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #000;
        font-size: 15px;
        transition: color 0.2s linear;
    }

    /* padding-right reserva el espacio de los 4 íconos de filtro (que se apoyan sobre la derecha del
       campo), para que el texto no corra por debajo de ellos. */
    .search-box input {
        color: #000;
        height: 40px;
        padding-left: 60px;
        padding-right: 130px;
        background-color: #f9f9f9;
        border: 2px solid gainsboro;
        border-radius: 10px;
        outline: none !important;
        transition: all 0.2s linear;
    }

    .search-box input:focus {
        background: #fff !important;
        outline: 0;
        color: #333;
    }

    .search-box input:focus + .fa-search { color: #333; }
    .search-box input:hover { background: #f3f6f8; }

/* Los íconos de filtro se apoyan sobre la derecha del buscador, centrados verticalmente sobre el
   input (mismo anclaje y alto que él), no clavados abajo. */
.searchconfig-box {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 40px;
    padding-right: 20px;
    position: absolute;
    right: 0;
    bottom: 1.5em;
    height: 40px;
}

.searchconfig-btn { display: flex; align-items: center; padding: 5px 7px; border-radius: 6px; cursor: pointer; }
.searchconfig-btn i { font-size: 18px; line-height: 1; }
.searchconfig-btn:hover { background-color: #b7b7b7; }
.searchconfig-btn.searchconfig-active { background-color: #474747; }
.searchconfig-btn.searchconfig-active i { color: #fff; }

.cont-serchbox-results {
    position: absolute;
    top: 38px;
    width: 460px;
    margin: 0 10px;
    background-color: #fbfbfb;
    display: none;
}

.divAutoCompleteResults {
    max-height: 460px;
    overflow-y: auto;
    display: block;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
    box-shadow: 8px 8px 16px rgba(77, 91, 100, 0.15);
    font-size: 10px;
    padding: 0;
    border: 2px solid gainsboro;
    background: #fff;
}

.searchcontact,
.searchcontact2 {
    border-top: 2px solid gainsboro;
    box-sizing: border-box;
    padding: 8px 12px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    font-size: 13px;
    align-items: center;
}

.searchprofilepic { height: 48px; }
.searchprofilepic img { height: 100%; }
.searchprofilepic-prop { width: 50px; }
.searchprofilepic-prop img { width: 100%; border-radius: 12px; }

/* ==================================================================== el menu rojo */
.MenuAdm {
    position: fixed;
    width: 1170px;
    max-width: 100%;
    top: 78px;
    z-index: 99;
    font-family: "Open Sans", sans-serif;
    background-color: var(--marca);
}

    /* La hamburguesa solo aparece en pantallas angostas (ver el media query de abajo). */
    .menuHamburguesa { display: none; }

    .MenuAdm .menuLista {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .MenuAdm .navItems {
        display: inline-block;
        position: relative;
    }

        .MenuAdm .navItems > a {
            display: block;
            color: #fff;
            padding: 15px 8px;
            text-decoration: none;
            white-space: nowrap;
            font-size: 14px;
        }

            .MenuAdm .navItems > a > .fa {
                font-size: 21px;
                width: 23px;
                margin-right: 4px;
                text-align: center;
            }

        .navItems:hover { background: var(--marca-hover); }

    /* Los desplegables abren al pasar por encima, como en la vieja. */
    .MenuAdm .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: all .2s ease-in;
        position: absolute;
        left: 0;
        top: 100%;
        margin: 0;
        padding: 10px 5px;
        min-width: 240px;
        list-style: none;
        background: #fff;
        border: 1px solid var(--borde-tenue);
        border-radius: 10px;
        box-shadow: var(--sombra-hover);
        text-align: left;
        z-index: 105;
    }

    .MenuAdm .navItems:hover > .dropdown-menu {
        visibility: visible;
        opacity: 1;
    }

    .MenuAdm .dropdown-menu a {
        display: block;
        padding: 7px 12px;
        color: var(--texto);
        text-decoration: none;
        border-radius: 10px;
        font-size: 14px;
    }

        .MenuAdm .dropdown-menu a:hover {
            background-color: var(--marca);
            color: #fff;
        }

    .panelConsolaItemTextoIcono {
        width: 20px;
        margin-right: 8px;
        vertical-align: middle;
    }

    /* El de WhatsApp no es una imagen sino un icono de fuente: se lo lleva al tamano de los demas. */
    i.panelConsolaItemTextoIcono {
        display: inline-block;
        font-size: 20px;
        line-height: 1;
        text-align: center;
    }

/* El globito con el numero al lado de un item del menu: solicitudes de amistad, redes privadas,
   consultas del dia e interesados con propiedades nuevas. Arranca escondido y lo prende el
   javascript del layout cuando el numero es mayor que cero; si es cero no se dibuja, para que el
   menu no se llene de globos en blanco. */
.pnlContador {
    display: inline-block;
    min-width: 18px;
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 100px;
    background: var(--marca);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

    /* Los iconos del menu son PNG, y a una imagen el color del texto no la alcanza: al pasar por
       encima el renglon se pinta de rojo y el texto pasa a blanco, pero el icono se quedaba gris
       oscuro, casi invisible sobre el rojo. brightness(0) lo lleva a negro pleno respetando la
       transparencia, e invert(1) lo pasa a blanco: queda del mismo color que el texto. Los items
       que usan un glifo de Font Awesome no necesitan nada, porque heredan el color. */
    .MenuAdm .dropdown-menu a:hover .panelConsolaItemTextoIcono {
        filter: brightness(0) invert(1);
    }

/* ==================================================================== la barra de bienvenida
 * La trae cada pantalla, no el layout: mismo reparto que en la vieja. */
/* ------------------------- El encabezado compacto al bajar -------------------------
   Las tres barras de arriba son fijas y van encadenadas: la blanca del logo y el buscador arranca
   en 0 y mide 78, el menu rojo va en 78 y la de bienvenida en 125.

   Al scrollear hacia abajo, la franja blanca se retira y el menu rojo pasa a ser el techo: es
   mucho espacio para el logo y un buscador cuando lo que se esta mirando es el contenido. Las
   otras dos suben los mismos 78 pixeles, para que no quede un hueco entre ellas.

   Al volver al tope, la blanca reaparece. El relleno de .cuerpoAdm no se toca: son 193 pixeles que
   solo importan con la pagina arriba de todo, que es justo cuando estan las tres barras. */
body.encabezadoCompacto .BarraAdmTop { display: none; }
body.encabezadoCompacto .MenuAdm { top: 0; }
body.encabezadoCompacto .BarraAdmTopFlotante { top: 47px; }

.BarraAdmTopFlotante {
    position: fixed;
    background-color: #e7e5e6;
    width: 1170px;
    max-width: 100%;
    height: 60px;
    top: 125px;
    z-index: 21;
    padding: 0 15px;
    border: 0 solid #e7e5e6;
    border-bottom-width: 1px;
    text-align: center;
}

.NombreInmoTop {
    display: inline-block;
    float: left;
    margin-top: 22px;
    padding-left: 15px;
}

/* El aviso se desvanece antes de irse; quien lo apaga es el script del layout. El cursor de mano
   avisa que tocandolo se cierra sin esperar. */
.MensajeOk,
.MensajeError {
    transition: opacity 0.4s ease;
    cursor: pointer;
    width: 100%;
    line-height: 62px;
    font-size: 18px;
    color: #5AAA28;
    background-color: #fff;
    padding: 5px 15px !important;
    border-radius: 5px !important;
}

.MensajeError { color: #DE5347; }

.MensajeOk.avisoSeVa,
.MensajeError.avisoSeVa { opacity: 0; }

/* El contenido arranca debajo de la barra de bienvenida: 125 de cabecera + 60 de barra + 8 de aire. */
.cuerpoAdm {
    padding-top: 193px;
    padding-left: 15px;
    padding-right: 15px;
    /* El aire con el pie. Va aca y no como margen del pie, que usa margin-top: auto para
       empujarse hasta abajo y en las paginas largas no separaria nada. */
    padding-bottom: 28px;
}

/* ==================================================================== la capsula de una ficha
 * El bloque blanco con borde, esquinas redondeadas y sombra con el que se arman las fichas: primero
 * la del inmueble y ahora la del emprendimiento. Vive aca, y no en la hoja de una seccion, porque
 * la comparten dos pantallas y una copia por hoja se termina separando de la otra.
 *
 * La sombra sale del token de la casa, --sombra-tarjeta, la misma de la portada, Clientes e
 * Integraciones. La separacion entre tarjetas va junto con ella: pegadas, la sombra de una cae
 * sobre la de abajo y se lee como una mancha en vez de como dos bloques. */
.tarjetaDeFicha {
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 24px;
    box-shadow: var(--sombra-tarjeta);
}

.tituloDeTarjeta {
    font-size: 20px;
    font-weight: 700;
    border-bottom: 2px solid #e5e9ee;
    padding-bottom: 6px;
    margin-bottom: 12px;
}

/* Cuando el titulo es el rotulo de un campo -la Descripcion del emprendimiento- sigue siendo un
   <label>, que es inline y no llegaria a los bordes con su linea. */
label.tituloDeTarjeta { display: block; }

.tituloDeTarjeta.conAcciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.accionesDeTarjeta { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.tituloDeTarjeta small { font-weight: 400; color: var(--texto-apagado); font-size: 12.5px; }
.tituloDeTarjeta .fa-lock { color: var(--texto-apagado); margin-right: 4px; }

/* ==================================================================== titulos, de panel.css */
.tituloSeccion {
    display: flex;
    align-items: center;
    gap: 12px;
    /* El aire de la vieja: el titulo de la pantalla respira arriba y abajo. */
    margin: 10px 0 14px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--texto);
    line-height: 1.2;
}

/* Los titulos de BLOQUE dentro de una pantalla (Buscador, Mis propiedades...): un escalon mas
   chicos que el titulo de la seccion y sin sus margenes, que los pone la barra que los contiene. */
.tituloSeccion.tituloBloque { font-size: 18px; gap: 10px; margin: 0; }
    .tituloSeccion.tituloBloque > i { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; font-size: 14px; }

    /* La pastilla del icono. Adentro puede ir un glifo de Font Awesome o, cuando la seccion
       tiene imagen propia en el menu, esa misma imagen: las tres de Compartir repetian todas el
       mismo glifo de personas aunque en el menu cada una lleva la suya. */
    .tituloSeccion > i,
    .tituloSeccion > .iconoDeSeccion {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
        background: var(--fondo-gris);
        color: var(--texto);
        font-size: 19px;
    }

    /* Los PNG del menu miden 24 px: se muestran a su tamaño, sin agrandar, para que no se vean
       borrosos. */
    .tituloSeccion > .iconoDeSeccion > img {
        width: 22px;
        height: auto;
    }

/* La explicacion que va debajo del titulo de cada pantalla.

   VA EN NEGRO Y NO EN EL GRIS DEL TEMA, y es un cambio GLOBAL: lo usan 25 pantallas. Se hace aca y
   no en la hoja de cada seccion porque ya se pidio lo mismo cuatro veces seguidas -portada,
   Clientes, listado de inmuebles y Tasaciones- y siempre por el mismo motivo: --texto-apagado es
   azulado y a mucha gente no le entra.

   Repetir la regla en cada hoja es justo lo que se acaba de limpiar con el verde de los botones,
   que estaba copiado en cinco. Si en alguna pantalla tiene que volver al gris, se acota ahi y no se
   toca esta. */
.subtituloSeccion {
    margin: 0;
    padding-left: 52px;
    font-size: 15px;
    color: #000;
}

/* ==================================================================== las actualizaciones
 * La tarjeta de lista del panel (fondo blanco, borde, sombra de fila) + la anatomia de la
 * actualizacion, ambas copiadas de panel.css. */
.actualizaciones { margin-top: 18px; }

.actualizacion {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    margin-bottom: 16px;
    padding: 22px 26px;
}

    .actualizacionCabecera {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
    }

        .actualizacionCabecera > i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            flex: 0 0 36px;
            border-radius: 10px;
            background: var(--fondo-gris);
            color: var(--texto);
            font-size: 16px;
        }

    .actualizacionTitulo {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.25;
        color: var(--texto);
    }

    .actualizacion .actualizacionEtiqueta {
        margin-left: auto;
        padding: 4px 12px;
        background: var(--marca);
        border-radius: 20px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: #fff;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .actualizacionNueva > .actualizacionCabecera > i {
        background: var(--marca);
        color: #fff;
    }

    .actualizacionCuerpo {
        font-size: 15px;
        line-height: 1.65;
        color: var(--texto-suave);
    }

        .actualizacionCuerpo p { margin: 0 0 12px 0; }
        .actualizacionCuerpo p:last-child { margin-bottom: 0; }
        .actualizacionCuerpo b { color: var(--texto); }

        .actualizacionLista { margin: 0 0 12px 0; padding-left: 20px; }
        .actualizacionLista li { margin-bottom: 4px; }

.actualizacionTop {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: podio;
}

    .actualizacionTop > li {
        position: relative;
        counter-increment: podio;
        margin-bottom: 14px;
        padding-left: 42px;
    }

        .actualizacionTop > li:last-child { margin-bottom: 0; }

        .actualizacionTop > li::before {
            content: counter(podio);
            position: absolute;
            top: 1px;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            background: var(--marca);
            border-radius: 50%;
            font-size: 14px;
            font-weight: 700;
            color: #fff;
        }

        .actualizacionTop > li b {
            display: block;
            color: var(--texto);
        }

/* ==================================================================== la botonera de la barra
 * De barra-superior.css: los botones de accion que viven en la barra de bienvenida. */
.BarraAdmTopFlotante .botoneraBarraSuperior {
    float: right;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    padding: 0;
}

    .BarraAdmTopFlotante .botoneraBarraSuperior .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 7px 14px;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.42857143;
        border-radius: 8px;
        white-space: nowrap;
    }

        .BarraAdmTopFlotante .botoneraBarraSuperior .btn i { font-size: 15px; }

.MensajeProcesando {
    color: #007ACC;
    visibility: hidden;
    line-height: 62px;
    font-size: 18px;
}

/* ==================================================================== las tablas del panel
 * De panel.css de la vieja: la cabecera y las piezas que comparten los listados. */
.table { width: 100%; border-collapse: collapse; }

.table tr.tablaCabecera > td,
.table tr.tablaCabecera > th {
    background: var(--fondo-claro);
    color: var(--texto);
    font-weight: 700;
    vertical-align: middle;
    border-top: none;
    border-bottom: 2px solid var(--borde-suave);
    padding: 8px;
    text-align: left;
}

.table tbody td { padding: 8px; vertical-align: middle; }

.MartilleroInmuebleIndexImagen {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.datoLista { font-size: 16px; }
.separadorTenue { border: 0.3px solid var(--texto-suave); opacity: 0.1; }
.bloqueSeparado { padding-top: 20px; }
.enlaceSeparado { padding-right: 20px; color: var(--texto); }
.enlaceSeparado:hover { color: var(--marca); }
.anchoTablaSucursales { padding-top: 20px; overflow-x: auto; }

/* ==================================================================== piezas sueltas compartidas */
.lineaFull {
    display: inline-block;
    width: 100%;
    height: 0;
    margin: 20px 0;
    border: 1px solid #eee;
}

.monedaInmuConsola {
    font-size: 18px;
    font-weight: 500;
    color: #940000;
}

.miniaturaListado img { max-width: 100%; border-radius: 12px; }

.campoConOjo { width: 90%; float: left; }
.zonaOjo { width: 10%; float: right; }
.fa.iconoAyuda { font-size: 20px; cursor: pointer; }

/* ==================================================================== los modales de publicacion
 * Los carteles de ZP y ML se comparten entre la ficha y el listado, asi que
 * sus estilos viven aca y no en edicion-inmueble.css. */
.avisoDeFicha {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #eaf6fd;
    border: 1px solid #bfe3f7;
    border-radius: 8px;
    padding: 8px 14px;
    margin-top: 12px;
    font-size: 13.5px;
}

.avisoDeFicha .fa { margin-top: 2px; color: var(--tema-info); }
.avisoDeFicha.avisoRojo { background: #fdecea; border-color: #f5c6c3; }
.avisoDeFicha.avisoRojo .fa { color: var(--tema-peligro); }
.avisoDeFicha[hidden] { display: none; }

/* El texto del cartel de portales viene con saltos de linea armados a mano. */
.textoDeAvisoDePortales { white-space: pre-line; }

.avisoPortal {
    background: #f5f5f5;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    white-space: pre-line;
}

.avisoPortal.avisoAlarmante { background: #fdf8ef; }
.avisoPortalChico { color: var(--texto-tenue); font-size: 13px; margin-bottom: 10px; }
.cupoHay { color: var(--tema-exito); }
.cupoAgotado { color: var(--tema-peligro); }
.avisoZPCaja { margin-top: 8px; }
.avisoZPDetalle { display: block; color: var(--texto-tenue); font-size: 12.5px; }

.botonesDeAvisoPortal { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 6px 0; }

.botonDeTipo { display: flex; flex-direction: column; align-items: center; min-width: 150px; }
.botonDeTipo span { font-size: 12px; font-weight: 400; }
.notaDelTipoActual { font-style: italic; }

/* ==================================================================== el pie */
.PieAdmNuevo {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    position: relative;
    display: flow-root;
}

.barraSeparadoraPie {
    height: 5px;
    background-color: var(--texto-apagado);
}

/* El logo del pie viene sin medida del archivo viejo: acotado siempre, que no domine el pie. */
#LogoPie { max-width: 170px; height: auto; }

/* El "auto" es lo que empuja el pie contra el borde de abajo cuando la pagina tiene poco
   contenido. OJO: cuando la pagina es larga, auto vale 0 y no separa nada, asi que el aire con
   el contenido NO puede salir de aca; lo pone el padding-bottom de .cuerpoAdm. */
.PieAdmNuevo { margin-top: auto; }

/* ------------------------- El verde de todo el panel -------------------------
   Los .btn-success del panel -124 en las vistas- usan el verde de la casa. El del tema Bootswatch
   Cerulean (#73a839) es un oliva con degrade que se lee apagado al lado del rojo y del gris.

   ESTO ESTABA REPETIDO EN CINCO HOJAS -inmuebles, clientes, consola, buscar-inmobiliarias y el
   Buscar de Red-, cada una pisando lo mismo para su pantalla. Cada seccion nueva volvia a pagarlo
   y podia olvidarse un boton. Se define una sola vez aca y las cinco copias se borraron.

   El "background" en shorthand y no "background-color" es a proposito: asi limpia tambien el
   degrade que Cerulean le pone al boton, que si no queda por encima del color plano. */
.btn-success {
    background: var(--inm-verde);
    border-color: var(--inm-verde);
    color: #fff;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--inm-verde-hover);
    border-color: var(--inm-verde-hover);
    color: #fff;
}

/* Consultar toma el gris del isotipo, como los encabezados de Buscar Inmobiliarias. Por variables
   de Bootstrap: .btn:hover pisa el fondo con var(--bs-btn-hover-bg) y sin definirla el boton se
   vuelve transparente al pasarle el mouse. */
#consultarPieAdmin {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--inm-gris);
    --bs-btn-border-color: var(--inm-gris);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--inm-gris-hover);
    --bs-btn-hover-border-color: var(--inm-gris-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--inm-gris-hover);
    --bs-btn-active-border-color: var(--inm-gris-hover);
    background-image: none;
}

/* ==================================================================== pantallas angostas
 * El modo compacto no es solo para celulares: el menu de escritorio mide ~1150px, asi que por
 * debajo de 1200 de viewport se partia en dos renglones y, al ser fijo y con mas z-index, TAPABA
 * la barra de bienvenida con el boton de Guardar. Las netbooks con la escala de Windows subida
 * (1366 al 125% quedan en ~1093px) caian justo ahi. De 1199 para abajo el panel se comporta como
 * en celular (hamburguesa incluida); de 1200 para arriba no cambia nada. */
@media (max-width: 1199px) {
    /* El pie apilado: logo, texto y el boton a lo ancho, en vez de la fila apretada. */
    .PieAdmNuevo .d-flex { flex-direction: column; align-items: flex-start; }
    .PieAdmNuevo #consultarPieAdmin { margin-left: 0 !important; width: 100%; }
}

@media (max-width: 1199px) {
    .tituloSeccion { font-size: 20px; gap: 9px; }
    .tituloSeccion > i { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 16px; }
    .subtituloSeccion { padding-left: 43px; }
    .actualizacion { padding: 18px; }
    .actualizacionCabecera { flex-wrap: wrap; }
    .actualizacionEtiqueta { margin-left: 0; }
    .search-box, .searchconfig-box { display: none; }

    /* Sin el buscador al lado, el logout queda solo contra el borde de arriba: recupera los 8
       pixeles que en escritorio lo desalineaban. */
    .botonLogOut { padding-top: 8px; }

    /* El "Bienvenido, nombre" se oculta en celular: la barra de bienvenida es de alto fijo y no le
       entra junto al botón de guardar, así que el nombre se desbordaba sobre el contenido. El nombre
       ya se ve arriba, en el menú. */
    .NombreInmoTop { display: none; }

    /* El menú se colapsa detrás de una hamburguesa que ocupa una sola fila (para no romper el
       apilado de barras fijas), y se despliega como un panel por encima del contenido. */
    .MenuAdm { text-align: left; }
    .menuHamburguesa {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 13px 18px;
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .menuHamburguesa .fa { font-size: 20px; }

    .MenuAdm .menuLista {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: left;
        background: var(--marca);
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        box-shadow: var(--sombra-hover);
        border-top: 1px solid rgba(255, 255, 255, .15);
    }
    .MenuAdm.abierto .menuLista { display: block; }

    .MenuAdm .navItems { display: block; }
    .MenuAdm .navItems > a {
        padding: 13px 18px;
        font-size: 14px;
        border-top: 1px solid rgba(255, 255, 255, .10);
    }
    .MenuAdm .navItems > a > .fa { font-size: 18px; }

    /* Los desplegables pasan a acordeón: estáticos, ocultos hasta tocar el rubro. */
    .MenuAdm .dropdown-menu {
        position: static;
        display: none;
        visibility: visible;
        opacity: 1;
        background: var(--marca-hover);
        box-shadow: none;
        border: 0;
        border-radius: 0;
        margin: 0;
        padding: 0;
        min-width: 0;
    }
    .MenuAdm .navItems.expandido > .dropdown-menu { display: block; }
    .MenuAdm .dropdown-menu a {
        color: #fff;
        padding: 11px 18px 11px 44px;
        border-radius: 0;
        font-size: 13.5px;
    }
    .MenuAdm .dropdown-menu a:hover { background: rgba(0, 0, 0, .18); color: #fff; }

    /* En celular el desplegable no es una tarjeta blanca: cuelga del propio menu, sobre el rojo,
       y el texto ya va en blanco SIEMPRE. El icono tiene que acompañarlo siempre tambien, no
       solo al pasar por encima como en escritorio, o queda gris oscuro sobre rojo. */
    .MenuAdm .dropdown-menu .panelConsolaItemTextoIcono {
        filter: brightness(0) invert(1);
    }

    /* La flechita del acordeón en los rubros con submenú. */
    .MenuAdm .navItems.tieneSub > a::after {
        content: "\f078";
        font-family: FontAwesome;
        font-size: 12px;
        float: right;
        opacity: .8;
        transition: transform .2s;
    }
    .MenuAdm .navItems.tieneSub.expandido > a::after { transform: rotate(180deg); }
}

/* ==================================================================== telefonos angostos
 * Los botones de la barra de bienvenida se escriben para escritorio -14px con 14 de relleno a los
 * costados- y en un telefono de 360 o 390 puntos se comen el margen: quedan pegados al borde y,
 * cuando la pantalla trae tres o cuatro (Volver, Publicar, Ver en Web y Guardar en la ficha del
 * inmueble), el ultimo se sale de la barra.
 *
 * El "float: right" sin tope es parte del problema: un flotante mas ancho que su contenedor no se
 * acomoda, se desborda. Se le pone el tope del ancho disponible y los botones bajan de tamaño en
 * dos escalones. El flotante se conserva: el aviso de "guardado" que va detras es un <span> y sin
 * el se iria a un renglon propio, fuera de la barra, que mide 60 pixeles fijos. */
@media (max-width: 575.98px) {
    .BarraAdmTopFlotante { padding: 0 10px; }

    .BarraAdmTopFlotante .botoneraBarraSuperior {
        max-width: 100%;
        gap: 6px;
    }

    .BarraAdmTopFlotante .botoneraBarraSuperior .btn {
        padding: 6px 10px;
        font-size: 13px;
        gap: 5px;
    }

    .BarraAdmTopFlotante .botoneraBarraSuperior .btn i { font-size: 14px; }
}

/* El escalon de los telefonos mas chicos: un iPhone SE mide 375 puntos y un Galaxy A 360. */
@media (max-width: 400px) {
    .BarraAdmTopFlotante { padding: 0 8px; }

    .BarraAdmTopFlotante .botoneraBarraSuperior { gap: 5px; }

    .BarraAdmTopFlotante .botoneraBarraSuperior .btn {
        padding: 6px 8px;
        font-size: 12px;
        gap: 4px;
    }

    .BarraAdmTopFlotante .botoneraBarraSuperior .btn i { font-size: 13px; }
}

/* Cuando la barra lleva cuatro acciones o mas -la ficha del inmueble tiene Volver al listado,
   Publicar, Ver en Web y Guardar- ni achicandolas entran en un telefono de 360 o 390 puntos: los
   textos solos ya suman mas que la pantalla. En esas barras, y solo en esas, quedan los iconos; el
   nombre de cada boton sigue en su "title". Las barras de dos o tres acciones no cambian. */
@media (max-width: 480px) {
    .BarraAdmTopFlotante .botoneraBarraSuperior:has(> :nth-child(4)) .textoDelBoton {
        display: none;
    }

    /* Sin los textos sobra lugar de sobra en la barra, asi que los iconos van grandes: el boton se
       toca con el dedo sin apuntar. */
    .BarraAdmTopFlotante .botoneraBarraSuperior:has(> :nth-child(4)) .btn {
        padding: 10px 18px;
        gap: 0;
    }

    .BarraAdmTopFlotante .botoneraBarraSuperior:has(> :nth-child(4)) .btn i {
        font-size: 19px;
    }
}