/**
 * FiBEST design-system compatibility layer.
 * New UI must consume WordPress variables from theme.json through these aliases.
 */
:root {
    --fibest-color-surface: var(--wp--custom--color--surface--default);
    --fibest-color-surface-subtle: var(--wp--custom--color--surface--subtle);
    --fibest-color-surface-strong: var(--wp--custom--color--surface--strong);
    --fibest-color-text: var(--wp--custom--color--text--primary);
    --fibest-color-text-secondary: var(--wp--custom--color--text--secondary);
    --fibest-color-text-inverse: var(--wp--custom--color--text--inverse);
    --fibest-color-border: var(--wp--custom--color--border--default);
    --fibest-color-border-strong: var(--wp--custom--color--border--strong);
    --fibest-color-action: var(--wp--custom--color--action--default);
    --fibest-color-action-hover: var(--wp--custom--color--action--hover);
    --fibest-color-focus: var(--wp--custom--color--action--focus);
    --fibest-color-success: var(--wp--custom--color--status--success);
    --fibest-color-warning: var(--wp--custom--color--status--warning);
    --fibest-color-error: var(--wp--custom--color--status--error);
    --fibest-space-1: var(--wp--preset--spacing--10);
    --fibest-space-2: var(--wp--preset--spacing--20);
    --fibest-space-3: var(--wp--preset--spacing--30);
    --fibest-space-4: var(--wp--preset--spacing--40);
    --fibest-space-5: var(--wp--preset--spacing--50);
    --fibest-space-6: var(--wp--preset--spacing--60);
    --fibest-space-7: var(--wp--preset--spacing--70);
    --fibest-space-8: var(--wp--preset--spacing--80);
    --fibest-radius-sm: var(--wp--preset--border-radius--sm, 4px);
    --fibest-radius-md: var(--wp--preset--border-radius--md, 8px);
    --fibest-radius-lg: var(--wp--preset--border-radius--lg, 12px);
    --fibest-radius-pill: var(--wp--preset--border-radius--pill, 999px);
    --fibest-shadow-sm: var(--wp--preset--shadow--sm);
    --fibest-shadow-md: var(--wp--preset--shadow--md);
    --fibest-shadow-overlay: var(--wp--preset--shadow--overlay);
    --fibest-motion-fast: var(--wp--custom--motion--fast);
    --fibest-motion-standard: var(--wp--custom--motion--standard);
    --fibest-motion-slow: var(--wp--custom--motion--slow);
    --fibest-motion-ease: var(--wp--custom--motion--ease);
}

.is-style-fibest-editorial {
    font-family: var(--wp--preset--font-family--spectral);
    font-style: italic;
}

:where(.fibest-btn, .wp-element-button, .wp-block-button__link, .fibest-field input, .fibest-field select, .fibest-field textarea, .fibest-tabs button, .fibest-pagination a, .fibest-pagination button):focus-visible {
    outline: var(--wp--custom--focus--width) solid var(--fibest-color-focus);
    outline-offset: var(--wp--custom--focus--offset);
}

.fibest-btn,
.wp-element-button,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: var(--fibest-space-3) var(--fibest-space-5);
    border: 1px solid var(--fibest-color-action);
    border-radius: var(--fibest-radius-md);
    font-family: var(--wp--preset--font-family--exo);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fibest-motion-standard) var(--fibest-motion-ease), border-color var(--fibest-motion-standard) var(--fibest-motion-ease), color var(--fibest-motion-standard) var(--fibest-motion-ease), box-shadow var(--fibest-motion-standard) var(--fibest-motion-ease), transform var(--fibest-motion-fast) var(--fibest-motion-ease);
}

.fibest-btn:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
    border-color: var(--fibest-color-action-hover);
}

.fibest-btn:active,
.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(1px);
}

