/* ==========================================================================
   VICARDITY — Skin visual del panel (Filament v3)
   Capa 100% de presentación: no cambia comportamiento ni lógica.
   Se carga con el render hook PanelsRenderHook::STYLES_AFTER.
   ========================================================================== */

:root {
    /* Marca */
    --vc-pink-50:  #fff1f5;
    --vc-pink-100: #ffe4ec;
    --vc-pink-200: #fecddc;
    --vc-pink-300: #fda4c0;
    --vc-pink-400: #fb7ba4;
    --vc-pink-500: #f04e86;
    --vc-pink-600: #e11d62;
    --vc-pink-700: #be1350;

    /* Neutros */
    --vc-bg:        #f7f7f9;
    --vc-surface:   #ffffff;
    --vc-ink:       #0f172a;
    --vc-ink-soft:  #475569;
    --vc-muted:     #6b7280;
    --vc-line:      #ebecf0;
    --vc-line-soft: #f2f3f6;

    /* Acentos pastel para tiles de iconos */
    --vc-tile-pink:   #fff1f5;
    --vc-tile-violet: #f4f1ff;
    --vc-tile-blue:   #eef4ff;
    --vc-tile-green:  #ecfdf5;
    --vc-tile-amber:  #fffbeb;

    /* Forma */
    --vc-r-lg: 16px;
    --vc-r-md: 12px;
    --vc-r-sm: 10px;

    --vc-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
    --vc-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .16);
    --vc-shadow-lg: 0 24px 48px -24px rgba(16, 24, 40, .24);

    --vc-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Base tipográfica y lienzo
   -------------------------------------------------------------------------- */

.fi-body {
    font-family: var(--vc-font);
    background-color: var(--vc-bg);
    color: var(--vc-ink);
    -webkit-font-smoothing: antialiased;
}

.fi-main-ctn {
    background-color: var(--vc-bg);
}

.fi-main {
    max-width: 96rem;
}

/* --------------------------------------------------------------------------
   2. Topbar
   -------------------------------------------------------------------------- */

.fi-topbar > nav {
    background-color: var(--vc-surface);
    border-bottom: 1px solid var(--vc-line);
    box-shadow: none;
    height: 4.25rem;
}

.fi-topbar .fi-icon-btn {
    color: var(--vc-ink-soft);
    border-radius: var(--vc-r-md);
}

.fi-topbar .fi-icon-btn:hover {
    background-color: var(--vc-line-soft);
    color: var(--vc-pink-600);
}

/* Menú de usuario: avatar redondo + nombre */
.fi-user-menu .fi-dropdown-trigger,
.fi-topbar .fi-dropdown-trigger .fi-avatar {
    border-radius: 9999px;
}

.fi-avatar {
    box-shadow: 0 0 0 2px var(--vc-pink-100);
}

/* --------------------------------------------------------------------------
   3. Sidebar
   -------------------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--vc-surface);
    border-right: 1px solid var(--vc-line);
}

.fi-sidebar-header {
    background-color: var(--vc-surface);
    border-bottom: 1px solid var(--vc-line);
    box-shadow: none;
    height: 4.25rem;
}

.fi-sidebar-nav {
    padding: 1rem .75rem 1.5rem;
    gap: .25rem;
}

.fi-sidebar-group-items {
    gap: .125rem;
}

.fi-sidebar-item-button {
    border-radius: var(--vc-r-md);
    padding: .625rem .75rem;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--vc-ink-soft);
    transition: background-color .15s ease, color .15s ease;
}

.fi-sidebar-item-button:hover {
    background-color: var(--vc-line-soft);
    color: var(--vc-ink);
}

.fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #94a3b8;
    width: 1.375rem;
    height: 1.375rem;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--vc-ink-soft);
}

/* Ítem activo: pastilla rosa suave */
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background-color: var(--vc-pink-50);
    color: var(--vc-pink-700);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-active > .fi-sidebar-item-button .fi-sidebar-item-icon {
    color: var(--vc-pink-600);
}

.fi-sidebar-group-label {
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 700;
    padding-inline: .75rem;
}

