/* Estilos para el shortcode de disponibilidad en el frontend */
/* Asegura que padding y border se incluyan en el ancho/alto de un elemento */
{
    box-sizing: border-box;
}
.mpe-disponibilidad {
    width: 100%;
    max-width: 900px; /* Ancho máximo del contenedor */
    margin: 40px auto;
    font-family: sans-serif;
    border: 1px solid #ddd;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	font-family: 'Roboto Condensed', sans-serif;
}

.mpe-piso {
    display: flex;
    align-items: center;
    margin-bottom: 8px; /* Espacio entre pisos */
    background-color: #f9f9f9;
    padding: 5px;
    border-radius: 4px;
}

.mpe-piso-numero {
    width: 80px; /* Ancho para el número del piso, o "Cocheras", "Amenities" */
    font-weight: bold;
    color: #555;
    text-align: right;
    margin-right: 15px;
    flex-shrink: 0;
    padding-right: 10px;
    border-right: 1px solid #eee;
	font-family: 'Roboto Condensed', sans-serif;
}

.mpe-unidades-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Mantén un gap entre unidades */
    flex: 1;
    padding: 10px;
}

.mpe-unidad {
    /* Mantenemos el flex: 1 para desktop, permitiendo que crezcan y se ajusten */
    flex: 1; /* Esto es para pantallas grandes, permite que se expandan */
    min-width: 80px; /* Un tamaño mínimo razonable para desktop */
    padding: 10px 15px;
    margin: 0; /* <-- Cambia esto a 0 para que no haya márgenes duplicados con el gap */
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    cursor: default;
    transition: background-color 0.3s ease;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 0.95em;
}

.mpe-unidad:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Colores basados en el estado */
.mpe-unidad.estado-vendido {
    background-color: #cccccc;
}

.mpe-unidad.estado-reservado {
    background-color: #c5a74a;
}

.mpe-unidad.estado-disponible {
    background-color: #0C9E00;
    /*color: #555; */
}

/* Estilos específicos para Cocheras y Amenities */
.mpe-unidad.mpe-cochera {
    background-color: #6a8c7e;
}
.mpe-unidad.mpe-cochera.estado-vendido {
    background-color: #7b4a42;
}
.mpe-unidad.mpe-cochera.estado-reservado {
    background-color: #a38d4f;
}

.mpe-unidad.mpe-amenity {
    background-color: #5b7da0;
}
.mpe-unidad.mpe-amenity.estado-vendido {
    background-color: #7f5c53;
}
.mpe-unidad.mpe-amenity.estado-reservado {
    background-color: #a8946e;
}

/* Clases para los contenedores de piso de cocheras/amenities si necesitas estilos diferentes */
.mpe-piso.mpe-piso_cocheras .mpe-piso-numero {
    background-color: #e0f2f1;
    color: #4a6a5e;
}
.mpe-piso.mpe-piso_amenities .mpe-piso-numero {
    background-color: #e3f2fd;
    color: #4f7499;
}

.mpe-disponibilidad-leyenda {
margin-top: 20px;
display: flex;
align-items: center;
gap: 20px;
font-size: 0.9em;
color: #555;
}
.mpe-disponibilidad-leyenda-item {
display: flex;
align-items: center;
gap: 8px;
}

/* Estilos para los cuadraditos de color de la leyenda */
.mpe-disponibilidad-leyenda-color {
    width: 20px; /* Crucial: define el ancho del cuadrado */
    height: 20px; /* Crucial: define el alto del cuadrado */
    border-radius: 3px; /* Bordes ligeramente redondeados */
    flex-shrink: 0; /* Evita que se encoja en un contenedor flexbox */
    /* Asegúrate de que no haya un 'display: none;' o 'opacity: 0;' en algún lugar */
}

/* Colores específicos para cada estado */
.mpe-disponibilidad-leyenda-disponible {
    background-color: #0C9E00; /* verde */
}

.mpe-disponibilidad-leyenda-reservado {
    background-color: #c5a74a; /* Naranja/marrón */
}

.mpe-disponibilidad-leyenda-vendido {
    background-color: #cccccc; /* gris */
}