.fibest-btn--sm { min-height: 44px; padding: var(--fibest-space-2) var(--fibest-space-4); font-size: var(--wp--preset--font-size--small); }
.fibest-btn--lg { min-height: 52px; padding: var(--fibest-space-4) var(--fibest-space-6); font-size: var(--wp--preset--font-size--lead); }
.fibest-btn--primary { color: var(--fibest-color-text-inverse); background: var(--fibest-color-action); }
.fibest-btn--primary:hover { background: var(--fibest-color-action-hover); }
.fibest-btn--secondary { color: var(--fibest-color-text-inverse); background: var(--fibest-color-surface-strong); border-color: var(--fibest-color-surface-strong); }
.fibest-btn--outline { color: var(--fibest-color-action); background: var(--fibest-color-surface); }
.fibest-btn--destructive { color: var(--fibest-color-text-inverse); background: var(--fibest-color-error); border-color: var(--fibest-color-error); }
.fibest-btn--text { color: var(--fibest-color-action); background: transparent; border-color: transparent; }
.fibest-btn[disabled], .fibest-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.fibest-field { display: grid; gap: var(--fibest-space-2); margin-bottom: var(--fibest-space-5); }
.fibest-field label { color: var(--fibest-color-text); font-weight: 700; }
.fibest-field input,
.fibest-field select,
.fibest-field textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: var(--fibest-space-3) var(--fibest-space-4);
    color: var(--fibest-color-text);
    background: var(--fibest-color-surface);
    border: 1px solid var(--fibest-color-border-strong);
    border-radius: var(--fibest-radius-md);
    font: inherit;
    transition: border-color var(--fibest-motion-fast) var(--fibest-motion-ease), box-shadow var(--fibest-motion-fast) var(--fibest-motion-ease), background-color var(--fibest-motion-fast) var(--fibest-motion-ease);
}
.fibest-field textarea { min-height: 132px; resize: vertical; }
.fibest-field [aria-invalid="true"] { border-color: var(--fibest-color-error); }
.fibest-field :disabled { color: var(--fibest-color-text-secondary); background: var(--fibest-color-surface-subtle); cursor: not-allowed; }
.fibest-field [readonly] { background: var(--fibest-color-surface-subtle); border-style: dashed; }
.fibest-field-help, .fibest-field-error { margin: 0; font-size: var(--wp--preset--font-size--small); }
.fibest-field-help { color: var(--fibest-color-text-secondary); }
.fibest-field-error { color: var(--fibest-color-error); font-weight: 600; }

.fibest-card {
    padding: var(--fibest-space-5);
    color: var(--fibest-color-text);
    background: var(--fibest-color-surface);
    border: 1px solid var(--fibest-color-border);
    border-radius: var(--fibest-radius-lg);
    box-shadow: var(--fibest-shadow-sm);
}
.fibest-card--interactive { transition: border-color var(--fibest-motion-standard) var(--fibest-motion-ease), box-shadow var(--fibest-motion-standard) var(--fibest-motion-ease), transform var(--fibest-motion-standard) var(--fibest-motion-ease); }
.fibest-card--interactive:hover { border-color: var(--fibest-color-action); box-shadow: var(--fibest-shadow-md); transform: translateY(-2px); }
.fibest-card--highlighted { border-color: var(--fibest-color-action); border-width: 2px; }
.fibest-card--empty { text-align: center; background: var(--fibest-color-surface-subtle); border-style: dashed; box-shadow: none; }
.fibest-empty-state p { max-width: 70ch; margin-inline: auto; }

.fibest-alert {
    display: flex;
    gap: var(--fibest-space-3);
    padding: var(--fibest-space-4);
    color: var(--fibest-color-text);
    background: var(--fibest-color-surface-subtle);
    border: 1px solid var(--fibest-color-border);
    border-inline-start: var(--fibest-space-1) solid var(--fibest-color-action);
    border-radius: var(--fibest-radius-md);
}
.fibest-alert--success { border-inline-start-color: var(--fibest-color-success); }
.fibest-alert--warning { border-inline-start-color: var(--fibest-color-warning); }
.fibest-alert--error { border-inline-start-color: var(--fibest-color-error); }

.fibest-badge { display: inline-flex; align-items: center; min-height: 28px; padding-inline: var(--fibest-space-3); border-radius: var(--fibest-radius-pill); color: var(--fibest-color-text); background: var(--fibest-color-surface-subtle); font-size: var(--wp--preset--font-size--small); font-weight: 700; }
.fibest-badge--success { border: 1px solid var(--fibest-color-success); }
.fibest-badge--warning { border: 1px solid var(--fibest-color-warning); }
.fibest-badge--error { border: 1px solid var(--fibest-color-error); }

