/** form-floating + icono. Depende de forms-floating.css */

.floating-field-icon {
    --floating-inner-height: calc(var(--floating-control-height) - 4px);
    --r-dcha: calc(var(--floating-radius) - 2px);
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    border: 2px solid var(--floating-border);
    border-radius: var(--floating-radius);
    background: var(--floating-bg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.floating-field-icon:hover {
    border-color: var(--floating-border-hover);
}

.floating-field-icon:focus-within {
    border-color: var(--floating-focus);
    box-shadow: var(--floating-shadow);
}

.floating-field-icon:has(.is-invalid) {
    border-color: #ef5350;
    box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.2);
}

.floating-field-icon__badge {
    --lado: var(--floating-inner-height);
    display: grid;
    place-items: center;
    flex: 0 0 var(--lado);
    box-sizing: border-box;
    width: var(--lado);
    height: var(--lado);
    min-width: var(--lado);
    align-self: center;
    margin: 0 0.28rem 0 0.02rem;
    padding: 0;
    border: 2px solid var(--color-granate);
    border-radius: calc(var(--lado) * 0.22);
    color: var(--color-granate);
    font-size: calc(var(--lado) * 0.42);
    line-height: 1;
    background: var(--floating-bg);
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
}

button.floating-field-icon__badge {
    cursor: pointer;
}

.floating-field-icon__badge > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

button.floating-field-icon {
    width: 100%;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.floating-field-icon__floating {
    flex: 1 1 auto;
    align-self: center;
    min-width: 0;
    position: relative;
}

.floating-field-icon__floating.form-floating > label {
    padding: 0.95rem 0 0;
    margin-left: 0;
    z-index: 4;
    pointer-events: none;
}

.floating-field-icon__floating.form-floating > .form-control:focus ~ label,
.floating-field-icon__floating.form-floating > .form-control:not(:placeholder-shown) ~ label,
.floating-field-icon__floating.form-floating > .form-select ~ label,
.floating-field-icon__floating.form-floating > textarea.form-control:focus ~ label,
.floating-field-icon__floating.form-floating > textarea.form-control:not(:placeholder-shown) ~ label {
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    height: auto;
    background-color: var(--floating-bg);
    border-radius: 999px;
    transform: translateY(-0.62rem) translateX(-0.08rem) scale(0.82);
    transform-origin: 0 0;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"]):is(:focus, :not(:placeholder-shown)) ~ label {
    margin-left: 0.28rem;
    transform: translateY(-0.42rem) translateX(-0.06rem) scale(0.82);
}

.floating-field-icon__floating > :is(.form-control, .form-select) {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 var(--r-dcha) var(--r-dcha) 0 !important;
}

.floating-field-icon__floating > :is(.form-control, .form-select):focus {
    outline: none;
}

.floating-field-icon__floating > .form-control:not(textarea),
.floating-field-icon__floating > .form-select {
    box-sizing: border-box;
    height: var(--floating-inner-height) !important;
    min-height: var(--floating-inner-height) !important;
    max-height: var(--floating-inner-height) !important;
    padding-top: 1.05rem;
    padding-bottom: 0.3rem;
    padding-left: 0.4rem;
    line-height: 1.2;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"], [type="time"]) {
    position: relative;
    padding-top: 0.72rem;
    padding-bottom: 0.58rem;
    line-height: 1.25;
    cursor: pointer;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"]):placeholder-shown:not(:focus)::-webkit-datetime-edit,
.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"]):placeholder-shown:not(:focus)::-webkit-datetime-edit-fields-wrapper {
    opacity: 0;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"]):placeholder-shown:not(:focus) {
    color: transparent;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"]):is(:focus, :not(:placeholder-shown)) {
    color: var(--floating-text);
}

.floating-field-icon__floating > .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
    padding-right: 2.25rem;
}

.floating-field-icon__floating:has(> .form-select)::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.2rem;
    border-right: 2px solid var(--floating-text);
    border-bottom: 2px solid var(--floating-text);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 3;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    inset: 0;
    cursor: pointer;
    z-index: 5;
}

.floating-field-icon__floating > .form-control:is([type="date"], [type="datetime-local"])::-moz-calendar-picker-indicator {
    opacity: 0;
}

.floating-field-icon__floating > .form-control[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 5;
}