/* Badge "Se activa tras el evento" y similares dentro del nav */
.fi-sidebar-item-grouped-border,
.fi-sidebar-item .fi-badge {
    font-size: .625rem;
}

/* --------------------------------------------------------------------------
   4. Cabecera de página
   -------------------------------------------------------------------------- */

.fi-header-heading {
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vc-ink);
}

.fi-header-subheading {
    color: var(--vc-muted);
    font-size: .9375rem;
    margin-top: .375rem;
}

/* --------------------------------------------------------------------------
   5. Tarjetas / secciones
   -------------------------------------------------------------------------- */

.fi-section,
.fi-wi-stats-overview-stat,
.fi-ta-ctn,
.fi-fo-component-ctn > .fi-section {
    border-radius: var(--vc-r-lg);
    border: 1px solid var(--vc-line);
    box-shadow: var(--vc-shadow-sm);
    background-color: var(--vc-surface);
}

.fi-section-header {
    padding: 1.25rem 1.5rem;
}

.fi-section-header-heading {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--vc-ink);
    letter-spacing: -.01em;
}

.fi-section-header-description {
    color: var(--vc-muted);
    font-size: .875rem;
    margin-top: .25rem;
}

.fi-section-content {
    padding: 1.5rem;
}

.fi-section-header + .fi-section-content-ctn > .fi-section-content {
    padding-top: 0;
}

/* Icono de sección: cuadro pastel */
.fi-section-header-icon-ctn {
    border-radius: var(--vc-r-md);
    background-color: var(--vc-tile-pink);
    padding: .5rem;
}

.fi-section-header-icon-ctn .fi-icon,
.fi-section-header-icon-ctn svg {
    color: var(--vc-pink-600);
}

/* --------------------------------------------------------------------------
   6. Botones
   -------------------------------------------------------------------------- */

.fi-btn {
    border-radius: var(--vc-r-sm);
    font-weight: 700;
    letter-spacing: -.005em;
    box-shadow: none;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}

.fi-btn:active {
    transform: translateY(1px);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link) {
    background-image: linear-gradient(135deg, var(--vc-pink-500) 0%, var(--vc-pink-600) 100%);
    box-shadow: 0 6px 18px -8px rgba(225, 29, 98, .7);
}

.fi-btn.fi-color-primary:not(.fi-btn-outlined):not(.fi-link):hover {
    background-image: linear-gradient(135deg, var(--vc-pink-600) 0%, var(--vc-pink-700) 100%);
}

.fi-btn.fi-size-lg {
    border-radius: 9999px;
    padding-inline: 1.5rem;
}

/* Botón de acción de cabecera (Nuevo evento, etc.) */
.fi-header-actions .fi-btn {
    border-radius: 9999px;
    padding-inline: 1.25rem;
}

.fi-icon-btn {
    border-radius: var(--vc-r-sm);
}

/* --------------------------------------------------------------------------
   7. Formularios
   -------------------------------------------------------------------------- */

.fi-fo-field-wrp-label {
    font-weight: 600;
    color: var(--vc-ink-soft);
    font-size: .875rem;
}

.fi-input-wrp {
    border-radius: var(--vc-r-md);
    box-shadow: none;
    border: 1px solid var(--vc-line);
    background-color: #fcfcfd;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.fi-input-wrp:hover {
    border-color: #dcdee5;
}

.fi-input-wrp:focus-within {
    border-color: var(--vc-pink-400);
    background-color: var(--vc-surface);
    box-shadow: 0 0 0 4px var(--vc-pink-50);
}

.fi-input,
.fi-select-input {
    font-size: .9375rem;
}

.fi-fo-field-wrp-helper-text {
    color: var(--vc-muted);
    font-size: .8125rem;
    line-height: 1.5;
}

.fi-fo-field-wrp-hint {
    font-size: .8125rem;
}

/* Toggle */
.fi-fo-toggle button[role="switch"][aria-checked="true"] {
    background-color: var(--vc-pink-600);
}

/* Zona de subida de archivos */
.fi-fo-file-upload .filepond--drop-label {
    border-radius: var(--vc-r-md);
    color: var(--vc-muted);
}