.fibest-tabs { display: flex; gap: var(--fibest-space-2); overflow-x: auto; border-bottom: 1px solid var(--fibest-color-border); }
.fibest-tabs button, .fibest-tabs a { min-height: 44px; padding: var(--fibest-space-3) var(--fibest-space-4); color: var(--fibest-color-text-secondary); background: transparent; border: 0; border-bottom: 3px solid transparent; font: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.fibest-tabs [aria-selected="true"], .fibest-tabs .is-active { color: var(--fibest-color-action-hover); border-bottom-color: var(--fibest-color-action); }

.fibest-dialog { max-width: min(640px, calc(100vw - (2 * var(--fibest-space-5)))); padding: 0; color: var(--fibest-color-text); background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-border); border-radius: var(--fibest-radius-lg); box-shadow: var(--fibest-shadow-overlay); }
.fibest-dialog::backdrop { background: color-mix(in srgb, var(--fibest-color-text) 62%, transparent); }
.fibest-dialog__header, .fibest-dialog__body, .fibest-dialog__footer { padding: var(--fibest-space-5); }

.fibest-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--fibest-space-2); }
.fibest-pagination a, .fibest-pagination button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--fibest-color-action-hover); background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-border); border-radius: var(--fibest-radius-md); text-decoration: none; }
.fibest-pagination [aria-current="page"] { color: var(--fibest-color-text-inverse); background: var(--fibest-color-action); border-color: var(--fibest-color-action); }

.fibest-spinner { width: 24px; height: 24px; border: 3px solid var(--fibest-color-border); border-top-color: var(--fibest-color-action); border-radius: var(--fibest-radius-pill); animation: fibest-spin var(--fibest-motion-slow) linear infinite; }
@keyframes fibest-spin { to { transform: rotate(1turn); } }

.fibest-logo-tile { display: grid; place-items: center; min-height: 128px; padding: var(--fibest-space-4); background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-border); border-radius: var(--fibest-radius-md); }
.fibest-company-placeholder { display: grid; place-items: center; width: 72px; height: 72px; color: var(--fibest-color-text-inverse); background: var(--fibest-color-action-hover); border-radius: var(--fibest-radius-md); font-size: var(--wp--preset--font-size--large); font-weight: 800; }

.fibest-page-shell { width: min(100%, var(--wp--style--global--wide-size)); margin-inline: auto; padding-block: var(--fibest-space-7); }
.fibest-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--fibest-space-5); margin-bottom: var(--fibest-space-6); }
.fibest-section-heading { max-width: 720px; margin-bottom: var(--fibest-space-5); }
.fibest-section-heading > :first-child { margin-top: 0; }
.fibest-section-heading > :last-child { margin-bottom: 0; color: var(--fibest-color-text-secondary); }
.fibest-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--fibest-space-5); }

.fibest-video-facade { margin-top: var(--fibest-space-4); }
.fibest-video-facade__surface, .fibest-video-facade > iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--fibest-radius-lg); }
.fibest-video-facade__surface { display: grid; place-items: center; align-content: center; gap: var(--fibest-space-3); color: var(--fibest-color-text-inverse); background-color: var(--fibest-color-surface-strong); background-image: linear-gradient(color-mix(in srgb, var(--fibest-color-surface-strong) 45%, transparent), color-mix(in srgb, var(--fibest-color-surface-strong) 70%, transparent)), var(--fibest-video-poster, none); background-position: center; background-size: cover; }
.fibest-video-facade__play { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--fibest-space-3); min-height: 52px; padding: var(--fibest-space-3) var(--fibest-space-5); color: var(--fibest-color-text-inverse); background: var(--fibest-color-action); border: 2px solid var(--fibest-color-text-inverse); border-radius: var(--fibest-radius-pill); font: inherit; font-weight: 800; cursor: pointer; transition: background-color var(--fibest-motion-standard) var(--fibest-motion-ease), transform var(--fibest-motion-fast) var(--fibest-motion-ease); }
.fibest-video-facade__play:hover { background: var(--fibest-color-action-hover); }
.fibest-video-facade__meta { margin: 0; font-weight: 700; }
.fibest-video-facade__privacy { margin: var(--fibest-space-3) 0 0; color: var(--fibest-color-text-secondary); font-size: var(--wp--preset--font-size--small); }
.fibest-video-transcript { margin-top: var(--fibest-space-4); padding: var(--fibest-space-4); background: var(--fibest-color-surface-subtle); border-radius: var(--fibest-radius-md); }
.fibest-video-transcript summary { min-height: 44px; font-weight: 700; cursor: pointer; }
.fibest-video-transcript > div { max-width: 72ch; padding-top: var(--fibest-space-3); }