/* Píldora solo lectura: icono circular + etiqueta (p. ej. Promedio final en evaluaciones) */
.floating-field-icon--etiqueta-pill {
    --floating-control-height: calc(2.35rem + 2px);
    --floating-radius: 9999px;
    --etiqueta-pill-fondo: var(--bs-body-bg, #fff);
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    height: var(--floating-control-height);
    min-height: var(--floating-control-height);
    max-height: var(--floating-control-height);
    padding: 0 0.9rem 0 0;
    background: var(--etiqueta-pill-fondo);
    border-width: 1px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-text-default, #2d2d2d) 14%, var(--color-blanco));
    border-radius: var(--floating-radius);
    box-shadow: none;
    align-items: center;
}

.floating-field-icon--etiqueta-pill:hover,
.floating-field-icon--etiqueta-pill:focus-within {
    border-color: color-mix(in srgb, var(--color-text-default, #2d2d2d) 14%, var(--color-blanco));
    box-shadow: none;
}

[data-theme="dark"] .floating-field-icon--etiqueta-pill {
    --etiqueta-pill-fondo: var(--panel-main-bg, #12100d);
    border-color: var(--overlay-white-15, rgba(255, 255, 255, 0.15));
}

.floating-field-icon--etiqueta-pill .floating-field-icon__badge {
    --icono-lado: calc(var(--floating-control-height) - 0.1rem);
    box-sizing: border-box;
    align-self: center;
    width: var(--icono-lado);
    height: var(--icono-lado);
    min-width: var(--icono-lado);
    flex: 0 0 var(--icono-lado);
    margin: 0 0.55rem 0 0.08rem;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--color-granate, #661414);
    background: var(--etiqueta-pill-fondo);
    color: var(--color-granate, #661414);
    font-size: calc(var(--icono-lado) * 0.46);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}

[data-theme="dark"] .floating-field-icon--etiqueta-pill .floating-field-icon__badge {
    border-color: var(--color-dorado, #c9a227);
    color: var(--color-dorado, #c9a227);
    background: var(--etiqueta-pill-fondo);
}

.floating-field-icon--etiqueta-pill .floating-field-icon__etiqueta {
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-default, #2d2d2d);
    white-space: nowrap;
}

[data-theme="dark"] .floating-field-icon--etiqueta-pill .floating-field-icon__etiqueta {
    color: var(--color-text-default, #f0ebe0);
}

/* Píldora etiqueta + valor o control (Notas obligatorias / Notas válidas en evaluaciones) */
.floating-field-icon--campo-pill {
    --floating-control-height: calc(2.35rem + 2px);
    --floating-radius: 9999px;
    --etiqueta-pill-fondo: var(--bs-body-bg, #fff);
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    height: var(--floating-control-height);
    min-height: var(--floating-control-height);
    max-height: var(--floating-control-height);
    padding: 0 0.55rem 0 0.08rem;
    background: var(--etiqueta-pill-fondo);
    border-width: 1px;
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-text-default, #2d2d2d) 14%, var(--color-blanco));
    border-radius: var(--floating-radius);
    box-shadow: none;
    align-items: center;
    cursor: default;
}

label.floating-field-icon--campo-pill {
    cursor: pointer;
}

.floating-field-icon--campo-pill:hover,
.floating-field-icon--campo-pill:focus-within {
    border-color: color-mix(in srgb, var(--color-text-default, #2d2d2d) 14%, var(--color-blanco));
    box-shadow: none;
}

[data-theme="dark"] .floating-field-icon--campo-pill {
    --etiqueta-pill-fondo: var(--panel-main-bg, #12100d);
    border-color: var(--overlay-white-15, rgba(255, 255, 255, 0.15));
}

.floating-field-icon--campo-pill .floating-field-icon__etiqueta-capsula {
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: calc(var(--floating-control-height) - 0.14rem);
    padding: 0 0.7rem;
    margin-right: 0.45rem;
    border: 2px solid var(--color-granate, #661414);
    border-radius: calc(var(--floating-radius) - 4px);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-text-default, #2d2d2d);
    white-space: nowrap;
    background: var(--etiqueta-pill-fondo);
}

[data-theme="dark"] .floating-field-icon--campo-pill .floating-field-icon__etiqueta-capsula {
    border-color: var(--color-dorado, #c9a227);
    color: var(--color-text-default, #f0ebe0);
}

.floating-field-icon--campo-pill .floating-field-icon__valor {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-default, #2d2d2d);
    padding-right: 0.2rem;
    min-width: 1.1rem;
    text-align: center;
}

.floating-field-icon--campo-pill .floating-field-icon__control {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 0.15rem;
}

.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input {
    --eval-check-palomita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.8 8.2l2.8 2.8 5.6-5.6'/%3E%3C/svg%3E");
    --bs-form-check-input-focus-box-shadow: none;
    float: none;
    flex-shrink: 0;
    margin: 0;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.2rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    box-sizing: border-box;
    background-color: var(--color-crema, #f7f3e8);
    border: 1px solid color-mix(in srgb, var(--color-text-default, #2d2d2d) 22%, var(--color-blanco));
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 0.65rem 0.65rem;
    box-shadow: none;
    outline: none;
}

.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:focus,
.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:focus-visible,
.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:active {
    box-shadow: none;
    outline: none;
    border-color: color-mix(in srgb, var(--color-granate, #661414) 45%, var(--color-blanco));
}

.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:checked {
    background-color: var(--color-granate-active, #9a2d2d);
    border-color: var(--color-granate-active, #9a2d2d);
    background-image: var(--eval-check-palomita);
}

.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:checked:focus,
.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:checked:focus-visible,
.floating-field-icon--campo-pill .floating-field-icon__control .form-check-input:checked:active {
    background-color: var(--color-granate-active, #9a2d2d);
    border-color: var(--color-granate-deep, #661414);
    background-image: var(--eval-check-palomita);
    box-shadow: none;
    outline: none;
}