/*
Aquí Se centraliza toda la configuración visual de la web. Ha resultado todo
un reto ya que finalmente la cantidad de lineas es bastante grande, pero al menos
he conseguido organizarlas en bloques para facilitar su mantenimiento. 
A pesar de que se ha intentado no duplicar clases es probable que exista algún error
debido a la complejidad del proyecto. COmo nota para próximos proyectos buscaré maneras
de organizar mejor estilos, variables y nombres. Seguramente lo ideal habría sido
separar varias hojas de estilos para tener un mayor control.
*/



/*1. VARIABLES, RESET Y UTILIDADES GLOBALES*/




:root {
    /* PALETA DE COLORES PRINCIPAL */
    --color-principal: #0e7490;
    --color-secundario: #155e75;
    --color-accion: #be185d;
    --color-accion-hover: #9d174d;

    /* Estados del sistema (Semáforo) */
    --color-exito: #10b981;
    --color-exito-hover: #059669;
    --color-error: #ef4444;
    --color-error-hover: #991b1b;
    --color-aviso: #f59e0b;

    /* Neutros y Fondos */
    --color-fondo: #f3f4f6;
    --color-fondo-claro: #e5e7eb;
    --color-fondo-hover: #f0f9ff;
    --color-texto: #1f2937;
    --color-texto-suave: #6b7280;
    --color-borde: #e5e7eb;
    --color-borde-input: #d1d5db;
    --color-borde-dashed: #9ca3af;

    /* Botones Secundarios (Grises) */
    --color-gris-boton: #64748b;
    --color-gris-boton-hover: #21334d;

    /* Feedback (Alertas) */
    --color-fondo-error: #fee2e2;
    --color-borde-error: #fca5a5;
    --color-fondo-exito: #d1fae5;
    --color-borde-exito: #6ee7b7;

    /* Footer */
    --color-footer-bg: #111827;
    --color-footer-texto: rgba(255, 255, 255, 0.7);

    /* Sombras para dar volumen */
    --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --sombra-fuerte: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    --sombra-focus: 0 0 0 3px rgba(14, 116, 144, 0.1);
}

/* Reset básico: Quitamos los márgenes que traen los navegadores por defecto 
   para empezar a maquetar desde cero sin sorpresas.
*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Esto fuerza al footer a quedarse siempre abajo aunque haya poco contenido */
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
    /* Animación suave para todos los enlaces */
}

ul {
    list-style: none;
}

/* El contenedor principal que centra todo el contenido en pantalla y le da aire a los lados */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* UTILIDADES 
   Clases generalistas que sirven para ocultar cosas, dar márgenes rápidos o alinear texto.
*/
.oculto {
    display: none !important;
}

.separacion-derecha {
    margin-right: 10px;
}

.item-destacado {
    font-weight: 700;
    color: var(--color-texto);
}

.text-center {
    text-align: center;
}