.fibest-student-status { padding: var(--fibest-space-4); background: var(--fibest-color-surface-subtle); border-bottom: 1px solid var(--fibest-color-border); }
.fibest-student-status__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, var(--wp--style--global--wide-size)); margin-inline: auto; overflow: hidden; background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-border); border-radius: var(--fibest-radius-lg); box-shadow: var(--fibest-shadow-sm); }
.fibest-student-status__item { display: grid; gap: var(--fibest-space-1); min-height: 72px; padding: var(--fibest-space-4); color: var(--fibest-color-text); border-inline-end: 1px solid var(--fibest-color-border); text-decoration: none; transition: background-color var(--fibest-motion-standard) var(--fibest-motion-ease); }
.fibest-student-status__item:last-child { border-inline-end: 0; }
.fibest-student-status__item:hover { background: var(--fibest-color-surface-subtle); }
.fibest-student-status__item strong { color: var(--fibest-color-action-hover); font-size: var(--wp--preset--font-size--lead); }
.fibest-student-status__item span { overflow: hidden; color: var(--fibest-color-text-secondary); font-size: var(--wp--preset--font-size--small); text-overflow: ellipsis; white-space: nowrap; }

/* Migration adapters: shared public catalogues and authenticated portals. */
:where(.fibest-catalogo-wrapper, .fibest-dashboard, .fibest-dashboard-wrapper, .fibest-mis-inscripciones-block, .fibest-detalle-empresa) { color: var(--fibest-color-text); font-family: var(--wp--preset--font-family--exo); }
:where(.fibest-catalogo-container, .fibest-dashboard-content, .fibest-container) { box-sizing: border-box; width: min(100%, var(--wp--style--global--wide-size)); margin-inline: auto; }
.fibest-catalogo-intro { box-sizing: border-box; width: min(100%, var(--wp--style--global--wide-size)); margin-inline: auto; padding: var(--fibest-space-7) var(--fibest-space-4) var(--fibest-space-5); }
.fibest-catalogo-intro h1 { margin: 0; color: var(--fibest-color-text); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; }
.fibest-catalogo-intro p { max-width: 68ch; margin: var(--fibest-space-3) 0 0; color: var(--fibest-color-text-secondary); font-size: 1.0625rem; line-height: 1.6; }
:where(.fibest-catalogo-topbar, .fibest-dashboard-header) { padding: var(--fibest-space-6) max(var(--fibest-space-4), calc((100vw - var(--wp--style--global--wide-size)) / 2)); background: var(--fibest-color-surface-subtle); border-bottom: 1px solid var(--fibest-color-border); }
:where(.fibest-oferta-card, .fibest-empresa-card, .fibest-actividad-card, .fibest-dashboard-card, .fibest-hub-card) { color: var(--fibest-color-text); background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-border); border-radius: var(--fibest-radius-lg); box-shadow: var(--fibest-shadow-sm); }
:where(.fibest-oferta-card, .fibest-empresa-card, .fibest-actividad-card, .fibest-hub-card) { transition: border-color var(--fibest-motion-standard) var(--fibest-motion-ease), box-shadow var(--fibest-motion-standard) var(--fibest-motion-ease), transform var(--fibest-motion-standard) var(--fibest-motion-ease); }
:where(.fibest-oferta-card, .fibest-empresa-card, .fibest-actividad-card, .fibest-hub-card):hover { border-color: var(--fibest-color-action); box-shadow: var(--fibest-shadow-md); transform: translateY(-2px); }
:where(.fibest-ofertas-grid, .fibest-empresas-grid, .fibest-actividades-grid, .fibest-hub-grid) { gap: var(--fibest-space-5); }
:where(.fibest-catalogo-wrapper, .fibest-dashboard, .fibest-dashboard-wrapper) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { box-sizing: border-box; min-height: 44px; max-width: 100%; border-color: var(--fibest-color-border-strong); border-radius: var(--fibest-radius-md); }
:where(.fibest-dashboard-card, .fibest-catalogo-container) :where(h1, h2, h3) { font-style: normal; }
:where(.fibest-dashboard-notice, .fibest-no-results) { padding: var(--fibest-space-5); background: var(--fibest-color-surface-subtle); border: 1px dashed var(--fibest-color-border-strong); border-radius: var(--fibest-radius-lg); text-align: center; }

