/*
 * Estructura común de todos los temas del panel admin.
 *
 * NO contiene valores de diseño: todo sale de variables `--th-*` que define el
 * tema activo (public/css/app/themes/<tema>.css). Para cambiar de tema basta con
 * cambiar `ADMIN_THEME` en .env (ver config/admin-theme.php).
 *
 * Se carga desde AdminPanelProvider (render hook HEAD_END) sin capas (@layer),
 * así que gana siempre a los estilos de Filament, que viven en capas de Tailwind.
 *
 * Variables que debe definir cada tema (ver themes/apple.css como referencia):
 *   Color:      --th-ink --th-ink-soft --th-muted --th-muted-strong --th-placeholder
 *               --th-hairline --th-canvas --th-paper --th-surface-alt --th-wash
 *               --th-wash-hover --th-accent --th-accent-hover --th-accent-fg
 *               --th-link --th-alert
 *   Tipografía: --th-font-text --th-font-display --th-tracking-body
 *               --th-h1-size/-leading/-weight/-tracking  --th-subhead-size
 *               --th-h2-size/-weight/-tracking  --th-title-size/-weight/-tracking
 *               --th-stat-size/-weight/-tracking/-label-transform
 *               --th-thead-size/-weight/-tracking/-transform  --th-btn-weight
 *               --th-btn-lg-size
 *   Forma:      --th-radius-card/-btn/-input/-badge/-panel/-item/-check
 *   Elevación:  --th-shadow-card --th-shadow-float --th-divider
 *   Layout:     --th-card-pad --th-topbar-height --th-topbar-bg --th-topbar-blur
 *   Inputs:     --th-input-bg --th-input-bg-hover --th-input-focus-shadow
 *               --th-input-invalid-shadow
 *   Botones:    --th-btn-outline-shadow
 *
 * Variables opcionales (si no se definen, se usa el valor entre paréntesis):
 *   --th-heading-ink (--th-ink)          color de títulos
 *   --th-btn-primary-bg/-fg/-hover-bg/-shadow   botón primario (acento / acento-fg / acento-hover / ninguna)
 *   --th-page-active-bg/-fg              página activa de la paginación (ink-soft / accent-fg)
 *   --th-nav-active-bg/-fg               ítem activo del menú (wash / ink)
 *   --th-input-shadow, --th-input-shadow-hover   borde en reposo de inputs (ninguno)
 *   --th-badge-bg/-fg/-shadow            badges neutros (canvas / muted-strong / ninguna)
 *   --th-text (--th-ink)                 texto de cuerpo y celdas de tabla
 *   --th-thead-color (--th-muted)        cabecera de tabla
 *   --th-row-selected, --th-strip-bg (--th-canvas)   fila seleccionada; franjas de selección/indicadores
 *   --th-btn-secondary-bg (--th-wash), --th-btn-secondary-shadow (ninguna)   relleno y contorno de los botones grises
 *   --th-check-bg/-ring (--th-accent)    checkbox y radio marcados
 *   --th-nav-hover-bg (--th-wash), --th-item-hover (--th-canvas), --th-tab-hover
 *   --th-font-label (heredada), --th-badge-transform (none), --th-badge-tracking (heredado)   fuente y estilo de etiquetas: cabecera de tabla y badges
 *   --th-font-features (normal), --th-color-scheme (light: usar `dark` en temas oscuros)
 */

/* ── Base ────────────────────────────────────────────────────────────────── */

