/* Estilos Generales del Widget AVM */
body, html {
    width: var(--widget-main-width); /* Usar variable CSS */
    height: var(--widget-main-height); /* Usar variable CSS */
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Raleway', sans-serif !important;
}

.widget-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
    background-color: #f8f9fa; /* Un fondo claro, similar al de la web de Tinsa */
}

/* Pestañas */
.tabs-container {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
    flex-shrink: 0; /* Evitar que las pestañas se encojan */
}

.tab-button {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    font-size: 1em;
    color: #007bff; /* Azul Tinsa para la pestaña activa */
    border-bottom: 2px solid transparent;
}

.tab-button.active {
    font-weight: bold;
    border-bottom: 2px solid #007bff;
    color: #0056b3;
}

.tab-button:not(.active) {
    color: #6c757d; /* Gris para pestañas inactivas */
}

/* Contenido de los Pasos/Pestañas */
.widget-container > .tab-content {
    display: none; /* Oculto por defecto, activado con la clase .active */
    flex-grow: 1;
    flex-direction: column;
    overflow: hidden; /* MUY IMPORTANTE: El tab-content no debe scrollear, sus hijos sí si es necesario */
}

.widget-container > .tab-content.active {
    display: flex; /* Asegurar que el display flex se aplique cuando está activo */
}



/* Grupos de Formulario y Elementos */
.form-group {
    margin-bottom: 1rem;
}

.form-group-inline {
    display: flex;
    align-items: center;
    /* justify-content: space-between; /* Opcional, si se quiere espacio entre label e input */
    margin-bottom: 0.75rem; /* Un poco menos de margen para estos items */
}

.form-group-inline label {
    flex-basis: 45%; /* Ajustar este porcentaje según necesidad */
    margin-right: 10px;
    margin-bottom: 0; /* No necesita margen inferior si está alineado al centro */
    text-align: left; /* Asegurar alineación izquierda del label */
}

.form-group-inline input[type="number"],
.form-group-inline select { /* Aunque el select de material no usa esta clase por ahora */
    flex-grow: 1;
    width: auto; /* Permitir que flexbox maneje el ancho */
}


label {
    display: block;
    margin-bottom: .5rem;
    font-weight: 500;
    font-size: 0.9em;
    color: #333;
}

input[type="text"], input[type="number"], select {
    width: 100%;
    padding: .375rem .75rem;
    font-size: 0.9em;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    box-sizing: border-box;
}

.btn-primary { /* Estilo Tinsa para botones */
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    padding: 10px 15px;
    font-size: 1em;
    border-radius: .25rem;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    width: 100%;
    margin-top: 10px; /* Espacio por encima del botón */
    flex-shrink: 0; /* Evitar que el botón se encoja */
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Mapa */
#widget-map-container {
    width: 100%;
    min-height: 200px; /* Levemente inferior */
    flex-grow: 1;
    background-color: #e9ecef;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #ced4da;
}

/* Mensajes de Error/Info */
.error-message-widget {
    color: red;
    font-size: 0.8em;
    margin-top: 5px;
    margin-bottom: 10px; /* Añadido para separar del contenido siguiente */
    padding: 8px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: .25rem;
    text-align: center;
    flex-shrink: 0;
}
.error-message-widget.info { /* Para mensajes informativos */
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c5460;
}
.error-message-widget.success { /* Para mensajes de éxito */
     background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}


/* Estilos para la lista de selección de ROLs */
#paso2_seleccion_rol_widget h4 {
    flex-shrink: 0; /* Evitar que el título se encoja */
}

#rol-selection-widget-container {
    border: 1px solid #ced4da;
    border-radius: .25rem;
    overflow-y: auto;
    background-color: #fff;
    flex-grow: 1;
    min-height: 0; /* Permite que flex-grow determine la altura */
    max-height: calc(var(--widget-main-height) - 150px); /* Restringe la altura máxima para forzar el scroll */
    /* Para forzar una altura mayor si el contenido es poco, el padre #paso2_seleccion_rol_widget debe tener altura. */
    /* Si el widget tiene 600px, y el header y tabs ~100px, este paso tiene ~500px. */
    /* El h4 ocupa ~30-40px. Quedan ~450px. */
    /* Intentemos forzar una altura grande aquí si flex-grow no es suficiente por sí solo. */
    /* height: calc(var(--widget-main-height) - 150px); /* Ejemplo: altura total menos aprox. headers y paddings */
    /* La línea anterior es experimental y puede necesitar ajuste o ser eliminada si causa problemas. */
    /* Por ahora, confiamos en flex-grow y la estructura del padre. */
    margin-bottom: 10px;
}

.rol-selection-item {
    display: flex;
    align-items: center;
    padding: 8px 5px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.rol-selection-item:last-child {
    border-bottom: none;
}

.rol-selection-item input[type="radio"] {
    margin-right: 8px;
    width: auto;
    flex-shrink: 0; /* Evitar que el radio se encoja */
}

.rol-selection-item label {
    margin-bottom: 0;
    font-weight: normal;
    flex-grow: 1; /* Permitir que el label ocupe espacio */
    word-break: break-word; /* Para que el texto largo se ajuste */
}

.rol-selection-item:hover {
    background-color: #e9ecef;
}

/* Ajustes específicos para el layout de cada paso/tab */
#tabDireccion, #tabRol {
    /* Ya son display:flex y flex-direction:column por .tab-content y por su ID específico */
}

/* Para asegurar que el botón en #tabDireccion quede abajo */
#tabDireccion .btn-primary {
    margin-top: auto; /* Empuja el botón hacia abajo si hay espacio */
}


#paso3_datos_propiedad_widget form {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow form to fill the space */
    min-height: 0; /* Allow form to shrink, critical for child scrolling */
}

#paso3_datos_propiedad_widget h4 {
    flex-shrink: 0; /* Prevent title from shrinking */
}

#paso3_datos_propiedad_widget .scrollable-form-fields {
    flex-grow: 1;
    overflow-y: auto; /* Enable vertical scrolling */
    padding-right: 10px; /* Add space for scrollbar to prevent content overlap */
}

#paso3_datos_propiedad_widget #estimar_valor_widget {
    flex-shrink: 0; /* Prevent button from shrinking */
    margin-top: 15px; /* Add some space above the button */
    width: 100%; /* Override width from head style if necessary */
    display: block;  /* Override display: inline-block from head style */
    box-sizing: border-box; /* Ensure padding is included in the width */
}

/* Ajuste para alinear el guion del ROL */
.form-group-inline .hyphen {
    padding-top: 1.5rem; /* Empuja el guion hacia abajo para alinearlo con los inputs */
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}