/* dropdown.css — apariencia del Component dropdown.js. Core (flotante-core.js) solo posiciona el nodo
   (top/left fixed, anclado a un elemento) — todo lo visual vive acá, mismo contrato que modal.css.
   SPRINT "Videos · Application Layout" (ago 2026) — retematizado con los tokens del Foundation (--bs-*,
   ver bootstrap5-tema.css) para que este dropdown propio del Core se vea idéntico al .dropdown-menu
   nativo de Bootstrap 5 que ya tematiza ese archivo — mismo radio, misma sombra, mismo tratamiento de
   hover. Sigue siendo un Component 100% del Core (dropdownAbrir/dropdownCerrar): Bootstrap solo aporta
   los valores de apariencia vía variables, nunca su JS. Hoy Videos es el único consumidor de este
   Component en todo IdeoCore. */

.flotante-dropdown {
    min-width: 190px;
    background: #fff;
    border: 0;
    border-radius: var(--bs-border-radius-lg, .75rem);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    padding: .375rem;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .12s ease, transform .12s ease;
}

.flotante-dropdown--visible {
    opacity: 1;
    transform: translateY(0);
}

.flotante-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: .5rem .75rem;
    font-size: .8125rem;
    line-height: 1.3;
    border-radius: var(--bs-border-radius-sm, .375rem);
    cursor: pointer;
    color: var(--bs-body-color, #344054);
}

.flotante-dropdown-item:hover,
.flotante-dropdown-item:focus {
    background: var(--bs-tertiary-bg, #eef0f3);
    outline: none;
}

/* ➖ Separador entre grupos de items — ej. antes de una acción destructiva. */
.flotante-dropdown-separador {
    border: none;
    border-top: 1px solid var(--bs-border-color, #e4e7ec);
    margin: 4px 2px;
}

/* 🔴 Acción destructiva (eliminar, etc.) — mismo item, solo cambia el color de foreground
   (--bs-danger). El hover usa el mismo fondo neutro que cualquier otro item (--bs-tertiary-bg), no un
   fondo rosa propio — el rojo del texto ya comunica "peligro" de sobra; un tinte de color encima se leía
   como un error de estilo, no como una señal intencional (docs/04-ui.md § I). */
.flotante-dropdown-item--peligro {
    color: var(--bs-danger, #f33f48);
}
.flotante-dropdown-item--peligro:hover,
.flotante-dropdown-item--peligro:focus {
    background: var(--bs-tertiary-bg, #eef0f3);
}