html,
body,
.fi-body {
    font-family: var(--th-font-text);
    font-feature-settings: var(--th-font-features, normal);
    color: var(--th-text, var(--th-ink));
    color-scheme: var(--th-color-scheme, light);
    letter-spacing: var(--th-tracking-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fi-body {
    background-color: var(--th-canvas);
}

.fi-ta-table,
.fi-in-text,
.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
}

/* Enlaces en línea: subrayado solo en hover, sin cajas */
.fi-link,
.fi-in-text a,
.fi-fo-field-content a {
    color: var(--th-link);
    background: none;
}

.fi-link:hover,
.fi-in-text a:hover,
.fi-fo-field-content a:hover {
    text-decoration: underline;
}

:focus-visible {
    outline-color: var(--th-accent);
}

/* ── Tipografía de títulos ───────────────────────────────────────────────── */

.fi-header-heading,
.fi-simple-header-heading {
    font-family: var(--th-font-display);
    font-size: var(--th-h1-size);
    line-height: var(--th-h1-leading);
    font-weight: var(--th-h1-weight);
    letter-spacing: var(--th-h1-tracking);
    color: var(--th-heading-ink, var(--th-ink));
}

.fi-header-subheading,
.fi-simple-header-subheading {
    font-size: var(--th-subhead-size);
    color: var(--th-muted);
}

.fi-section-header-heading,
.fi-modal-heading,
.fi-ta-header-heading,
.fi-ta-filters-heading {
    font-family: var(--th-font-display);
    font-weight: var(--th-h2-weight);
    letter-spacing: var(--th-h2-tracking);
    color: var(--th-heading-ink, var(--th-ink));
}

.fi-section-header-heading {
    font-size: var(--th-h2-size);
    line-height: 1.25;
}

.fi-section-header-description,
.fi-modal-description,
.fi-ta-header-description {
    color: var(--th-muted);
}

/* Título de tabla (render hook TOOLBAR_START) */
.fi-table-toolbar-title {
    font-family: var(--th-font-display);
    font-size: var(--th-title-size);
    line-height: 1.15;
    font-weight: var(--th-title-weight);
    letter-spacing: var(--th-title-tracking);
    color: var(--th-heading-ink, var(--th-ink));
}

/* ── Barra de navegación superior ────────────────────────────────────────── */

.fi-topbar {
    min-height: var(--th-topbar-height);
    background-color: var(--th-topbar-bg);
    -webkit-backdrop-filter: var(--th-topbar-blur);
    backdrop-filter: var(--th-topbar-blur);
    box-shadow: var(--th-topbar-shadow, none);
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
}

.fi-topbar-item-btn {
    border-radius: var(--th-radius-btn);
    padding: 0.375rem 0.875rem;
    gap: 0.375rem;
}

.fi-topbar-item-btn:hover,
.fi-topbar-item-btn:focus-visible {
    background-color: var(--th-nav-hover-bg, var(--th-wash));
}

.fi-topbar-item-label {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--th-muted-strong);
}

.fi-topbar-item-btn > .fi-icon {
    color: var(--th-muted);
}

.fi-topbar-item.fi-active .fi-topbar-item-btn {
    background-color: var(--th-nav-active-bg, var(--th-wash));
}

.fi-topbar-item.fi-active .fi-topbar-item-label {
    color: var(--th-nav-active-fg, var(--th-ink));
    font-weight: 600;
}

.fi-topbar-item.fi-active .fi-topbar-item-btn > .fi-icon {
    color: var(--th-nav-active-fg, var(--th-ink));
}

/* ── Página ──────────────────────────────────────────────────────────────── */

.fi-page-header-main-ctn {
    row-gap: 1.75rem;
    padding-block: 2rem;
}

.fi-page-content {
    row-gap: 1.75rem;
}

/* ── Tarjetas ────────────────────────────────────────────────────────────── */

.fi-ta-ctn,
.fi-section:not(.fi-aside):not(.fi-section-not-contained),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-simple-main,
.fi-in-repeatable-item,
.fi-fo-repeater-item,
.fi-fi-tabs,
.fi-sc-tabs {
    border-radius: var(--th-radius-card);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    background-color: var(--th-paper);
}

.fi-ta-ctn,
.fi-section:not(.fi-aside):not(.fi-section-not-contained),
.fi-section.fi-aside > .fi-section-content-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-chart,
.fi-simple-main {
    /* Filament dibuja el borde con `ring`, que es un box-shadow */
    box-shadow: var(--th-shadow-card) !important;
}

.fi-section:not(.fi-aside).fi-compact {
    border-radius: var(--th-radius-card);
}

.fi-section.fi-secondary {
    background-color: var(--th-surface-alt);
}

.fi-section:not(.fi-aside):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: var(--th-card-pad);
}

.fi-section:not(.fi-aside):not(.fi-section-not-contained) > .fi-section-header {
    padding: var(--th-card-pad);
}

.fi-section.fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-top-color: var(--th-divider);
}