.fi-fo-file-upload .filepond--panel-root {
    background-color: #fbfbfd;
    border: 1.5px dashed var(--vc-pink-200);
    border-radius: var(--vc-r-md);
}

/* --------------------------------------------------------------------------
   8. Tablas
   -------------------------------------------------------------------------- */

.fi-ta-ctn {
    overflow: hidden;
}

.fi-ta-header-ctn {
    border-bottom: 1px solid var(--vc-line);
}

.fi-ta-header-cell {
    background-color: #fbfbfd;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-weight: 700;
    color: #8b93a3;
}

.fi-ta-row {
    transition: background-color .12s ease;
}

.fi-ta-row:hover {
    background-color: var(--vc-pink-50);
}

.fi-ta-cell {
    font-size: .9125rem;
}

.fi-ta-text-item-label {
    color: var(--vc-ink-soft);
}

.fi-ta-empty-state {
    padding-block: 3.5rem;
}

.fi-ta-empty-state-icon-ctn {
    background-color: var(--vc-pink-50);
    border-radius: 9999px;
}

.fi-ta-empty-state-icon-ctn .fi-icon,
.fi-ta-empty-state-icon-ctn svg {
    color: var(--vc-pink-500);
}

.fi-ta-empty-state-heading {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--vc-ink);
}

.fi-ta-empty-state-description {
    color: var(--vc-muted);
    max-width: 32rem;
    margin-inline: auto;
}

/* Búsqueda de tabla */
.fi-ta-search-field .fi-input-wrp {
    border-radius: 9999px;
}

/* --------------------------------------------------------------------------
   9. Badges
   -------------------------------------------------------------------------- */

.fi-badge {
    border-radius: 9999px;
    font-weight: 700;
    font-size: .75rem;
    padding: .25rem .625rem;
    box-shadow: none;
    border: 1px solid transparent;
}

/* --------------------------------------------------------------------------
   10. Widgets de estadísticas nativos (por si se usan en otras páginas)
   -------------------------------------------------------------------------- */

.fi-wi-stats-overview-stat {
    padding: 1.25rem;
}

.fi-wi-stats-overview-stat-label {
    color: var(--vc-muted);
    font-weight: 600;
    font-size: .8125rem;
}

.fi-wi-stats-overview-stat-value {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vc-ink);
}

.fi-wi-stats-overview-stat-description {
    font-size: .8125rem;
    color: var(--vc-muted);
}

/* --------------------------------------------------------------------------
   11. Modales, dropdowns y notificaciones
   -------------------------------------------------------------------------- */

.fi-modal-window {
    border-radius: 20px;
    box-shadow: var(--vc-shadow-lg);
}

.fi-modal-heading {
    font-weight: 800;
    letter-spacing: -.015em;
}

.fi-modal-description {
    color: var(--vc-muted);
}

.fi-dropdown-panel {
    border-radius: var(--vc-r-md);
    border: 1px solid var(--vc-line);
    box-shadow: var(--vc-shadow);
}

.fi-dropdown-list-item {
    border-radius: var(--vc-r-sm);
    font-weight: 600;
}

.fi-no-notification {
    border-radius: var(--vc-r-md);
    box-shadow: var(--vc-shadow);
}

/* --------------------------------------------------------------------------
   12. Páginas simples (login, registro, recuperar contraseña)
   -------------------------------------------------------------------------- */

.fi-simple-layout {
    background-color: var(--vc-bg);
    background-image:
        radial-gradient(1100px 520px at 50% -12%, var(--vc-pink-100) 0%, rgba(255, 241, 245, 0) 62%);
}

.fi-simple-main {
    border-radius: 22px;
    border: 1px solid var(--vc-line);
    box-shadow: 0 30px 60px -34px rgba(16, 24, 40, .28);
    padding: 2.25rem;
    background-color: var(--vc-surface);
}