/* Asegúrate también de que los estilos para el contenedor principal de la leyenda sean correctos */
.mpe-disponibilidad-leyenda {
    margin-top: 20px;
    display: flex; /* Usar flexbox para alinear elementos */
    align-items: center;
    gap: 20px; /* Espacio entre los ítems de la leyenda */
    font-size: 0.9em;
    color: #555;
    flex-wrap: wrap;
	justify-content: center;/* Permite que los elementos salten de línea si no hay espacio */
}

.mpe-disponibilidad-leyenda-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el color y el texto */
}

/* ========================================= */
/* Media Queries para Responsive (Mobile)    */
/* ========================================= */

@media (max-width: 767px) { /* Este breakpoint es común para la mayoría de los móviles */

    /* Contenedor principal de la tabla */
    .mpe-disponibilidad {
        padding: 8px; /* Reducir el padding general en móvil para más espacio */
    }

    /* Cada fila de piso */
    .mpe-piso {
        flex-direction: row; /* Mantener en fila para que número y unidades estén juntos */
        align-items: center; /* Alinear verticalmente los ítems en la fila */
        margin-bottom: 8px; /* Espacio entre pisos */
        padding: 5px 0; /* Un poco de padding en el piso para el número */
    }

    /* Número de piso */
    .mpe-piso-numero {
        flex: 0 0 50px; /* Ancho fijo para el número del piso, más pequeño */
        border-right: 1px solid #ccc; /* Mantener borde derecho para separación */
        border-bottom: none; /* Eliminar borde inferior si estaba */
        margin-right: 5px; /* Pequeño margen a la derecha para separar de las unidades */
        font-size: 0.8em; /* Tamaño de fuente aún más pequeño */
        justify-content: center; /* Centrar el número */
        padding: 3px;
    }

    /* Contenedor de unidades dentro de un piso */
    .mpe-unidades-container {
        flex: 1; /* Ocupa el resto del espacio disponible en la fila */
        padding: 0; /* Sin padding aquí, lo manejan las unidades */
        justify-content: flex-start; /* Alinear unidades al inicio */
        gap: 8px; /* Reducir el gap entre unidades para ganar espacio */
    }

    /* Estilos para cada unidad (depto, cochera, amenity) */
    .mpe-unidad {
        /* Para TRES columnas, considerando un gap de 8px en el contenedor de unidades.
         * El 5.333px se calcula aproximadamente como (gap * 2) / 3 para compensar el gap total distribuido en 3 items.
         * Una forma más simple es: (total_gap / numero_de_items) * (numero_de_items - 1) / numero_de_items
         * O simplemente: (gap_value * (num_columns - 1) / num_columns)
         * En este caso, 8px de gap. Si queremos 3 columnas, necesitamos (8 * 2 / 3) = 5.333px de descuento por item.
         */
        flex: 0 0 calc(33.333% - 5.333px); /* ¡NUEVO! Para 3 columnas */
        min-width: unset; /* Desactiva el min-width de desktop */
        padding: 6px 4px; /* <-- Reducir al mínimo el padding para maximizar el espacio del texto */
        font-size: 0.65em; /* <-- Reducir drásticamente el tamaño de fuente para que quepa el texto largo */
        height: auto; /* Permite que el alto se ajuste al contenido si el texto se rompe en líneas */
        line-height: 1.2; /* Un line-height ajustado para textos pequeños */
    }

    /* Ajuste de la leyenda en móvil */
    .mpe-disponibilidad-leyenda {
        flex-direction: row;
        flex-wrap: wrap; /* Permite que los ítems de leyenda se envuelvan si hay muchos */
        justify-content: center;
        gap: 8px; /* Reducir el espacio entre ítems de leyenda */
        font-size: 0.7em;
        margin-top: 15px; /* Espacio superior para separar de la tabla */
    }

    .mpe-disponibilidad-leyenda-item {
        gap: 3px; /* Espacio entre color y texto en leyenda */
    }

    .mpe-disponibilidad-leyenda-color {
        width: 12px; /* Reducir tamaño de los cuadrados de color en leyenda */
        height: 12px;
    }
}