/*
========================================
RENTAL FIELDS - ESTILOS COMPACTOS
========================================
Archivo: app/static/css/property/partials/_rental_fields.css
Descripción: Estilos para campos de alquiler - Diseño compacto
Versión: 2.0
*/

/* === INPUT GROUP COMPACTO === */
.input-group-premium {
    width: 100%;
    max-width: 100%;
}

.input-group {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(var(--tema-primario-rgb, 30, 144, 255), 0.15);
    overflow: hidden;
}

.input-group .premium-floating-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--tema-primario, #1e90ff) !important;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem !important;
    min-height: auto !important;
}

.input-group-addon-currency {
    display: flex;
    align-items: center;
    background: transparent;
    border-left: none;
    padding: 0 6px;
    height: 100%;
}

.premium-currency-select {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--tema-primario, #1e90ff);
    background: transparent;
    border: none;
    outline: none;
    min-width: 60px;
    cursor: pointer;
}

.input-group .premium-currency-select:focus {
    outline: none;
    box-shadow: none;
}

/* Selector de moneda */
.currency-select-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 100px;
    margin-left: 6px;
}

.premium-floating-label-currency {
    position: absolute;
    top: -0.5rem;
    left: 0.4rem;
    font-size: 0.7rem;
    color: var(--tema-primario, #1e90ff);
    background: #fff;
    padding: 0 0.2em;
    border-radius: 4px;
    font-weight: 600;
    z-index: 3;
    pointer-events: none;
}

.currency-hint {
    color: var(--tema-primario, #1e90ff);
    font-size: 0.75rem;
    margin-left: 4px;
    display: flex;
    align-items: center;
}

/* === ETIQUETAS EXTERNAS COMPACTAS === */
.external-floating-label {
    display: block;
    margin-bottom: 0.15rem;
    margin-left: 2px;
    color: var(--tema-primario, #1e90ff);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    width: fit-content;
    position: relative;
    z-index: 20;
}

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

/* === FORM FLOATING COMPACTO === */
.form-floating-premium {
    position: relative;
    overflow: visible;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0;
}

.premium-floating-input {
    padding: 0.4rem 0.6rem !important;
    box-sizing: border-box;
    margin-bottom: 2px;
    color: var(--tema-primario, #1e90ff) !important;
    border: none !important;
    border-bottom: 1px solid rgba(var(--tema-primario-rgb, 30, 144, 255), 0.15) !important;
    background: transparent !important;
    border-radius: 0 !important;
    min-height: auto !important;
    line-height: 1.4 !important;
    font-size: 0.85rem !important;
}

.premium-floating-input.with-currency {
    padding-left: 1.8em !important;
}

.premium-floating-label i {
    margin-right: 0.4em;
    color: var(--tema-primario, #1e90ff);
    font-size: 0.8rem;
    opacity: 0.8;
}

.premium-label-visible {
    z-index: 10 !important;
    background: transparent !important;
    padding: 0 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
}

.premium-floating-input::placeholder {
    color: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.4) !important;
    opacity: 1 !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
}

.premium-floating-input:focus::placeholder {
    opacity: 0.3 !important;
}

/* Textarea */
textarea.premium-floating-input {
    height: auto !important;
    min-height: 60px !important;
    max-height: 200px !important;
    overflow: auto !important;
    resize: vertical !important;
}

/* === RENTAL CARD COMPACTA - SIN CONTORNOS === */
.rental-fields-container {
    margin-bottom: 0.5rem;
    background: transparent !important;
    border: none !important;
}

.rental-card {
    margin-bottom: 0.35rem;
    margin-top: 0.15rem;
    position: relative;
    background: transparent !important;
    padding: 0.5rem 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    color: var(--tema-primario, #1e90ff);
    overflow: visible;
}

/* Sin hover en móviles */
@media (hover: hover) {
    .rental-card:hover {
        box-shadow: none;
    }
}

/* === INPUTS COMPACTOS - SIN CONTORNOS === */
.spectacular-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;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.6rem !important;
}

.spectacular-input:focus {
    border-bottom-color: var(--tema-primario, #1e90ff) !important;
    box-shadow: none !important;
    background: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.02) !important;
}

.spectacular-textarea {
    min-height: 60px !important;
    resize: vertical !important;
}

.spectacular-select {
    cursor: pointer !important;
}

.spectacular-date::-webkit-calendar-picker-indicator {
    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(193deg) brightness(104%) contrast(97%);
    cursor: pointer;
}

/* === GRUPOS DE FORMULARIO === */
.rental-form-group {
    margin-bottom: 0.5rem;
}

.rental-form-group-top {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
}

.rental-form-group-bottom {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.rental-input-group {
    position: relative;
    width: 100%;
}

.rental-coin-icon {
    color: var(--tema-primario, #1e90ff);
    margin-right: 4px;
    font-size: 0.85rem;
}

.rental-currency-select {
    border: none;
    background: transparent;
    color: var(--tema-primario, #1e90ff);
    font-weight: 600;
    padding: 0 6px;
    font-size: 0.85rem;
}

/* === SHIMMER SUTIL === */
.shimmer-effect {
    display: none; /* Desactivado para diseño limpio */
}

.content-wrapper {
    position: relative;
    z-index: 2;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .rental-card {
        padding: 0.5rem;
        margin-bottom: 0.35rem;
    }
    
    .premium-floating-input {
        padding: 0.35rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .external-floating-label {
        font-size: 0.7rem;
    }
    
    textarea.premium-floating-input {
        min-height: 50px !important;
    }
}

@media (max-width: 576px) {
    .rental-card {
        padding: 0.4rem;
        border-radius: 6px;
    }
    
    .premium-floating-input {
        padding: 0.3rem 0.4rem !important;
        font-size: 0.75rem !important;
        border-radius: 4px !important;
    }
}

/* ===========================================
   TEMA NOCTURNO - RENTAL FIELDS
   =========================================== */
html[data-tema="nocturno"] .premium-floating-input,
html[data-tema="nocturno"] .spectacular-input {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.25) !important;
}

html[data-tema="nocturno"] .premium-floating-input:focus,
html[data-tema="nocturno"] .spectacular-input:focus {
    border-bottom-color: #60a5fa !important;
    background: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.05) !important;
}

html[data-tema="nocturno"] .premium-floating-input::placeholder {
    color: rgba(148, 163, 184, 0.5) !important;
}

html[data-tema="nocturno"] .external-floating-label,
html[data-tema="nocturno"] .external-floating-label i {
    color: #60a5fa;
}

html[data-tema="nocturno"] .input-group {
    border-bottom-color: rgba(var(--tema-primario-rgb, 30, 144, 255), 0.25);
}

html[data-tema="nocturno"] .input-group .premium-floating-input {
    color: #e2e8f0 !important;
}

html[data-tema="nocturno"] .rental-coin-icon,
html[data-tema="nocturno"] .premium-currency-select {
    color: #60a5fa;
}

html[data-tema="nocturno"] .rental-currency-select {
    color: #60a5fa;
}

html[data-tema="nocturno"] .currency-hint {
    color: #60a5fa;
}

html[data-tema="nocturno"] .premium-floating-label-currency {
    color: #60a5fa;
    background: rgba(26, 32, 44, 0.9);
}

html[data-tema="nocturno"] .spectacular-date::-webkit-calendar-picker-indicator {
    filter: invert(60%) sepia(40%) saturate(500%) hue-rotate(190deg);
}

/* ===========================================
   TEMA FUTURISTA - RENTAL FIELDS
   =========================================== */
html[data-tema="futurista"] .premium-floating-input,
html[data-tema="futurista"] .spectacular-input {
    color: #e0f7fa !important;
    border-bottom-color: rgba(0, 247, 255, 0.25) !important;
}

html[data-tema="futurista"] .premium-floating-input:focus,
html[data-tema="futurista"] .spectacular-input:focus {
    border-bottom-color: #00f7ff !important;
    background: rgba(0, 247, 255, 0.04) !important;
}

html[data-tema="futurista"] .premium-floating-input::placeholder {
    color: rgba(0, 247, 255, 0.3) !important;
}

html[data-tema="futurista"] .external-floating-label,
html[data-tema="futurista"] .external-floating-label i {
    color: #00f7ff;
}

html[data-tema="futurista"] .input-group {
    border-bottom-color: rgba(0, 247, 255, 0.25);
}

html[data-tema="futurista"] .input-group .premium-floating-input {
    color: #e0f7fa !important;
}

html[data-tema="futurista"] .rental-coin-icon,
html[data-tema="futurista"] .premium-currency-select {
    color: #00f7ff;
}

html[data-tema="futurista"] .rental-currency-select {
    color: #00f7ff;
}

html[data-tema="futurista"] .currency-hint {
    color: #00f7ff;
}

html[data-tema="futurista"] .premium-floating-label-currency {
    color: #00f7ff;
    background: rgba(10, 10, 10, 0.9);
}

html[data-tema="futurista"] .spectacular-date::-webkit-calendar-picker-indicator {
    filter: invert(80%) sepia(80%) saturate(400%) hue-rotate(160deg) brightness(110%);
}