.fi-simple-header-heading {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.fi-simple-header-subheading {
    color: var(--vc-muted);
}

.fi-simple-layout .fi-logo {
    margin-inline: auto;
}

/* Tarjeta de confianza bajo el formulario de acceso */
.vc-auth-note {
    margin-top: 1.5rem;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    padding: .875rem 1rem;
    border-radius: var(--vc-r-md);
    background-color: var(--vc-pink-50);
    border: 1px solid var(--vc-pink-100);
}

.vc-auth-note svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    color: var(--vc-pink-600);
    margin-top: .0625rem;
}

.vc-auth-note p {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--vc-ink-soft);
    margin: 0;
}

.vc-auth-note strong {
    color: var(--vc-ink);
}

/* --------------------------------------------------------------------------
   13. Componentes propios de Vicardity
   -------------------------------------------------------------------------- */

/* 13.1 Tarjeta genérica */
.vc-card {
    background-color: var(--vc-surface);
    border: 1px solid var(--vc-line);
    border-radius: var(--vc-r-lg);
    box-shadow: var(--vc-shadow-sm);
}

/* 13.2 Hero "Crea tu evento sin límites" */
.vc-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--vc-r-lg);
    border: 1px solid var(--vc-pink-100);
    background-image: linear-gradient(120deg, #fff5f8 0%, #ffe9f0 48%, #ffeef4 100%);
    padding: 1.75rem;
}

.vc-hero::after {
    content: '';
    position: absolute;
    right: -70px;
    top: -90px;
    width: 260px;
    height: 260px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(251, 123, 164, .32) 0%, rgba(251, 123, 164, 0) 70%);
    pointer-events: none;
}

.vc-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.vc-hero-art {
    flex: none;
    width: 168px;
    display: grid;
    place-items: center;
}

.vc-hero-art svg {
    width: 100%;
    height: auto;
}

.vc-hero-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vc-ink);
    line-height: 1.2;
}

.vc-hero-title span {
    color: var(--vc-pink-600);
}

.vc-hero-text {
    margin-top: .5rem;
    color: var(--vc-ink-soft);
    font-size: .9375rem;
    line-height: 1.6;
    max-width: 34rem;
}

.vc-hero-text strong {
    color: var(--vc-ink);
    font-weight: 700;
}

/* 13.3 Botón principal en pastilla */
.vc-cta {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    margin-top: 1.125rem;
    padding: .75rem 1.375rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: .9375rem;
    color: #fff;
    background-image: linear-gradient(135deg, var(--vc-pink-500) 0%, var(--vc-pink-600) 100%);
    box-shadow: 0 10px 24px -10px rgba(225, 29, 98, .75);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

.vc-cta:hover {
    filter: saturate(1.05);
    box-shadow: 0 14px 28px -10px rgba(225, 29, 98, .8);
}

.vc-cta:active {
    transform: translateY(1px);
}

.vc-cta svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Variante secundaria (contorno) */
.vc-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1rem;
    border-radius: var(--vc-r-sm);
    font-weight: 700;
    font-size: .875rem;
    color: var(--vc-ink-soft);
    border: 1px solid var(--vc-line);
    background-color: var(--vc-surface);
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.vc-btn-ghost:hover {
    border-color: var(--vc-pink-300);
    color: var(--vc-pink-700);
    background-color: var(--vc-pink-50);
}

.vc-btn-ghost svg {
    width: 1rem;
    height: 1rem;
}

/* 13.4 Franja de tranquilidad (privacidad / créditos) */
.vc-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border-radius: var(--vc-r-lg);
    background-color: var(--vc-surface);
    border: 1px solid var(--vc-line);
    box-shadow: var(--vc-shadow-sm);
}

.vc-notice-icon {
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: var(--vc-r-md);
    background-color: var(--vc-tile-pink);
    color: var(--vc-pink-600);
}

.vc-notice-icon svg {
    width: 1.375rem;
    height: 1.375rem;
}

.vc-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.vc-notice-title {
    font-weight: 700;
    color: var(--vc-ink);
    font-size: .9375rem;
}

.vc-notice-text {
    color: var(--vc-muted);
    font-size: .875rem;
    margin-top: .1875rem;
    line-height: 1.5;
}

/* 13.5 Tiles de estadística */
.vc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.vc-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem;
    border-radius: var(--vc-r-md);
    border: 1px solid var(--vc-line);
    background-color: var(--vc-surface);
}