.fi-simple-main {
    padding: calc(var(--th-card-pad) + 0.75rem);
}

.fi-simple-layout {
    background-color: var(--th-canvas);
}

.fi-simple-layout .fi-logo {
    height: 3rem !important;
}

/* ── Tabla ───────────────────────────────────────────────────────────────── */

.fi-ta-ctn:not(.fi-ta-ctn-with-header) {
    overflow: hidden;
}

.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-ctn .fi-ta-filters-above-content-ctn,
.fi-ta-ctn .fi-ta-filters.fi-ta-filters-below-content,
.fi-ta-ctn .fi-pagination,
.fi-ta-ctn .fi-ta-header-ctn {
    border-color: var(--th-divider);
}

.fi-ta-ctn .fi-ta-header-toolbar {
    padding: 1.25rem var(--th-card-pad);
}

.fi-ta-table {
    border-color: var(--th-divider);
}

/* divide-y de Tailwind pinta cada fila con su border-top */
.fi-ta-table > tbody > tr,
.fi-ta-table > thead > tr,
.fi-ta-table > tfoot > tr {
    border-color: var(--th-divider);
}

.fi-ta-table > thead > tr {
    background-color: transparent;
}

.fi-ta-header-cell {
    background-color: transparent;
    padding-block: 0.875rem;
    font-size: var(--th-thead-size);
    font-weight: var(--th-thead-weight);
    letter-spacing: var(--th-thead-tracking);
    text-transform: var(--th-thead-transform);
    font-family: var(--th-font-label, inherit);
    color: var(--th-thead-color, var(--th-muted));
    border-color: var(--th-divider);
}

.fi-ta-header-cell .fi-ta-header-cell-sort-btn,
.fi-ta-header-cell .fi-ta-header-cell-sort-icon {
    color: inherit;
}

.fi-ta-header-cell.fi-ta-header-cell-sorted,
.fi-ta-header-cell.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn {
    color: var(--th-ink);
}

.fi-ta-row {
    transition: background-color 120ms ease;
}

.fi-ta-row:hover {
    background-color: var(--th-surface-alt);
}

.fi-ta-row.fi-selected,
.fi-ta-row.fi-striped {
    background-color: var(--th-row-selected, var(--th-canvas));
}

.fi-ta-cell,
.fi-ta-text {
    font-size: 0.875rem;
    color: var(--th-text, var(--th-ink));
}

.fi-ta-text-item.fi-color-gray,
.fi-ta-text .fi-color-gray {
    color: var(--th-muted);
}

.fi-ta-reorder-indicator,
.fi-ta-selection-indicator,
.fi-ta-filter-indicators {
    background-color: var(--th-strip-bg, var(--th-canvas));
    border-color: transparent;
}

.fi-ta-empty-state {
    background-color: transparent;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */

.fi-btn {
    border-radius: var(--th-radius-btn);
    font-weight: var(--th-btn-weight);
    padding-inline: 1rem;
    padding-block: 0.5rem;
    box-shadow: none;
    --tw-shadow: 0 0 #0000;
}

.fi-btn.fi-size-xs {
    padding-inline: 0.75rem;
    padding-block: 0.3125rem;
}

.fi-btn.fi-size-sm {
    padding-inline: 0.875rem;
    padding-block: 0.375rem;
}

.fi-btn.fi-size-lg,
.fi-btn.fi-size-xl {
    padding-inline: 1.25rem;
    padding-block: 0.6875rem;
    font-size: var(--th-btn-lg-size);
}

/* Alta (relleno): solo el color primario lleva el acento del tema */
.fi-btn.fi-color-primary:not(.fi-outlined):not(label) {
    background-color: var(--th-btn-primary-bg, var(--th-accent));
    color: var(--th-btn-primary-fg, var(--th-accent-fg));
    box-shadow: var(--th-btn-primary-shadow, none);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--th-btn-primary-hover-bg, var(--th-accent-hover));
}

.fi-btn.fi-color-primary:not(.fi-outlined) > .fi-icon {
    color: var(--th-btn-primary-fg, var(--th-accent-fg));
}

