/*
========================================
FORMULARIOS DE PROPIEDADES - ESTILOS BASE
========================================
Archivo: app/static/css/property/formularios_base.css
Descripción: Estilos compartidos - Diseño limpio y compacto
Versión: 2.0
*/

/* ===========================================
   RESET PARA FORMULARIOS - LIMPIEZA GLOBAL
   =========================================== */

/* Fondo de página: blanco/tema (elimina el azul de premium_blue_system.css) */
.premium-background {
    background: var(--tema-fondo-cuerpo) !important;
}

/* El header permanece transparente (muestra el fondo de página detras) */
.property-view-container .property-view-header,
.property-view-container .property-header-gradient {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Eliminar bordes y sombras de tarjetas en formularios */
.property-view-container .premium-card {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.property-view-container .premium-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Cards de detalles: estilo tarjeta blanca con tema */
.tarjeta-contenido-premium,
.content-card-premium {
    background: var(--tema-fondo-tarjeta) !important;
    border: 1px solid var(--tema-borde-color) !important;
    border-radius: var(--tema-borde-radio-mediano) !important;
    box-shadow: var(--tema-sombra-suave) !important;
    padding: 0.75rem !important;
    margin-bottom: 0.35rem !important;
}

/* ===========================================
   INPUTS Y FORMULARIOS COMPACTOS
   =========================================== */

/* Inputs más pequeños y limpios - SIN CONTORNOS */
.form-control,
.form-select {
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
    border: none !important;
    border-bottom: 1px solid var(--tema-borde-color) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--tema-texto-primario) !important;
    transition: border-color 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
    border-bottom-color: var(--tema-primario) !important;
    box-shadow: none !important;
    outline: none !important;
    background: var(--tema-fondo-hover) !important;
}

/* Labels compactas */
.form-label,
.external-floating-label,
.premium-form-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--tema-primario) !important;
    margin-bottom: 0.15rem !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.external-floating-label i {
    margin-right: 4px;
    color: var(--tema-primario);
}

/* ===========================================
   CONTENEDORES DE ICONOS COMPACTOS
   =========================================== */
.contenedor-icono-seccion,
.contenedor-icono-vivienda,
.contenedor-icono-campo,
.contenedor-icono-local,
.contenedor-icono-empresa,
.contenedor-icono-remate {
    background: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.08);
    border-radius: 4px;
    padding: 4px 6px;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icono-seccion,