.vc-stat-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--vc-r-sm);
    display: grid;
    place-items: center;
}

.vc-stat-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.vc-stat-value {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--vc-ink);
}

.vc-stat-label {
    font-size: .8125rem;
    color: var(--vc-muted);
    font-weight: 500;
}

.vc-tile-pink   { background-color: var(--vc-tile-pink);   color: var(--vc-pink-600); }
.vc-tile-violet { background-color: var(--vc-tile-violet); color: #7c5cf0; }
.vc-tile-blue   { background-color: var(--vc-tile-blue);   color: #2f6bed; }
.vc-tile-green  { background-color: var(--vc-tile-green);  color: #059669; }
.vc-tile-amber  { background-color: var(--vc-tile-amber);  color: #d97706; }

/* 13.6 Lista de eventos recientes */
.vc-list {
    display: flex;
    flex-direction: column;
}

.vc-list-row {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem 0;
    border-top: 1px solid var(--vc-line-soft);
}

.vc-list-row:first-child {
    border-top: 0;
    padding-top: .25rem;
}

.vc-thumb {
    flex: none;
    width: 5.25rem;
    height: 3.75rem;
    border-radius: var(--vc-r-md);
    object-fit: cover;
    background-color: var(--vc-pink-50);
    border: 1px solid var(--vc-line);
}

.vc-thumb-empty {
    display: grid;
    place-items: center;
    color: var(--vc-pink-400);
}

.vc-thumb-empty svg {
    width: 1.5rem;
    height: 1.5rem;
}

.vc-list-body {
    flex: 1 1 auto;
    min-width: 0;
}

.vc-list-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.vc-list-title strong {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--vc-ink);
}

.vc-list-meta {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--vc-muted);
}

.vc-list-stats {
    margin-top: .375rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .8125rem;
    color: var(--vc-ink-soft);
}

.vc-list-stats span {
    display: inline-flex;
    align-items: center;
    gap: .3125rem;
}

.vc-list-stats svg {
    width: .9375rem;
    height: .9375rem;
    color: #9ca3af;
}

/* 13.7 Pastillas de estado */
.vc-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .1875rem .5625rem;
    border-radius: 9999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.vc-pill::before {
    content: '';
    width: .375rem;
    height: .375rem;
    border-radius: 9999px;
    background-color: currentColor;
}

.vc-pill-live  { background-color: #ecfdf5; color: #047857; }
.vc-pill-draft { background-color: #fff7ed; color: #c2410c; }

/* 13.8 Accesos rápidos */
.vc-quick {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vc-quick-item {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .75rem;
    border-radius: var(--vc-r-md);
    border: 1px solid var(--vc-line);
    background-color: var(--vc-surface);
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.vc-quick-item:hover {
    border-color: var(--vc-pink-200);
    background-color: #fffafc;
}

.vc-quick-item:active {
    transform: translateY(1px);
}

.vc-quick-icon {
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--vc-r-md);
    display: grid;
    place-items: center;
}

.vc-quick-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.vc-quick-body {
    flex: 1 1 auto;
    min-width: 0;
}

.vc-quick-title {
    font-weight: 700;
    font-size: .875rem;
    color: var(--vc-ink);
}

.vc-quick-text {
    font-size: .8125rem;
    color: var(--vc-muted);
    margin-top: .0625rem;
}

.vc-quick-chevron {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: #c3c8d2;
}

/* 13.9 Guía de 3 pasos */
.vc-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .875rem;
}

.vc-step {
    position: relative;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: var(--vc-r-md);
    border: 1px solid var(--vc-line);
    background-color: #fcfcfe;
}

.vc-step-num {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    background-color: var(--vc-pink-600);
    color: #fff;
    font-size: .8125rem;
    font-weight: 800;
    margin-bottom: .625rem;
}

.vc-step-title {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--vc-ink);
}

.vc-step-text {
    font-size: .8125rem;
    color: var(--vc-muted);
    margin-top: .25rem;
    line-height: 1.5;
}

.vc-step-tag {
    display: inline-block;
    margin-top: .625rem;
    font-size: .6875rem;
    font-weight: 700;
    padding: .125rem .5rem;
    border-radius: 9999px;
}

.vc-step-tag-free { background-color: #ecfdf5; color: #047857; }
.vc-step-tag-cost { background-color: var(--vc-pink-50); color: var(--vc-pink-700); }

/* 13.10 Tarjeta de créditos del sidebar */
.vc-sidebar-cards {
    padding: .25rem .75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.fi-sidebar-nav-groups + .vc-sidebar-cards {
    margin-top: auto;
}

.vc-credit-card {
    border: 1px solid var(--vc-line);
    border-radius: var(--vc-r-lg);
    padding: 1rem;
    background-color: var(--vc-surface);
}

.vc-credit-label {
    font-size: .8125rem;
    color: var(--vc-muted);
    font-weight: 600;
}

.vc-credit-value {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--vc-ink);
    line-height: 1.1;
    margin-top: .125rem;
}

.vc-credit-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    margin-top: .875rem;
    padding: .625rem 1rem;
    border-radius: var(--vc-r-sm);
    font-weight: 700;
    font-size: .875rem;
    color: #fff;
    background-image: linear-gradient(135deg, var(--vc-pink-500) 0%, var(--vc-pink-600) 100%);
    box-shadow: 0 8px 18px -10px rgba(225, 29, 98, .8);
}

.vc-credit-buy svg {
    width: 1rem;
    height: 1rem;
}

.vc-credit-help {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    width: 100%;
    margin-top: .625rem;
    font-size: .75rem;
    color: var(--vc-muted);
}

.vc-credit-help svg {
    width: .875rem;
    height: .875rem;
}

.vc-credit-help:hover {
    color: var(--vc-pink-600);
}

/* Tarjeta "sin comprar créditos" */
.vc-free-card {
    border-radius: var(--vc-r-lg);
    padding: 1rem;
    background-image: linear-gradient(140deg, #fff6fa 0%, #f6f2ff 100%);
    border: 1px solid #f3e9f7;
    text-align: center;
}

.vc-free-card-emoji {
    font-size: 1.375rem;
    line-height: 1;
}

.vc-free-card-title {
    margin-top: .5rem;
    font-weight: 800;
    font-size: .875rem;
    color: var(--vc-ink);
    line-height: 1.35;
}

.vc-free-card-text {
    margin-top: .375rem;
    font-size: .75rem;
    color: var(--vc-muted);
    line-height: 1.5;
}

.vc-free-card-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .625rem;
    font-size: .75rem;
    font-weight: 700;
    color: #7c5cf0;
}

.vc-free-card-link svg {
    width: .875rem;
    height: .875rem;
}

/* 13.11 Encabezado de widget */
.vc-widget-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vc-widget-title {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--vc-ink);
}

.vc-widget-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--vc-muted);
}

