/* ======================================================
   CAMPO PERSONALIZADO CON LABEL FLOTANTE (fl-field)
   Reemplaza mdui-text-field con control total sobre estilos.
   Uso: <div class="fl-field"> <input class="fl-input" placeholder=" "> <label class="fl-label">Texto</label> </div>
   ====================================================== */

.fl-field {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
}

input.fl-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    font-family: var(--fontfamilyroboto), sans-serif;
    color: var(--font-color);
    background: transparent;
    border: 1px solid var(--verde-claro);
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, border-width 0.2s;
    caret-color: var(--verde-principal);
}

.fl-field:hover .fl-input:not(:disabled) {
    border-color: var(--verde-principal);
}

input.fl-input:focus,
input.fl-input[type="date"]:focus {
    border-color: var(--verde-principal);
    outline: 1px solid var(--verde-principal);
    outline-offset: -1px;
    background-color: transparent;
}

.fl-label {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-family: var(--fontfamilyroboto), sans-serif;
    color: #777777;
    pointer-events: none;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
    background: var(--bg-light-green);
    padding: 0 4px;
    line-height: 1;
}

/* Label flota cuando el input tiene foco o tiene valor */
.fl-input:focus + .fl-label,
.fl-input:not(:placeholder-shown) + .fl-label {
    top: 0;
    font-size: 12px;
    color: var(--verde-principal);
}

/* Al perder foco con valor: queda arriba en gris */
.fl-input:not(:focus):not(:placeholder-shown) + .fl-label {
    color: #777777;
}


/* Fecha: fondo transparente para heredar verde del padre */
input.fl-input[type="date"]::-webkit-datetime-edit {
    background-color: transparent;
    padding: 0;
    width: 100%;
}

input.fl-input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    background-color: transparent;
}

/* Fecha: el label siempre flota (el browser muestra su propio formato) */
input.fl-input[type="date"] + .fl-label {
    top: 0;
    font-size: 12px;
    color: #777777;
}

input.fl-input[type="date"]:focus + .fl-label {
    color: var(--verde-principal);
}

/* Select dentro de fl-field */
select.fl-select {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 16px;
    font-family: var(--fontfamilyroboto), sans-serif;
    color: var(--font-color);
    border: 1px solid var(--verde-claro);
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.2s;
}

.fl-field:hover .fl-select:not(:disabled) {
    border-color: var(--verde-principal);
}

select.fl-select:focus {
    background-color: transparent;
    outline: 1px solid var(--verde-principal);
    outline-offset: -1px;
    border-color: var(--verde-principal);
}

select.fl-select option,
select.comm-filter option {
    background-color: var(--verde-claro);
}

select.fl-select option:hover,
select.comm-filter option:hover {
    background-color: var(--verde-principal);
    color: #fff;
}

/* Label del select: flotado cuando tiene valor o foco */
select.fl-select:focus + .fl-label,
select.fl-select:valid + .fl-label,
select.fl-select:has(option:checked:not([value=""])) + .fl-label {
    top: 0;
    font-size: 12px;
    color: var(--verde-principal);
}

select.fl-select:not(:focus):valid + .fl-label,
select.fl-select:not(:focus):has(option:checked:not([value=""])) + .fl-label {
    color: #777777;
}

/* Fondo del label del select igual al padre */
select.fl-select + .fl-label {
    background: var(--bg-light-green);
}

/* Textarea dentro de fl-field */
textarea.fl-input {
    display: block;
    width: 100%;
    padding: 14px 10px 8px;
    font-size: 16px;
    font-family: var(--fontfamilyroboto), sans-serif;
    color: var(--font-color);
    background: transparent;
    border: 1px solid var(--verde-claro);
    border-radius: 4px;
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    line-height: 1.4;
    text-align: left;
    transition: border-color 0.2s;
    caret-color: var(--verde-principal);
}

textarea.fl-input:focus {
    border-color: var(--verde-principal);
    outline: 1px solid var(--verde-principal);
    outline-offset: -1px;
    background-color: transparent;
}

textarea.fl-input + .fl-label {
    top: 14px;
    transform: translateY(-50%);
}

