/* DeckToggleButtons — ToggleButtons como «radio deck»: una caja por opción,
   icono apilado sobre el label, selección con el primary del panel (borde +
   wash + check de esquina). Markup nativo del ToggleButtons inline (radio
   oculto + label fi-btn por opción).

   CSS PLANO a propósito (nada de @apply): se registra como asset de Filament
   y carga con @filamentStyles en cualquier página — incluidas las que no
   montan el theme del panel (p. ej. harnesses de test) — así que no pasa por
   el build de Tailwind del theme. Colores primary vía var(--primary-*) del
   panel, con fallback azul; grises neutros como literales con override .dark
   (misma familia que los de Filament). */

.fc-fi-fo-toggle-deck.fi-fo-toggle-buttons {
    display: flex;
    gap: 0.5rem;
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > label {
    position: relative;
    width: 100%;
    /* el fi-btn no es un flex-row simple — fija el display para poder apilar */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0.375rem 0.625rem;
    border-radius: 0.625rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    /* el fi-btn dibuja su ring con box-shadow — el deck usa borde real */
    box-shadow: none;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > label:hover {
    border-color: #d1d5db;
    background: #fff;
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > label svg {
    width: 1.3rem;
    height: 1.3rem;
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:checked + label {
    border-color: var(--primary-600, #2563eb);
    box-shadow: 0 0 0 1px var(--primary-600, #2563eb);
    background: var(--primary-50, #eff6ff);
    color: var(--primary-600, #2563eb);
    font-weight: 600;
}

/* El icono necesita su propia regla: el fi-btn de Filament colorea el icono
   checked aparte (`.fi-btn > .fi-icon:is(:checked + label > .fi-icon)` →
   var(--text), pensado para sus botones sólidos de texto blanco) y esa regla
   gana al color heredado del label — sin esto el icono sale blanco. */
.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:checked + label > .fi-icon {
    color: var(--primary-600, #2563eb);
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:checked + label::after {
    content: '✓';
    position: absolute;
    top: 0.3rem;
    inset-inline-end: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: var(--primary-600, #2563eb);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
}

.fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:focus-visible + label {
    outline: 2px solid var(--primary-600, #2563eb);
    outline-offset: 2px;
}

/* Dark: neutros al gris de panel oscuro; el wash primary-50 es un pastel de
   tema claro — pasa a un velo del primary y sube texto/icono a primary-400. */
.dark .fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > label {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.05);
    color: #9ca3af;
}

.dark .fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > label:hover {
    border-color: rgb(255 255 255 / 0.2);
    background: rgb(255 255 255 / 0.05);
}

.dark .fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:checked + label {
    border-color: var(--primary-500, #3b82f6);
    box-shadow: 0 0 0 1px var(--primary-500, #3b82f6);
    background: color-mix(in srgb, var(--primary-400, #60a5fa) 12%, transparent);
    color: var(--primary-400, #60a5fa);
}

.dark .fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:checked + label > .fi-icon {
    color: var(--primary-400, #60a5fa);
}

.dark .fc-fi-fo-toggle-deck .fi-fo-toggle-buttons-btn-ctn > input:focus-visible + label {
    outline-color: var(--primary-400, #60a5fa);
}