/* Márgenes rápidos */
.margin-top-10 {
    margin-top: 10px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.padding-bottom-80 {
    padding-bottom: 100px !important;
}

/* UTILIDADES DE MAQUETACIÓN FLEXBOX
   Clases para organizar cajas y formularios.
*/
.mensaje-grid {
    text-align: center;
    grid-column: 1 / -1;
    width: 100%;
    padding: 40px 0;
    font-size: 1.1em;
    color: var(--color-texto-suave);
}

/* Helpers para poner elementos en fila */
.grupo-flex {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.grupo-flex-2 {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.grupo-flex-2>div {
    flex: 1;
}

.flex-alineado-centro {
    display: flex;
    align-items: center;
    gap: 10px;
}

.flex-auto {
    flex: 1;
}

.flex-medio {
    flex: 0.5;
}

.flex-1-5 {
    flex: 1.5;
}

.flex-doble {
    flex: 2;
}





/*2. CABECERA Y NAVEGACIÓN*/




.cabecera {
    background-color: var(--color-principal);
    box-shadow: var(--sombra-suave);
    padding: 15px 0;
    color: white;
}

.cabecera .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*.logo a {
    font-size: 24px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
}
    lo anulamos ya que creamos logo con el aumento del plazo de entrega
*/

.img-logo-cabecera {
    max-height: 45px; 
    width: auto;      
    display: block;   
}
.menu {
    display: flex;
    gap: 15px;
    align-items: center;
}

.menu a:not([class*="boton"]) {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 15px;
}

.menu a:not([class*="boton"]):hover {
    color: white;
    text-decoration: underline;
}

/* Detalle visual para saber que estás dentro de la zona privada */
.zona-privada-link {
    border-bottom: 2px solid var(--color-accion);
}





/* 3. HERO HEADER */



.hero-header {
    background-color: var(--color-principal);
    width: 100%;
    padding-bottom: 120px;
    color: white;
    margin-bottom: 40px;
    box-shadow: var(--sombra-suave);
    background-image: url('/images/skyline.png');
    background-position: bottom center;
    background-repeat: repeat-x;
    background-size: auto 150px;
}

.cabecera-transparente {
    padding: 20px 0;
}

.cabecera-transparente nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.buscador-principal {
    text-align: center;
    margin-top: 40px;
}

.buscador-principal h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: white;
}

.hero-descripcion {
    margin-bottom: 30px;
    font-size: 1.2rem;
    opacity: 0.9;
}

/* La caja blanca del buscador */
.barra-busqueda {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: var(--sombra-fuerte);
    display: inline-block;
    width: 100%;
    max-width: 1000px;
}

.form-busqueda {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.grupo-input {
    flex: 1;
    min-width: 160px;
}

/* Inputs específicos de la barra de búsqueda */
.barra-busqueda input,
.barra-busqueda select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-borde-input);
    border-radius: 6px;
    font-size: 16px;
    outline: none;
    color: var(--color-texto);
}

.barra-busqueda input:focus,
.barra-busqueda select:focus {
    border-color: var(--color-principal);
    box-shadow: var(--sombra-focus);
}

.boton-buscar-hero {
    background-color: var(--color-accion);
    color: white;
    border: none;
    padding: 12px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
    flex: 0 0 auto;
}

.boton-buscar-hero:hover {
    background-color: var(--color-accion-hover);
}





/* 4. BOTONES */



.boton,
.boton-outline,
.boton-registro,
.btn-secundario,
.boton-eliminar,
.btn-tabla,
.btn-ver,
.btn-rechazar,
.btn-aceptar,
.boton-mediano,
.boton-grande,
.boton-ficha-principal,
.boton-grande-acuerdo,
.btn-editar-perfil {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: all 0.2s;
    font-family: inherit;
    line-height: normal;
    appearance: none;
    -webkit-appearance: none;
}

/* Colores y Variantes */
.boton {
    background-color: white;
    color: var(--color-principal) !important;
    border-color: var(--color-principal);
}

.boton:hover {
    background-color: var(--color-fondo-hover);
    color: var(--color-secundario) !important;
}

.boton-outline {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.8);
    color: white !important;
}

.boton-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

.boton-registro,
.btn-aceptar {
    background-color: var(--color-exito);
    color: white !important;
}

.boton-registro:hover,
.btn-aceptar:hover {
    background-color: var(--color-exito-hover);
}

.boton-eliminar,
.btn-rechazar {
    background-color: var(--color-error);
    color: white !important;
    border: none;
}

.boton-eliminar:hover,
.btn-rechazar:hover {
    background-color: var(--color-error-hover);
}

.btn-secundario {
    background-color: var(--color-gris-boton);
    color: white !important;
}

.btn-secundario:hover {
    background-color: var(--color-gris-boton-hover);
    color: white !important;
}

.boton-ver,
.btn-ver {
    background-color: var(--color-principal);
    color: white !important;
    border: none;
}

.boton-ver:hover,
.btn-ver:hover {
    background-color: var(--color-secundario);
    color: var(--color-exito) !important;
}