.vc-widget-link:hover {
    color: var(--vc-pink-600);
}

.vc-widget-link svg {
    width: .9375rem;
    height: .9375rem;
}

/* 13.12 Estado vacío propio */
.vc-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.vc-empty-icon {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto .875rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background-color: var(--vc-pink-50);
    color: var(--vc-pink-500);
}

.vc-empty-icon svg {
    width: 1.75rem;
    height: 1.75rem;
}

.vc-empty-title {
    font-weight: 700;
    color: var(--vc-ink);
}

.vc-empty-text {
    font-size: .875rem;
    color: var(--vc-muted);
    margin-top: .3125rem;
    max-width: 26rem;
    margin-inline: auto;
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   14. Selector de plantillas
   -------------------------------------------------------------------------- */

.vc-tpl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .875rem;
    margin-top: .5rem;
}

@media (min-width: 640px) {
    .vc-tpl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .vc-tpl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.vc-tpl {
    position: relative;
    cursor: pointer;
    border-radius: var(--vc-r-md);
    border: 1.5px solid var(--vc-line);
    background-color: var(--vc-surface);
    padding: .5rem;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.vc-tpl:hover {
    border-color: var(--vc-pink-300);
    transform: translateY(-2px);
    box-shadow: var(--vc-shadow);
}

.vc-tpl-selected {
    border-color: var(--vc-pink-600);
    box-shadow: 0 0 0 4px var(--vc-pink-50);
}

.vc-tpl-img {
    aspect-ratio: 3 / 4;
    border-radius: var(--vc-r-sm);
    overflow: hidden;
    background-color: #f5f5f7;
    margin-bottom: .5rem;
}

.vc-tpl-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vc-tpl-name {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--vc-ink-soft);
}

.vc-tpl-selected .vc-tpl-name {
    color: var(--vc-pink-700);
}

.vc-tpl-check {
    position: absolute;
    top: .625rem;
    right: .625rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: var(--vc-pink-600);
    color: #fff;
    display: none;
    place-items: center;
    box-shadow: 0 2px 8px rgba(225, 29, 98, .45);
}

.vc-tpl-selected .vc-tpl-check {
    display: grid;
}

.vc-tpl-check svg {
    width: .875rem;
    height: .875rem;
}

/* --------------------------------------------------------------------------
   15. Barra inferior móvil
   -------------------------------------------------------------------------- */

.vc-tabbar {
    display: none;
}

@media (max-width: 1023px) {
    .vc-tabbar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        background-color: rgba(255, 255, 255, .96);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--vc-line);
        padding: .375rem .25rem calc(.375rem + env(safe-area-inset-bottom, 0px));
    }

    .vc-tabbar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .1875rem;
        padding: .375rem .125rem;
        border-radius: var(--vc-r-sm);
        font-size: .6875rem;
        font-weight: 600;
        color: #94a3b8;
        line-height: 1;
    }

    .vc-tabbar a svg {
        width: 1.375rem;
        height: 1.375rem;
    }

    .vc-tabbar a.vc-tab-active {
        color: var(--vc-pink-600);
    }

    /* Espacio para que la barra no tape el contenido */
    .fi-main {
        padding-bottom: 5.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   16. Responsive de los componentes propios
   -------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .vc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fi-header-heading { font-size: 1.5rem; }

    .vc-hero { padding: 1.25rem; }

    .vc-hero-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .vc-hero-art {
        width: 100%;
        max-width: 190px;
        margin-inline: auto;
    }

    .vc-hero-title { font-size: 1.375rem; }

    .vc-cta {
        width: 100%;
        justify-content: center;
    }

    .vc-notice {
        flex-direction: column;
        align-items: flex-start;
    }

    .vc-steps { grid-template-columns: 1fr; }

    .vc-list-row {
        flex-wrap: wrap;
    }

    .vc-thumb {
        width: 4rem;
        height: 3rem;
    }
}

