:root {
    --MainColor: #002851; /* Verde principal modernizado */
    /*--cream: #f2f1df;*/
    --cream: #ffffff;
    /*--cream: #fff;*/
    --softgreen: #668878;
    --SoftgreenSec: rgba(110, 144, 128, 0.60);
    --SoftgreenSec2: rgba(110, 144, 128, 0.4);
    --move-duration: 0.2s; /* tiempo que tarda el label en subir */
    --extra-wait: 0s; /* espera antes del efecto */
    --bg-open-duration: 0.1s; /* duración del efecto de apertura */
}

/*///////////////////////////////////////////////////////////////////////////*/

.input-group-floating {
    position: relative;
    margin: 12px 0;
}

    .input-group-floating .form-control,
    .input-group-floating .form-select {
        width: 100%;
        border: 2px solid #ccc;
        border-radius: 6px;
        padding: 8px 10px;
        font-size: 11px;
        outline: none;
        background: transparent;
        transition: box-shadow 0.3s ease;
        height: 30px;
        color: #666;
    }

        .input-group-floating .form-control:focus,
        .input-group-floating .form-select:focus {
            /*box-shadow: 0 -2px 6px rgba(74,144,226,0.4);*/
        }

    /* LABEL base */
    .input-group-floating label {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        padding: 0 10px;
        color: #555;
        font-size: 0.85rem;
        pointer-events: none;
        transition: top var(--move-duration) ease, font-size var(--move-duration) ease, color var(--move-duration) ease;
        overflow: hidden;
    }

        /* Capa del fondo animado */
        .input-group-floating label::before {
            content: "";
            position: absolute;
            inset: 0;
            background: transparent;
            border-radius: 4px;
            transform: scaleX(0);
            transform-origin: center;
            transition: transform var(--bg-open-duration) ease;
            z-index: -1;
        }

    /* Estado cuando el input tiene foco o valor */
    .input-group-floating.has-value label,
    .input-group-floating .form-control:focus + label,
    .input-group-floating .form-select:focus + label {
        top: -1px;
        font-size: 0.75rem;
        color: var(--MainColor) !important;
        padding: 0 10px;
        line-height: 1.35;
        display: inline-block;
    }

        /* Cuando sube y pasa el tiempo, se abre el fondo */
        .input-group-floating.has-value label::before,
        .input-group-floating .form-control:focus + label::before,
        .input-group-floating .form-select:focus + label::before {
            background: #9da6af;
            transform: scaleX(1);
            transition-delay: calc(var(--move-duration) + var(--extra-wait)); /* espera 3 s + subida */
        }

    /* Al perder focus, se cierra sin delay */
    .input-group-floating .form-control:not(:focus):placeholder-shown + label::before,
    .input-group-floating .form-select:not(:focus)[value=""] + label::before {
        transform: scaleX(0);
        transition-delay: 0s;
    }

    .input-group-floating .form-select option[value=""] {
        display: none;
    }


/*///////////////////////*/

/* Color por defecto */

/* Color al hacer focus */
input[type="date"]:focus {
    color: var(--MainColor) !important;
}

/* Selecciona un input date que tenga valor */
input[type="date"]:has(value) {
    color: var(--MainColor);
}

/* ---------- CSS: color por clase (más fiable) ---------- */
.input-group-floating input[type="date"] {
    color: var(--cream); /* color cuando está vacío */
    transition: color 0.25s ease;
}

/* Cuando el grupo tiene valor, el date toma color activo */
.input-group-floating.has-value input[type="date"] {
    color: var(--MainColor);
}

/* WebKit (Chrome, Edge, Safari) — forzar que el texto interno herede el color */
.input-group-floating input[type="date"]::-webkit-datetime-edit,
.input-group-floating input[type="date"]::-webkit-datetime-edit-text,
.input-group-floating input[type="date"]::-webkit-datetime-edit-month,
.input-group-floating input[type="date"]::-webkit-datetime-edit-day,
.input-group-floating input[type="date"]::-webkit-datetime-edit-year {
    color: inherit;
}

/*/////////////////////*/

input[type="time"]:focus {
    color: var(--MainColor) !important;
}

/* Selecciona un input date que tenga valor */
input[type="time"]:has(value) {
    color: var(--MainColor);
}

/* ---------- CSS: color por clase (más fiable) ---------- */
.input-group-floating input[type="time"] {
    color: var(--cream); /* color cuando está vacío */
    transition: color 0.25s ease;
}

/* Cuando el grupo tiene valor, el date toma color activo */
.input-group-floating.has-value input[type="time"] {
    color: var(--MainColor);
}

/* WebKit (Chrome, Edge, Safari) — forzar que el texto interno herede el color */
.input-group-floating input[type="time"]::-webkit-datetime-edit,
.input-group-floating input[type="time"]::-webkit-datetime-edit-hour-field,
.input-group-floating input[type="time"]::-webkit-datetime-edit-minute-field,
.input-group-floating input[type="time"]::-webkit-datetime-edit-second-field,
.input-group-floating input[type="time"]::-webkit-datetime-edit-ampm-field {
    color: inherit; /* Hereda el color del input */
}

.input-group-floating input[type="time"]::-webkit-clear-button,
.input-group-floating input[type="time"]::-webkit-inner-spin-button {
    display: none; /* Oculta los botones de limpieza y flechas */
}



/*////////////////////////////////////////////////////////////////////*/



.lblRequired {
    color: red !important;
    font-size: 0.85rem;
    margin: -6px 0 !important; /* margen superior e inferior aún más reducido */
    padding: 0 !important; /* padding siempre 0 */
    line-height: 0.9; /* altura de línea compacta */
    display: block; /* ocupa su propio renglón */
}