/* Tamaños y Estados */
.btn-tabla {
    padding: 6px 12px;
    font-size: 12px;
    margin: 2px;
}

.boton-mediano {
    padding: 12px 30px;
    font-size: 1.1em;
}

.boton-grande {
    padding: 15px 50px;
    font-size: 1.1em;
}

.boton-ficha-principal {
    padding: 15px 40px;
    font-size: 1.2em;
}

.boton-grande-acuerdo {
    padding: 15px 30px;
}

.btn-deshabilitado {
    pointer-events: none;
    background-color: var(--color-texto-suave) !important;
    border-color: var(--color-texto-suave) !important;
    opacity: 0.7;
}





/* 5. TARJETAS DE INMUEBLES */



.subtitulo-seccion {
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-principal);
    font-size: 2.2rem;
    font-weight: 700;
}

.grid-inmuebles,
.lista-inmuebles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding-bottom: 60px;
    width: 100%;
}

.tarjeta-inmueble {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid var(--color-borde);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tarjeta-inmueble:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-fuerte);
}

.imagen-lista {
    width: 100%;
    height: 190px;
    object-fit: cover;
    flex-shrink: 0;
}

.info-inmueble {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.info-inmueble strong {
    color: var(--color-principal);
    font-size: 0.9rem;
}

.info-inmueble .precio {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-texto);
    margin: 10px 0;
}

.info-inmueble p {
    font-size: 0.95rem;
    margin-bottom: 8px;
    color: var(--color-texto-suave);
}

/* Truco CSS para cortar el texto con puntos suspensivos si es muy largo */
.descripcion-recortada {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
    color: var(--color-texto-suave);
    font-size: 0.95em;
    line-height: 1.4em;
    height: 2.8em;
}

/* Alineación de botones al fondo de la tarjeta */
.tarjeta-inmueble .info-inmueble .boton-ver {
    width: 100%;
    margin-top: auto;
    flex: 0 0 auto;
    display: block;
    text-align: center;
    padding: 10px 0;
}

.tarjeta-inmueble .info-inmueble>div {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    margin-top: auto;
}

.tarjeta-inmueble .info-inmueble>div .boton,
.tarjeta-inmueble .info-inmueble>div .btn-secundario,
.tarjeta-inmueble .info-inmueble>div .boton-eliminar {
    flex: 1;
    width: auto;
    font-size: 12px;
    padding: 8px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}





/* 6. TABLAS DE GESTIÓN */




.tabla-gestion {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    box-shadow: var(--sombra-suave);
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
}

.tabla-gestion th {
    background-color: var(--color-principal);
    color: white !important;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.tabla-gestion td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--color-borde);
    color: var(--color-texto);
    background-color: white;
    vertical-align: middle;
}

.tabla-gestion tbody tr:hover {
    background-color: var(--color-fondo-hover);
}

/* Estados */
.estado-texto {
    font-weight: 700;
}

.estado-aceptada,
.estado-ok,
.estado-firmado {
    color: var(--color-exito);
    font-weight: bold;
}

.estado-rechazada,
.estado-ko,
.badge-malo {
    color: var(--color-error);
    font-weight: bold;
}

.estado-pendiente,
.estado-aviso,
.badge-regular,
.estado-pendiente-color {
    color: var(--color-aviso);
    font-weight: bold;
}

.estado-finalizado {
    color: var(--color-texto-suave);
}

/* Scoring */
.badge-scoring {
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
}

.badge-excelente {
    background-color: var(--color-exito);
    color: white;
}





/* 7. FORMULARIOS ESTILOS GENERALES */




.formulario {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--sombra-fuerte);
    max-width: 600px;
    margin: 50px auto;
}

.formulario-ancho {
    max-width: 800px;
    margin: 50px auto;
}

.formulario-largo {
    max-width: 900px;
    margin: 50px auto;
}

.formulario-login {
    max-width: 400px;
    margin: 50px auto;
}