textarea.fl-input:focus + .fl-label,
textarea.fl-input:not(:placeholder-shown) + .fl-label {
    top: 0;
    font-size: 12px;
    color: var(--verde-principal);
    transform: translateY(-50%);
}

textarea.fl-input:not(:focus):not(:placeholder-shown) + .fl-label {
    color: #777777;
    transform: translateY(-50%);
}

/* Variante textarea de tamaño fijo (sin resize) — usada en enviar circular */
textarea.fl-input.fl-textarea-memo {
    height: 110px;
    resize: none;
}

/* fl-has-icon sobre textarea: label siempre en el borde superior */
.fl-has-icon textarea.fl-input + .fl-label {
    top: 0;
    font-size: 12px;
    color: #777777;
    transform: translateY(-50%);
}

/* Icono en textarea: alineado con la primera línea de texto, no centrado verticalmente */
.fl-has-icon[data-icon] textarea.fl-input {
    background-position: 8px 14px;
}

/* Estado de error */
.fl-field.fl-error .fl-input {
    border-color: #b3261e;
    border-width: 2px;
}

.fl-field.fl-error .fl-input:focus {
    border-color: #b3261e;
}

.fl-field.fl-error .fl-label {
    color: #b3261e;
}

/* -----------------------------------------------
   Custom Province Dropdown (fl-province)
----------------------------------------------- */
.fl-province-wrap {
    position: relative;
    cursor: pointer;
    user-select: none;
}

.fl-province-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    font-size: 16px;
    font-family: var(--fontfamilyroboto), sans-serif;
    color: var(--font-color);
    background: transparent;
    border: 1px solid var(--verde-claro);
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s;
    cursor: pointer;
}

.fl-province-trigger:hover {
    border-color: var(--verde-principal);
    outline: 2px solid var(--verde-claro);
}

.fl-province-wrap.open .fl-province-trigger,
.fl-province-trigger:focus {
    border-color: var(--verde-principal);
    outline: 1px solid var(--verde-principal);
    outline-offset: -1px;
}

.fl-province-selected-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    overflow: hidden;
}