/* Shared form feedback and media previews. */
.fibest-error-summary {
    margin: 0 auto var(--fibest-space-5);
    padding: var(--fibest-space-4);
    color: var(--fibest-color-text);
    background: color-mix(in srgb, var(--fibest-color-error) 8%, var(--fibest-color-surface));
    border: 1px solid var(--fibest-color-error);
    border-inline-start-width: var(--fibest-space-1);
    border-radius: var(--fibest-radius-md);
}
.fibest-error-summary:focus { outline: var(--wp--custom--focus--width) solid var(--fibest-color-focus); outline-offset: var(--wp--custom--focus--offset); }
.fibest-error-summary p { margin: var(--fibest-space-2) 0 0; }

.fibest-live-preview-container { display: inline-grid; gap: var(--fibest-space-2); max-width: 160px; margin-top: var(--fibest-space-3); }
.fibest-live-preview-container.is-wide { width: 100%; max-width: 100%; }
.fibest-live-preview { display: block; width: 100%; height: auto; border: 2px dashed var(--fibest-color-action); border-radius: var(--fibest-radius-sm); }
.fibest-live-preview-remove { min-height: 44px; padding: var(--fibest-space-2) var(--fibest-space-3); color: var(--fibest-color-error); background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-error); border-radius: var(--fibest-radius-md); font: inherit; font-weight: 700; cursor: pointer; }

.fibest-estudio-choice,
.fibest-estudio-remove { min-height: 44px; font: inherit; cursor: pointer; }
.fibest-estudio-choice { width: 100%; padding: var(--fibest-space-2) var(--fibest-space-3); color: var(--fibest-color-text); background: transparent; border: 0; text-align: start; }
.fibest-estudio-remove { padding: var(--fibest-space-2) var(--fibest-space-3); color: var(--fibest-color-action-hover); background: var(--fibest-color-surface); border: 1px solid var(--fibest-color-border-strong); border-radius: var(--fibest-radius-md); font-weight: 700; }
.fibest-estudio-choice:focus-visible,
.fibest-estudio-remove:focus-visible,
.fibest-live-preview-remove:focus-visible { outline: var(--wp--custom--focus--width) solid var(--fibest-color-focus); outline-offset: var(--wp--custom--focus--offset); }

.fibest-offer-quota-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fibest-space-4); margin-bottom: var(--fibest-space-5); padding: var(--fibest-space-4); background: var(--fibest-color-surface-subtle); border: 1px solid var(--fibest-color-border); border-radius: var(--fibest-radius-lg); }
.fibest-offer-quota-strip > div { display: grid; gap: var(--fibest-space-1); }
.fibest-offer-quota-strip span { color: var(--fibest-color-text-secondary); }

/* One responsive model across student-facing catalogues. */
@media (min-width: 782px) and (max-width: 1023px) {
    :where(.fibest-ofertas-grid, .fibest-empresas-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :where(.fibest-catalogo-topbar, .fibest-agenda-topbar) .fibest-filter-group { flex-basis: calc(50% - var(--fibest-space-3)); min-width: 0; }
}

@media (min-width: 1024px) {
    :where(.fibest-ofertas-grid, .fibest-empresas-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 781px) {
    .fibest-page-shell { padding-block: var(--fibest-space-6); }
	.fibest-catalogo-intro { padding-block: var(--fibest-space-6) var(--fibest-space-4); }
	.fibest-catalogo-intro h1 { font-size: 2rem; }
    .fibest-page-header { align-items: stretch; flex-direction: column; }
    .fibest-page-header .fibest-btn { width: 100%; }
    .fibest-student-status__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fibest-student-status__item:nth-child(2) { border-inline-end: 0; }
    .fibest-student-status__item:nth-child(-n + 2) { border-bottom: 1px solid var(--fibest-color-border); }
    :where(.fibest-catalogo-topbar, .fibest-dashboard-header) { padding: var(--fibest-space-5) var(--fibest-space-4); }
    :where(.fibest-catalogo-container, .fibest-dashboard-content, .fibest-container) { padding-inline: var(--fibest-space-4); }
	:where(.fibest-ofertas-grid, .fibest-empresas-grid) { grid-template-columns: minmax(0, 1fr); }
	.fibest-tabs { scroll-padding-inline: var(--fibest-space-4); }
	.fibest-offer-quota-strip { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .fibest-spinner { animation-duration: 1ms; animation-iteration-count: 1; }
    .fibest-card--interactive:hover { transform: none; }
}