/* Media (tonal): botones por defecto y grises */
.fi-btn:not(.fi-outlined):not(.fi-color),
.fi-btn.fi-color-gray:not(.fi-outlined):not(label) {
    background-color: var(--th-btn-secondary-bg, var(--th-wash));
    color: var(--th-ink);
    box-shadow: var(--th-btn-secondary-shadow, none);
}

.fi-btn:not(.fi-outlined):not(.fi-color):not(.fi-disabled):not([disabled]):hover,
.fi-btn.fi-color-gray:not(.fi-outlined):not(label):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--th-wash-hover);
}

.fi-btn:not(.fi-outlined):not(.fi-color) > .fi-icon,
.fi-btn.fi-color-gray > .fi-icon {
    color: var(--th-muted-strong);
}

.fi-btn:not(.fi-color),
label.fi-btn {
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: var(--th-btn-secondary-shadow, none);
}

.fi-btn.fi-color-primary {
    --tw-ring-shadow: 0 0 #0000;
}

/* Outline: contorno definido por el tema */
.fi-btn.fi-outlined {
    box-shadow: var(--th-btn-outline-shadow);
    background-color: transparent;
    color: var(--th-ink);
}

.fi-btn.fi-outlined:not(.fi-disabled):not([disabled]):hover {
    background-color: var(--th-canvas);
}

.fi-icon-btn {
    border-radius: var(--th-radius-btn);
}

.fi-btn-group {
    border-radius: var(--th-radius-btn);
    box-shadow: none;
    background-color: var(--th-wash);
    overflow: hidden;
}

.fi-btn-group > .fi-btn {
    box-shadow: none !important;
    background-color: transparent;
}

/* ── Badges ──────────────────────────────────────────────────────────────── */

.fi-badge {
    border-radius: var(--th-radius-badge);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    padding-inline: 0.625rem;
    font-weight: 500;
    font-family: var(--th-font-label, inherit);
    text-transform: var(--th-badge-transform, none);
    letter-spacing: var(--th-badge-tracking, inherit);
}

.fi-badge:not(.fi-color),
.fi-badge.fi-color-gray {
    background-color: var(--th-badge-bg, var(--th-canvas));
    color: var(--th-badge-fg, var(--th-muted-strong));
    box-shadow: var(--th-badge-shadow, none);
}

.fi-badge.fi-color-warning {
    color: var(--th-alert);
}

/* ── Formularios ─────────────────────────────────────────────────────────── */

.fi-fo-field-label,
.fi-fo-field-label-content {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--th-ink);
}

.fi-fo-field-label-required-mark {
    color: var(--th-alert);
}

.fi-input-wrp {
    border-radius: var(--th-radius-input);
    background-color: var(--th-input-bg);
    box-shadow: var(--th-input-shadow, none);
    --tw-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}

.fi-input-wrp:not(.fi-disabled):hover {
    background-color: var(--th-input-bg-hover);
    box-shadow: var(--th-input-shadow-hover, var(--th-input-shadow, none));
}

.fi-input-wrp:not(.fi-disabled):focus-within {
    background-color: var(--th-paper);
    box-shadow: var(--th-input-focus-shadow) !important;
}

.fi-input-wrp.fi-invalid {
    box-shadow: var(--th-input-invalid-shadow) !important;
}

.fi-input-wrp.fi-disabled {
    background-color: var(--th-surface-alt);
}

.fi-input-wrp .fi-input-wrp-prefix:not(.fi-inline),
.fi-input-wrp .fi-input-wrp-suffix:not(.fi-inline) {
    border-color: var(--th-wash);
}

.fi-input,
.fi-select-input,
.fi-fo-select .fi-input {
    color: var(--th-ink);
}

.fi-input::placeholder {
    color: var(--th-placeholder);
}

.fi-checkbox-input,
.fi-radio-input {
    box-shadow: none;
    --tw-ring-color: var(--th-hairline);
}

/* Sin marcar: borde visible (el box-shadow: none de arriba quitaba el anillo y la casilla no se veía) */
.fi-checkbox-input:not(:checked),
.fi-radio-input:not(:checked) {
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--th-ink) 28%, transparent);
}

.fi-checkbox-input {
    border-radius: var(--th-radius-check);
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    background-color: var(--th-check-bg, var(--th-accent));
    --tw-ring-color: var(--th-check-ring, var(--th-accent));
}