/* --------------------------------------------------------------------------
   14. Galería del evento en cuadrícula
   Filepond en modo grid necesita que le demos el ancho de cada miniatura;
   sin esta regla las fotos se apilan a lo ancho del formulario.
   -------------------------------------------------------------------------- */
.vc-upload-grid .filepond--item {
    width: calc(50% - 0.5em);
}

@media (min-width: 768px) {
    .vc-upload-grid .filepond--item {
        width: calc(33.333% - 0.5em);
    }
}

.vc-upload-grid .filepond--item-panel {
    border-radius: 10px;
}

/* --------------------------------------------------------------------------
   17. Barra de guardado pegada (formularios largos)
   Filament la activa con areFormActionsSticky(); aquí solo la vestimos y la
   levantamos por encima de la barra inferior móvil, que si no la tapaba.
   -------------------------------------------------------------------------- */

.fi-form-actions.fi-sticky {
    background-color: rgba(255, 255, 255, .94) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--vc-line);
    border-radius: var(--vc-r-md);
    box-shadow: 0 -12px 32px -18px rgba(16, 24, 40, .45), var(--vc-shadow-sm);
}

@media (max-width: 1023px) {
    .fi-form-actions.fi-sticky {
        /* .vc-tabbar mide ~3.75rem y vive en z-index 30 */
        bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 31;
        margin-inline: 0 !important;
        border-radius: var(--vc-r-md) !important;
    }
}