.icono-casa,
.icono-campo,
.icono-local,
.icono-empresa,
.icono-remate {
    color: var(--tema-primario, #1e90ff);
    font-size: 0.8rem;
}

/* Títulos de sección */
.titulo-seccion,
.titulo-seccion-vivienda,
.titulo-seccion-campo,
.titulo-seccion-local,
.titulo-seccion-empresa,
.titulo-seccion-remate {
    color: var(--tema-primario) !important;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
}

/* Header flex compacto - sin borde */
.header-flex-contenido {
    display: flex;
    align-items: center;
    margin-bottom: 0.35rem;
    padding-bottom: 0;
    border-bottom: none;
}

/* ===========================================
   ESPACIADO REDUCIDO
   =========================================== */
.form-row-spacing-sm,
.espaciado-fila-formulario-sm {
    margin-bottom: 0.25rem !important;
}

.form-row-spacing-md {
    margin-bottom: 0.5rem !important;
}

/* Campos premium compactos */
.campo-premium {
    margin-bottom: 0.35rem !important;
}

/* Rows con menos gap */
.row.g-2 {
    --bs-gutter-x: 0.5rem !important;
    --bs-gutter-y: 0.35rem !important;
}

.row.g-3 {
    --bs-gutter-x: 0.75rem !important;
    --bs-gutter-y: 0.5rem !important;
}

/* ===========================================
   INPUTS CON UNIDADES
   =========================================== */
.input-unit-container {
    position: relative;
}

.unit-label {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tema-primario, #1e90ff);
    font-size: 0.7rem;
    font-weight: 500;
    pointer-events: none;
}

/* Padding derecho para inputs con unidad */
.input-unit-container .form-control {
    padding-right: 2rem !important;
}

/* ===========================================
   CARACTERÍSTICAS Y SUBTÍTULOS
   =========================================== */
.characteristics-subtitle {
    color: var(--tema-primario, #1e90ff);
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* ===========================================
   AMENIDADES COMPACTAS
   =========================================== */
.grupo-amenidades {
    width: 100%;
}

.flex-amenidades {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Header de amenidades simplificado */
.amenities-header-spectacular {
    text-align: center;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
}

.amenities-icon-container {
    display: inline-flex;
    background: var(--tema-gradiente-primario, linear-gradient(135deg, #1e90ff, #4169e1));
    width: 28px;
    height: 28px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.25rem;
}

.amenities-icon {
    color: white;
    font-size: 12px;
}

.amenities-title-spectacular {
    color: var(--tema-primario, #1e90ff);
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0 0.15rem 0;
    text-transform: uppercase;
}

.amenities-subtitle {
    color: #666;
    font-size: 0.65rem;
    font-weight: 500;
    margin: 0;
}

/* Tarjetas de amenidades compactas */
.amenity-card-premium {
    margin-bottom: 0;
}

.amenity-checkbox {
    display: none;
}

.amenity-label-premium {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--tema-fondo-tarjeta);
    border: 1px solid var(--tema-borde-color);
    border-radius: var(--tema-borde-radio-pequeno);
    padding: 0.75rem 0.5rem;
    cursor: pointer;
    transition: var(--tema-transicion-rapida);
    min-height: 72px;
    position: relative;
    width: 100%;
}

.amenity-label-premium:hover {
    background: var(--tema-fondo-hover);
    border-color: var(--tema-borde-hover);
}

.amenity-icon-wrapper {
    color: var(--tema-primario);
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
}

.amenity-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tema-texto-primario);
    text-align: center;
    line-height: 1.2;
}

/* Recursos (agua/electricidad/carretera) — más grandes y distribuidos */
.recursos-fila {
    width: 100%;
}

.recursos-fila .row {
    width: 100%;
    margin: 0;
    flex-wrap: nowrap;
}

.recursos-fila .col {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.recursos-fila .col:first-child { padding-left: 0; }
.recursos-fila .col:last-child  { padding-right: 0; }

.recursos-fila .amenity-label-premium {
    min-height: 90px;
    padding: 1rem 0.5rem;
}

.recursos-fila .amenity-icon-wrapper {
    font-size: 1.6rem;
    margin-bottom: 0.45rem;
}

.recursos-fila .amenity-text {
    font-size: 0.82rem;
}

.amenity-check-indicator {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: none;
}

.amenity-check-indicator::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 6px;
    opacity: 0;
}

/* Estado seleccionado */
.amenity-checkbox:checked + .amenity-label-premium {
    background: var(--tema-fondo-activo);
    border-color: var(--tema-borde-activo);
}

.amenity-checkbox:checked + .amenity-label-premium .amenity-icon-wrapper {
    color: var(--tema-borde-activo);
}

.amenity-checkbox:checked + .amenity-label-premium .amenity-text {
    color: var(--tema-primario);
    font-weight: 700;
}

.amenity-checkbox:checked + .amenity-label-premium .amenity-check-indicator {
    background: var(--tema-primario);
    border-color: var(--tema-primario);
}

.amenity-checkbox:checked + .amenity-label-premium .amenity-check-indicator::after {
    opacity: 1;
}

/* ===========================================
   PANEL DE ESTADO COMPACTO
   =========================================== */
.form-status {
    padding: 0.5rem 0;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
}

.status-help {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===========================================
   ITEMS DE CONTACTO COMPACTOS
   =========================================== */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0;
}

.contact-item i {
    color: var(--tema-primario, #1e90ff);
    font-size: 0.85rem;
}

/* ===========================================
   FORM FLOATING PREMIUM
   =========================================== */
.form-floating-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

/* ===========================================
   PARTIALS - CAMPOS DE ALQUILER SIN CONTORNOS
   =========================================== */
.rental-fields-container .content-card-premium {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.35rem 0 !important;
    margin-bottom: 0.35rem !important;
    border-bottom: 1px solid rgba(var(--tema-primario-rgb, 30, 144, 255), 0.08) !important;
}

.rental-fields-container .premium-floating-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(var(--tema-primario-rgb, 30, 144, 255), 0.15) !important;
    border-radius: 0 !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
}

.rental-fields-container .premium-floating-label {
    color: var(--tema-primario, #1e90ff) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    margin-bottom: 0.15rem !important;
}

.rental-fields-container .premium-currency-select {
    background: transparent !important;
    border: none !important;
    color: var(--tema-primario, #1e90ff) !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
}

/* ===========================================
   PARTIALS - UBICACIÓN SIN CONTORNOS
   =========================================== */
.location-container .location-card-premium {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.35rem 0 !important;
    margin-bottom: 0.35rem !important;
}

.location-container .location-input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(var(--tema-primario-rgb, 30, 144, 255), 0.15) !important;
    border-radius: 0 !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
}

.location-container .location-title {
    color: var(--tema-primario, #1e90ff) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.35rem !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.location-container .location-map {
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    height: 180px !important;
}

/* ===========================================
   SOPORTE PARA TEMAS
   =========================================== */

/* Tema Nocturno */
html[data-tema="nocturno"] .tarjeta-contenido-premium,
html[data-tema="nocturno"] .content-card-premium,
html[data-tema="nocturno"] .rental-fields-container .content-card-premium,
html[data-tema="nocturno"] .location-container .location-card-premium {
    background: rgba(26, 32, 44, 0.95) !important;
}

html[data-tema="nocturno"] .form-control,
html[data-tema="nocturno"] .form-select,
html[data-tema="nocturno"] .rental-fields-container .premium-floating-input,
html[data-tema="nocturno"] .location-container .location-input {
    background: rgba(26, 32, 44, 0.9) !important;
    border-color: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.3) !important;
    color: #e2e8f0 !important;
}

html[data-tema="nocturno"] .amenity-label-premium {
    background: transparent;
}

html[data-tema="nocturno"] .amenity-text {
    color: #e2e8f0;
}

/* Tema Futurista */
html[data-tema="futurista"] .tarjeta-contenido-premium,
html[data-tema="futurista"] .content-card-premium,
html[data-tema="futurista"] .rental-fields-container .content-card-premium,
html[data-tema="futurista"] .location-container .location-card-premium {
    background: rgba(10, 10, 10, 0.9) !important;
}

html[data-tema="futurista"] .form-control,
html[data-tema="futurista"] .form-select,
html[data-tema="futurista"] .rental-fields-container .premium-floating-input,
html[data-tema="futurista"] .location-container .location-input {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: rgba(0, 247, 255, 0.3) !important;
    color: #fff !important;
}

html[data-tema="futurista"] .form-control:focus,
html[data-tema="futurista"] .form-select:focus {
    border-color: #00f7ff !important;
    box-shadow: 0 0 8px rgba(0, 247, 255, 0.2) !important;
}

html[data-tema="futurista"] .form-label,
html[data-tema="futurista"] .external-floating-label,
html[data-tema="futurista"] .titulo-seccion,
html[data-tema="futurista"] .characteristics-subtitle,
html[data-tema="futurista"] .premium-form-label {
    color: #00f7ff !important;
}

html[data-tema="futurista"] .amenity-label-premium {
    background: transparent;
}

html[data-tema="futurista"] .amenity-text {
    color: #fff;
}

html[data-tema="futurista"] .amenity-icon-wrapper {
    color: #00f7ff;
}

/* ===========================================
   RESPONSIVE - MÓVILES
   =========================================== */
@media (max-width: 768px) {
    /* Tarjetas sin padding en móvil */
    .property-view-container .premium-card {
        padding: 0.35rem !important;
        margin-bottom: 0.35rem !important;
    }
    
    .tarjeta-contenido-premium,
    .content-card-premium {
        padding: 0.35rem 0 !important;
        border-radius: 0 !important;
    }
    
    /* Inputs aún más compactos */
    .form-control,
    .form-select {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Labels más pequeñas */
    .form-label,
    .external-floating-label {
        font-size: 0.7rem !important;
    }
    
    /* Gap reducido */
    .flex-amenidades {
        gap: 4px;
    }
    
    .row.g-2 {
        --bs-gutter-x: 0.35rem !important;
        --bs-gutter-y: 0.25rem !important;
    }
    
    /* Mapa más pequeño */
    .location-container .location-map {
        height: 150px !important;
    }
    
    /* Amenidades más pequeñas */
    .amenity-label-premium {
        height: 42px;
        min-height: 42px;
        padding: 4px 3px;
    }
    
    .amenity-icon-wrapper {
        font-size: 12px;
    }
    
    .amenity-text {
        font-size: 0.55rem;
    }
    
    /* Header de amenidades */
    .amenities-header-spectacular {
        padding: 0.35rem;
        margin-bottom: 0.35rem;
    }
    
    .amenities-icon-container {
        width: 24px;
        height: 24px;
    }
    
    .amenities-title-spectacular {
        font-size: 0.7rem;
    }
}

@media (max-width: 576px) {
    .titulo-seccion,
    .titulo-seccion-vivienda,
    .titulo-seccion-campo {
        font-size: 0.7rem;
    }
    
    .characteristics-subtitle {
        font-size: 0.6rem;
    }
    
    /* Columnas de amenidades en 3 */
    .grupo-amenidades .row .col-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* ===========================================
   ELIMINAR EFECTOS HOVER EN MÓVIL
   =========================================== */
@media (hover: none) {
    .property-view-container .premium-card:hover,
    .amenity-label-premium:hover,
    .tarjeta-contenido-premium:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}
/* ===========================================
   OVERRIDE GLOBAL - SIN CONTORNOS EN FORMULARIOS
   Estos estilos tienen máxima prioridad
   =========================================== */
.property-view-container .form-control,
.property-view-container .form-select,
.property-view-container input,
.property-view-container select,
.property-view-container textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(var(--tema-primario-rgb, 30, 144, 255), 0.15) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.85rem !important;
}

.property-view-container .form-control:focus,
.property-view-container .form-select:focus,
.property-view-container input:focus,
.property-view-container select:focus,
.property-view-container textarea:focus {
    background: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.02) !important;
    border-bottom-color: var(--tema-primario, #1e90ff) !important;
    box-shadow: none !important;
    outline: none !important;
}

.property-view-container .card,
.property-view-container .content-card-premium,
.property-view-container .tarjeta-contenido-premium,
.property-view-container .rental-card,
.property-view-container .premium-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.basic-info-container .content-card-premium,
.basic-info-container .rental-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
}