.fi-toggle {
    box-shadow: none;
}

.fi-toggle.fi-color {
    background-color: var(--th-hairline);
}

.fi-toggle.fi-toggle-on {
    background-color: var(--th-accent);
}

/* ── Paginación ──────────────────────────────────────────────────────────── */

.fi-pagination-items {
    background-color: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    gap: 0.25rem;
}

.fi-pagination-item {
    border: 0;
}

.fi-pagination-item-btn {
    border-radius: var(--th-radius-btn) !important;
    min-width: 2.25rem;
    justify-content: center;
}

.fi-pagination-item-btn:enabled:hover {
    background-color: var(--th-wash);
}

.fi-pagination-item.fi-active .fi-pagination-item-btn {
    background-color: var(--th-page-active-bg, var(--th-ink-soft));
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: var(--th-page-active-fg, var(--th-accent-fg));
    font-weight: 600;
}

/* ── Modales, menús y notificaciones (superficies flotantes) ─────────────── */

.fi-modal-window {
    border-radius: var(--th-radius-card);
    box-shadow: var(--th-shadow-float) !important;
    --tw-ring-shadow: 0 0 #0000;
    background-color: var(--th-paper);
}

.fi-modal.fi-modal-slide-over .fi-modal-window {
    border-radius: var(--th-radius-card) 0 0 var(--th-radius-card);
}

.fi-modal-close-overlay {
    background-color: var(--th-overlay);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fi-modal-header,
.fi-modal-footer,
.fi-modal-content {
    border-color: var(--th-divider);
}

.fi-dropdown-panel {
    border-radius: var(--th-radius-panel);
    background-color: var(--th-paper);
    box-shadow: var(--th-shadow-float) !important;
    --tw-ring-shadow: 0 0 #0000;
    padding: 0.375rem;
}

.fi-dropdown-list-item {
    border-radius: var(--th-radius-item);
}

.fi-dropdown-list-item:hover,
.fi-dropdown-list-item:focus-visible {
    background-color: var(--th-item-hover, var(--th-canvas));
}

.fi-dropdown-list-item-label {
    color: var(--th-ink);
}

.tippy-box {
    border-radius: var(--th-radius-item);
}

.fi-no-notification {
    border-radius: var(--th-radius-panel);
    box-shadow: var(--th-shadow-float) !important;
    background-color: var(--th-paper);
    --tw-ring-shadow: 0 0 #0000;
}

/* ── Pestañas ────────────────────────────────────────────────────────────── */

.fi-tabs {
    background-color: var(--th-wash);
    border-radius: var(--th-radius-btn);
    padding: 0.25rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-tabs-item {
    border-radius: var(--th-radius-btn);
    font-weight: 400;
    color: var(--th-muted-strong);
}

.fi-tabs-item.fi-active {
    background-color: var(--th-paper);
    color: var(--th-ink);
    font-weight: 600;
}

.fi-tabs-item:hover:not(.fi-active) {
    background-color: var(--th-tab-hover, rgba(255, 255, 255, 0.6));
}

.fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-tabs-item.fi-active .fi-icon {
    color: var(--th-ink);
}

/* ── Migas de pan ────────────────────────────────────────────────────────── */

.fi-breadcrumbs-item-label {
    color: var(--th-muted);
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--th-ink);
}

/* ── Widgets de estadísticas ─────────────────────────────────────────────── */

.fi-wi-stats-overview-stat {
    padding: var(--th-card-pad);
}

.fi-wi-stats-overview-stat-label {
    color: var(--th-muted);
    font-size: 0.875rem;
    text-transform: var(--th-stat-label-transform);
}

.fi-wi-stats-overview-stat-value {
    font-family: var(--th-font-display);
    font-size: var(--th-stat-size);
    line-height: 1.2;
    font-weight: var(--th-stat-weight);
    letter-spacing: var(--th-stat-tracking);
    color: var(--th-heading-ink, var(--th-ink));
}

/* ── Infolists ───────────────────────────────────────────────────────────── */

.fi-in-entry-label,
.fi-in-entry-label-content {
    color: var(--th-muted);
    font-weight: 400;
    font-size: 0.8125rem;
}

/* ── Scrollbars discretos ────────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--th-hairline) transparent;
}