/* Estilos comunes para inputs y selects */
.formulario input,
.formulario select,
.grid-campos-alta input,
.grid-campos-alta select,
.grupo-flex-2 input,
.grupo-flex-2 select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-borde-input);
    border-radius: 6px;
    margin-top: 5px;
    font-size: 16px;
    box-sizing: border-box;
    /* Altura fija solo para inputs de una línea para que queden alineados */
    height: 48px;
}

.formulario textarea,
.grid-campos-alta textarea,
textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-borde-input);
    border-radius: 6px;
    margin-top: 5px;
    font-size: 16px;
    box-sizing: border-box;

    height: auto !important;
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.fila-formulario {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.campo {
    flex: 1;
    min-width: 200px;
}

.doble-ancho {
    flex: 2;
}

/* Feedback */
.error,
.exito {
    padding: 15px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
}

.error {
    background-color: var(--color-fondo-error);
    color: var(--color-error);
    border: 1px solid var(--color-borde-error);
}

.exito {
    background-color: var(--color-fondo-exito);
    color: var(--color-exito);
    border: 1px solid var(--color-borde-exito);
}

/* Ayudas visuales y textos pequeños */
.obligatorio {
    color: var(--color-error);
    margin-left: 3px;
    font-weight: bold;
}

.texto-ayuda {
    display: block;
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    margin-top: 5px;
    line-height: 1.2;
}

select:required:invalid {
    color: var(--color-texto-suave);
}

/* Radio Boxes */
.opciones-tipo {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.radio-box {
    display: flex;
    align-items: center;
    background-color: var(--color-fondo-claro);
    padding: 20px;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.radio-box:hover {
    background-color: var(--color-borde-input);
    border-color: var(--color-borde-dashed);
}

.radio-box input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    margin-top: 0;
    accent-color: var(--color-texto);
    cursor: pointer;
}

.radio-box span {
    font-size: 1rem;
    color: var(--color-texto);
    line-height: 1.4;
}

.radio-box:has(input:checked) {
    background-color: var(--color-fondo-exito);
    border-color: var(--color-exito);
}





/* 8. DETALLE INMUEBLE Y ALTA ESTILOS ESPECÍFICOS */



.ficha-inmueble {
    padding: 40px;
    background: white;
    border-radius: 12px;
    box-shadow: var(--sombra-suave);
    margin-top: 30px;
}

.cabecera-ficha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-fondo-claro);
    padding-bottom: 20px;
}

.cabecera-ficha h2 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--color-texto);
}

.precio-grande {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-texto);
}

.seccion-info {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
    border: 1px solid var(--color-borde);
}

.caracteristicas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.aviso-accion {
    color: var(--color-texto-suave);
    padding: 10px;
    border: 1px solid var(--color-borde);
    display: inline-block;
}

/* Galería Detalle */
.galeria-inmueble {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
}

.foto-principal {
    grid-row: 1 / -1;
    grid-column: 1 / 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-secundaria {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: var(--color-fondo-claro);
}

/* Galería de fotos extra */
.galeria-extra {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 30px;
    margin-top: 10px;
}

.foto-extra-item {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.3s;
    border: 1px solid var(--color-borde);
}

.foto-extra-item:hover {
    opacity: 0.9;
    box-shadow: var(--sombra-suave);
}

/* ALTA DE INMUEBLE Subida de fotos */
.grid-fotos-alta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 15px;
    margin-bottom: 30px;
}

/* CAJA PRINCIPAL */
.caja-foto-principal {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background-color: var(--color-fondo-claro);
    border: 2px dashed var(--color-borde-dashed);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    background-size: cover;
    background-position: center;

    position: relative;
    overflow: hidden;
}

.caja-foto-principal:hover {
    background-color: var(--color-borde-input);
}

.columna-fotos-extra {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
    height: 100%;
}

/* CAJAS SECUNDARIAS*/
.caja-foto-secundaria {
    background-color: var(--color-fondo-claro);
    border: 2px dashed var(--color-borde-dashed);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    position: relative;
    background-size: cover;
    background-position: center;
    height: 100%;

    position: relative;
    overflow: hidden;
}