.fl-province-selected-content img {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.fl-province-selected-content span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.fl-province-arrow {
    color: #777;
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 4px;
    transition: transform 0.2s;
}

.fl-province-wrap.open .fl-province-arrow {
    transform: rotate(180deg);
}

.fl-province-dropdown {
    display: none;
    position: fixed;
    max-height: 220px;
    overflow-y: auto;
    background: var(--verde-claro);
    border: 1px solid var(--verde-principal);
    border-radius: 4px;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.fl-province-wrap.open .fl-province-dropdown {
    display: block;
}

.fl-province-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    font-size: 14px;
    font-family: var(--fontfamilyroboto), sans-serif;
    color: var(--font-color);
    cursor: pointer;
    transition: background-color 0.12s;
}

.fl-province-option:hover {
    background-color: rgba(0,0,0,0.08);
}

.fl-province-option.selected {
    background-color: rgba(0,0,0,0.1);
    font-weight: 500;
}

.fl-province-option.fl-highlighted {
    background-color: rgba(46, 125, 50, 0.18);
    outline: 1px solid var(--verde-principal);
}

.fl-province-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.fl-province-wrap .fl-label {
    background: var(--bg-light-green);
}

.fl-province-wrap.open .fl-label,
.fl-province-wrap.has-value .fl-label {
    top: 0;
    font-size: 12px;
    color: var(--verde-principal);
}

.fl-province-wrap.has-value:not(.open) .fl-label {
    color: #777;
}

/* Icono decorativo via background-image — solo cuando hay data-icon real */
.fl-has-icon[data-icon] .fl-input {
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: 8px center;
    background-size: 15px 15px;
}

.fl-has-icon[data-icon="person"] .fl-input {
    background-image: url('../images/icons/person-green.svg');
}

.fl-has-icon[data-icon="phone"] .fl-input {
    background-image: url('../images/icons/phone-green.svg');
}

.fl-has-icon[data-icon="document"] .fl-input {
    background-image: url('../images/icons/customerinfo-green.svg');
}

.fl-has-icon[data-icon="email"] .fl-input {
    background-image: url('../images/icons/email-green.svg');
}

.fl-has-icon[data-icon="pindrop"] .fl-input {
    background-image: url('../images/icons/pindrop-green.svg');
}

.fl-has-icon[data-icon="company"] .fl-input {
    background-image: url('../images/icons/company-green.svg');
}

.fl-has-icon[data-icon="package"] .fl-input {
    background-image: url('../images/icons/package-green.svg');
}

.fl-has-icon[data-icon="number"] .fl-input {
    background-image: url('../images/icons/number-green.svg');
}

.fl-has-icon[data-icon="apartment"] .fl-input {
    background-image: url('../images/icons/apartment-green.svg');
}

.fl-has-icon[data-icon="stairs"] .fl-input {
    background-image: url('../images/icons/stairs-green.svg');
}

.fl-has-icon[data-icon="layers"] .fl-input {
    background-image: url('../images/icons/layers-green.svg');
}

.fl-has-icon[data-icon="door"] .fl-input {
    background-image: url('../images/icons/door-green.svg');
}

.fl-has-icon[data-icon="note"] .fl-input {
    background-image: url('../images/icons/note-green.svg');
}

.fl-has-icon[data-icon="creditcard"] .fl-input {
    background-image: url('../images/icons/creditcard-green.svg');
}

.fl-has-icon[data-icon="envelope"] .fl-input {
    background-image: url('../images/icons/envelope-green.svg');
}

.fl-has-icon[data-icon="city"] .fl-input {
    background-image: url('../images/icons/city-green.svg');
}

.fl-has-icon[data-icon="lightning"] .fl-input {
    background-image: url('../images/icons/lightning-green.svg');
}

.fl-has-icon[data-icon="flame"] .fl-input {
    background-image: url('../images/icons/flame-green.svg');
}

.fl-has-icon[data-icon="mobile"] .fl-input {
    background-image: url('../images/icons/mobile-green.svg');
}

.fl-has-icon[data-icon="wifi"] .fl-input {
    background-image: url('../images/icons/wifi-green.svg');
}

.fl-has-icon[data-icon="headset"] .fl-input {
    background-image: url('../images/icons/headset-green.svg');
}

.fl-has-icon[data-icon="router"] .fl-input {
    background-image: url('../images/icons/router-green.svg');
}

.fl-has-icon[data-icon="client"] .fl-input {
    background-image: url('../images/icons/client-green.svg');
}

.fl-has-icon[data-icon="password"] .fl-input {
    background-image: url('../images/icons/password-green.svg');
}

.fl-has-icon .fl-label {
    top: 0;
    font-size: 12px;
    color: #777777;
}

.fl-has-icon .fl-input:focus + .fl-label {
    color: var(--verde-principal);
}

/* Password toggle */
.fl-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;

}

.fl-password-toggle img {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.fl-password-toggle:hover img {
    opacity: 1;
}

.fl-field:has(.fl-password-toggle) .fl-input {
    padding-right: 34px;
}

/* Input deshabilitado */
.fl-input:disabled {
    border-color: #dddddd;
    color: #aaaaaa;
    cursor: not-allowed;
}

.fl-input:disabled + .fl-label {
    color: #aaaaaa;
}

.form-input-75px{
    padding: 0;
    width: 75px;
}

.form-input-100px{
    padding: 0;
    width: 100px;
}

.form-input-200px{
    padding: 0;
    width: 200px;
}

.form-input-110px{
    padding: 0;
    width: 110px;
}

.form-input-150px{
    padding: 0;
    width: 150px;
}

.form-input-300px{
    padding: 0;
    width: 300px;
}

.form-input-350px{
    padding: 0;
    width: 350px;
}

.form-input-400px{
    padding: 0;
    width: 400px;
}

.form-input-600px{
    padding: 0;
    width: 600px;
}

.form-input-flex{
    padding: 0;
    flex: 1;
    min-width: 0;
}

.form-full{
    width: 100%;
    text-align: left;
    margin-top: 10px;
}

.form-full-button{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
}

.form-group-bottom{
    margin: 0 0 10px 0;
}