.caja-foto-secundaria:hover {
    background-color: var(--color-borde-input);
}

/* Grid de campos para el formulario de alta (Editar Inmueble) */
.grid-campos-alta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}

.texto-upload {
    color: var(--color-texto-suave);
    font-weight: 500;
    font-size: 1.1em;
    pointer-events: none;
}

/* El input invisible se pega a la caja padre relativa */
.input-foto-oculto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.btn-borrar-foto {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--color-error);
    color: white;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-weight: bold;
    line-height: 20px;
    z-index: 20;
}

.modo-lectura {
    border-style: solid !important;
    background-color: #f9fafb !important;
    cursor: default !important;
    pointer-events: none;
}

.caja-foto-principal.modo-lectura {
    background-color: var(--color-fondo-claro) !important;
}

.caja-dato-centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}





/* 9. ZONA PRIVADA Y GESTIÓN */




.bloque-datos-usuario {
    background-color: var(--color-fondo-claro);
    padding: 20px;
    margin-top: 10px;
    border-radius: 4px;
    position: relative;
    border: 1px solid var(--color-borde);
}

.etiqueta-bloque {
    font-size: 0.9em;
    margin-bottom: 5px;
    color: var(--color-texto);
    font-weight: bold;
}

.btn-editar-perfil {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--color-principal);
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: bold;
}

.datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.dato-item strong {
    display: block;
    font-size: 0.85em;
    color: var(--color-texto-suave);
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Acuerdos Firmas */
.seccion-detalle-acuerdo {
    background: var(--color-fondo-claro);
    padding: 20px;
    border-radius: 5px;
    margin-top: 15px;
    border: 1px solid var(--color-borde);
}

.area-firma-contenedor {
    text-align: center;
    border: 1px solid var(--color-borde-input);
    padding: 30px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.firma-exitosa {
    background-color: var(--color-fondo-exito);
}

.caja-acciones-finales {
    background-color: var(--color-fondo);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
}

/* Listado Propio */
.lista-inmuebles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.info-inmueble-botones {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}






/* 10. FOOTER */




footer {
    text-align: center;
    padding: 40px 0;
    margin-top: auto;
    color: var(--color-footer-texto);
    background-color: var(--color-footer-bg);
}





/* 11. ESTILOS ESPECÍFICOS: VER SOLICITUD */




.columna-lateral {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.flex-baseline {
    align-items: baseline;
}


#badge-estado {
    font-size: 1.4rem;
}

#dato-ref {
    font-size: 1.4rem;
    color: var(--color-texto);
}

#titulo-inmueble {
    font-size: 1.8rem;
    margin-bottom: 5px;
}

#direccion-inmueble {
    font-size: 1.1rem;
}





/* 12. ESTILOS ESPECÍFICOS DETALLE ACUERDO */




/* Imagen y Marco */
.marco-imagen-acuerdo {
    background-color: var(--color-fondo-claro);
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--color-borde-input);
    border-radius: 4px;
}

.img-acuerdo-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.texto-placeholder {
    color: var(--color-texto-suave);
}

.caja-precio-destacado {
    background-color: var(--color-fondo-claro);
    padding: 20px;
    border-radius: 4px;
    margin-top: 20px;
    text-align: center;
}

.alineacion-derecha {
    display: flex;
    justify-content: flex-end;
}

.contenedor-firmas {
    display: flex;
    gap: 30px;
    justify-content: center;
    text-align: center;
}

.bloque-firma {
    flex: 1;
    max-width: 400px;
}

#acuerdo-ref {
    margin: 0;
    color: var(--color-texto);
}

#inmueble-titulo {
    font-size: 1.8rem;
}

#inmueble-descripcion {
    color: var(--color-texto-suave);
    white-space: pre-line;
}





/* 13. RESPONSIVE MÓVILES */



/* Tablets */
@media (max-width: 1024px) {
    .grid-inmuebles {
        grid-template-columns: repeat(3, 1fr);
    }

    .lista-inmuebles {
        grid-template-columns: 1fr;
    }
}

/* Móviles */
@media (max-width: 768px) {

    /* 1. Navegación */
    .cabecera .contenedor,
    .cabecera-transparente nav {
        flex-direction: column;
        gap: 15px;
    }

    .menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .img-logo-cabecera {
        max-height: 40px; 
        max-width: 80%;   
        margin: 0 auto;   
    }

    /* 2. Hero */
    .form-busqueda {
        flex-direction: column;
    }

    .grupo-input,
    .boton-buscar-hero {
        width: 100%;
    }

    .hero-header h1 {
        font-size: 2rem;
    }

    /* 3. Grids principales */
    .grid-inmuebles {
        grid-template-columns: repeat(2, 1fr);
    }

    /* FORMULARIOS */
    .fila-formulario,
    .grupo-flex,
    .grupo-flex-2,
    .grupo-flex-acciones {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }

    .grid-campos-alta {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* Hacemos que todos los campos ocupen el 100% del ancho */
    .campo,
    .doble-ancho,
    .flex-auto,
    .flex-doble,
    .span-2,
    .span-3,
    .span-4,
    .grupo-flex>div,
    .grupo-flex-2>div {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    /* Ajustamos el contenedor principal */
    .formulario,
    .formulario-ancho,
    .formulario-largo,
    .ficha-inmueble {
        width: 100% !important;
        max-width: 100% !important;
        margin: 20px 0 !important;
        padding: 20px !important;
        box-shadow: none;
    }

    .contenedor {
        padding: 0 15px;
    }

    div[style*="background-color: #f9fafb"] {
        padding: 15px !important;
        margin-top: 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 4. Galería Detalle */
    .galeria-inmueble {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .foto-principal {
        height: 250px;
    }

    .foto-secundaria {
        display: none;
    }

    .cabecera-ficha {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .cabecera-ficha a.boton {
        width: 100%;
        margin-top: 10px;
    }

    .galeria-extra {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 5. Perfil */
    .datos-grid {
        grid-template-columns: 1fr;
    }

    /* 6. Alta Inmueble (Fotos) */
    .grid-fotos-alta {
        grid-template-columns: 1fr;
        grid-template-rows: 200px auto;
    }

    .columna-fotos-extra {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        grid-template-columns: 1fr 1fr;
        height: 200px;
    }

    /* TABLAS RESPONSIVE */
    .tabla-gestion thead {
        display: none;
    }

    .tabla-gestion,
    .tabla-gestion tbody,
    .tabla-gestion tr,
    .tabla-gestion td {
        display: block;
        width: 100%;
    }

    .tabla-gestion tr {
        margin-bottom: 20px;
        background-color: white;
        border: 1px solid var(--color-borde);
        border-radius: 8px;
        box-shadow: var(--sombra-suave);
        padding: 10px;
    }

    .tabla-gestion td {
        text-align: right;
        padding: 10px;
        position: relative;
        padding-left: 50%;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .tabla-gestion td::before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--color-principal);
    }

    .tabla-gestion td:last-child {
        border-bottom: none;
        justify-content: center;
        padding-top: 15px;
    }

    /* Ajuste especial para los botones de la tabla */
    .tabla-gestion td[data-label="Acciones"] {
        display: block;
        text-align: center;
    }

    .tabla-gestion td[data-label="Acciones"]::before {
        display: none;
    }

    .grupo-botones-tabla {
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .grupo-botones-tabla .boton {
        flex: 1;
        min-width: 80px;
        margin: 0;
        padding: 10px;
    }

    /* Listado propio */
    .info-inmueble-botones {
        flex-direction: column;
    }

    /* Acuerdo */
    .contenedor-firmas {
        flex-direction: column;
        align-items: center;
    }

    .bloque-firma {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .grid-inmuebles,
    .lista-inmuebles {
        grid-template-columns: 1fr;
    }
}