/* =========================================================================
 * WSSF · Componentes base
 * Botones, inputs, cards, badges, chips, alerts, skeletons.
 *
 * Filosofía: clase base `.wssf-<componente>` + variantes con `--<modifier>`.
 * Ej: <button class="wssf-btn wssf-btn--primary wssf-btn--lg">
 * ========================================================================= */

/* =========================================================================
 * BUTTONS
 * ========================================================================= */

/* Reset agresivo de botones — hereda la paleta WSSF, sobrescribe Elementor/WC */
.wssf-btn,
button.wssf-btn,
a.wssf-btn,
input.wssf-btn {
    --btn-bg:        var(--sf-primary-500);
    --btn-bg-hover:  var(--sf-primary-600);
    --btn-color:     var(--sf-text-invert);
    --btn-border:    transparent;
    --btn-pad-y:     var(--sf-space-3);
    --btn-pad-x:     var(--sf-space-5);
    --btn-fs:        var(--sf-text-base);
    --btn-radius:    var(--sf-radius-sm);
    --btn-fw:        var(--sf-fw-semibold);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    min-height: var(--sf-touch-target);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    font-size: var(--btn-fs);
    font-weight: var(--btn-fw);
    font-family: var(--sf-font-sans);
    line-height: 1;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    user-select: none;
    transition:
        background var(--sf-duration-fast) var(--sf-ease),
        color var(--sf-duration-fast) var(--sf-ease),
        border-color var(--sf-duration-fast) var(--sf-ease),
        transform var(--sf-duration-fast) var(--sf-ease);
}

.wssf-btn:hover:not(:disabled),
button.wssf-btn:hover:not(:disabled),
a.wssf-btn:hover:not(:disabled) {
    background: var(--btn-bg-hover);
    color: var(--btn-color);
    border-color: var(--btn-bg-hover);
}

.wssf-btn:active:not(:disabled) {
    transform: translateY(1px);
}

.wssf-btn:focus-visible {
    outline: 2px solid var(--sf-primary-500);
    outline-offset: 2px;
}

.wssf-btn:disabled,
.wssf-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variantes — todas en escala monocroma neutra (negro/gris/blanco) */
.wssf-btn--primary {
    --btn-bg:       #1A1A1A;
    --btn-bg-hover: #000000;
    --btn-color:    #FFFFFF;
    --btn-border:   #1A1A1A;
}

.wssf-btn--secondary {
    --btn-bg:       #FFFFFF;
    --btn-bg-hover: #F5F5F5;
    --btn-color:    #1A1A1A;
    --btn-border:   #D4D4D4;
}

.wssf-btn--ghost {
    --btn-bg:       transparent;
    --btn-bg-hover: #F5F5F5;
    --btn-color:    #1A1A1A;
    --btn-border:   transparent;
}

.wssf-btn--outline {
    --btn-bg:       transparent;
    --btn-bg-hover: #1A1A1A;
    --btn-color:    #1A1A1A;
    --btn-border:   #1A1A1A;
}

.wssf-btn--outline:hover:not(:disabled) {
    color: #FFFFFF;
}

.wssf-btn--danger {
    --btn-bg:       var(--sf-error);
    --btn-bg-hover: #A00000;
    --btn-color:    #FFFFFF;
    --btn-border:   var(--sf-error);
}

.wssf-btn--success {
    --btn-bg:       var(--sf-success);
    --btn-bg-hover: #186F30;
    --btn-color:    #FFFFFF;
    --btn-border:   var(--sf-success);
}

/* Reset de cualquier color heredado de Elementor/WC en botones nuestros */
.wssf-btn,
.wssf-btn::before,
.wssf-btn::after {
    --e-button-color:        inherit;
    --e-button-bg-color:     inherit;
    --e-button-border-color: inherit;
}

/* Tamaños */
.wssf-btn--sm  { --btn-pad-y: var(--sf-space-2); --btn-pad-x: var(--sf-space-3); --btn-fs: var(--sf-text-sm); min-height: 36px; }
.wssf-btn--lg  { --btn-pad-y: var(--sf-space-4); --btn-pad-x: var(--sf-space-6); --btn-fs: var(--sf-text-lg); }
.wssf-btn--xl  { --btn-pad-y: var(--sf-space-5); --btn-pad-x: var(--sf-space-8); --btn-fs: var(--sf-text-lg); min-height: 56px; }

.wssf-btn--block { display: flex; width: 100%; }

.wssf-btn--icon-only { padding: var(--btn-pad-y); aspect-ratio: 1; }

/* =========================================================================
 * INPUTS / FORM CONTROLS
 * ========================================================================= */

.wssf-field {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
}

.wssf-label {
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-fw-medium);
    color: var(--sf-text);
}

.wssf-label .wssf-required {
    color: var(--sf-error);
    margin-left: 2px;
}

.wssf-input,
.wssf-textarea,
.wssf-select {
    width: 100%;
    min-height: var(--sf-touch-target);
    padding: var(--sf-space-3) var(--sf-space-4);
    font-size: var(--sf-text-base);
    line-height: 1.4;
    color: var(--sf-text);
    background: var(--sf-card);
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius-sm);
    transition:
        border-color var(--sf-duration-fast) var(--sf-ease),
        box-shadow var(--sf-duration-fast) var(--sf-ease);
}

.wssf-input::placeholder,
.wssf-textarea::placeholder { color: var(--sf-text-subtle); }

.wssf-input:hover,
.wssf-textarea:hover,
.wssf-select:hover { border-color: var(--sf-text-subtle); }

.wssf-input:focus,
.wssf-textarea:focus,
.wssf-select:focus {
    outline: none;
    border-color: var(--sf-primary-500);
    box-shadow: var(--sf-focus-ring);
}

.wssf-input--error,
.wssf-textarea--error {
    border-color: var(--sf-error);
}

.wssf-textarea {
    min-height: 120px;
    resize: vertical;
}

.wssf-help {
    font-size: var(--sf-text-xs);
    color: var(--sf-text-muted);
}

.wssf-help--error { color: var(--sf-error); }

/* Checkbox / Radio personalizado simple */
.wssf-checkbox,
.wssf-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    cursor: pointer;
    user-select: none;
}

/* =========================================================================
 * CARDS
 * ========================================================================= */

.wssf-card {
    background: var(--sf-card);
    border: 1px solid var(--sf-border-soft);
    border-radius: var(--sf-radius-md);
    padding: var(--sf-space-5);
    box-shadow: var(--sf-shadow-sm);
    transition: box-shadow var(--sf-duration-normal) var(--sf-ease);
}

.wssf-card:hover { box-shadow: var(--sf-shadow-md); }

.wssf-card--flat   { box-shadow: none; }
.wssf-card--bordered { border: 1px solid var(--sf-border); box-shadow: none; }
.wssf-card--padded  { padding: var(--sf-space-8); }
.wssf-card--compact { padding: var(--sf-space-3); }

.wssf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-3);
    margin-bottom: var(--sf-space-4);
}

.wssf-card-title {
    font-size: var(--sf-text-lg);
    font-weight: var(--sf-fw-semibold);
    margin: 0;
}

/* =========================================================================
 * BADGES & CHIPS
 * ========================================================================= */

.wssf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    padding: var(--sf-space-1) var(--sf-space-2);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-fw-semibold);
    line-height: 1;
    border-radius: var(--sf-radius-pill);
    background: var(--sf-bg-alt);
    color: var(--sf-text);
}

.wssf-badge--success { background: var(--sf-success-bg); color: var(--sf-success); }
.wssf-badge--warning { background: var(--sf-warning-bg); color: var(--sf-warning); }
.wssf-badge--error   { background: var(--sf-error-bg);   color: var(--sf-error); }
.wssf-badge--info    { background: var(--sf-info-bg);    color: var(--sf-info); }
.wssf-badge--primary { background: var(--sf-primary-100); color: var(--sf-primary-800); }

/* Chips con paleta monocroma — Elementor ya no está, no se necesita !important */
.wssf-chip,
button.wssf-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-2);
    padding: var(--sf-space-2) var(--sf-space-4);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-fw-medium);
    font-family: var(--sf-font-sans);
    line-height: 1.2;
    background: #FFFFFF;
    color: #1A1A1A;
    border: 1px solid #D4D4D4;
    border-radius: var(--sf-radius-pill);
    cursor: pointer;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    text-shadow: none;
    transition: all var(--sf-duration-fast) var(--sf-ease);
}

.wssf-chip:hover:not([aria-pressed="true"]):not(.wssf-chip--active),
button.wssf-chip:hover:not([aria-pressed="true"]):not(.wssf-chip--active) {
    background: #F5F5F5;
    color: #1A1A1A;
    border-color: #1A1A1A;
}

.wssf-chip[aria-pressed="true"],
.wssf-chip.wssf-chip--active,
button.wssf-chip[aria-pressed="true"],
button.wssf-chip.wssf-chip--active {
    background: #1A1A1A;
    color: #FFFFFF;
    border-color: #1A1A1A;
}

.wssf-chip[aria-pressed="true"]:hover,
.wssf-chip.wssf-chip--active:hover {
    background: #000000;
    border-color: #000000;
    color: #FFFFFF;
}

/* =========================================================================
 * ALERTS / NOTICES
 * ========================================================================= */

.wssf-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--sf-space-3);
    padding: var(--sf-space-4);
    border-radius: var(--sf-radius-md);
    border-left: 3px solid currentColor;
    background: var(--sf-bg-alt);
    color: var(--sf-text);
}

.wssf-alert--success { background: var(--sf-success-bg); color: var(--sf-success); }
.wssf-alert--warning { background: var(--sf-warning-bg); color: var(--sf-warning); }
.wssf-alert--error   { background: var(--sf-error-bg);   color: var(--sf-error); }
.wssf-alert--info    { background: var(--sf-info-bg);    color: var(--sf-info); }

.wssf-alert-title {
    font-weight: var(--sf-fw-semibold);
    margin: 0 0 var(--sf-space-1);
}

.wssf-alert-body {
    color: var(--sf-text);
    font-size: var(--sf-text-sm);
}

/* =========================================================================
 * SKELETON LOADERS
 * ========================================================================= */

.wssf-skeleton {
    display: block;
    width: 100%;
    background: linear-gradient(
        90deg,
        var(--sf-bg-alt) 0%,
        var(--sf-border-soft) 50%,
        var(--sf-bg-alt) 100%
    );
    background-size: 200% 100%;
    animation: wssf-skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--sf-radius-sm);
}

@keyframes wssf-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.wssf-skeleton--text  { height: 1em; margin: 0.4em 0; }
.wssf-skeleton--title { height: 1.6em; width: 60%; margin: 0.4em 0; }
.wssf-skeleton--block { height: 120px; }

/* =========================================================================
 * STATS / BIG NUMBERS (estilo bento dashboard)
 * ========================================================================= */

.wssf-stat {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-1);
}

.wssf-stat-label {
    font-size: var(--sf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sf-text-muted);
    font-weight: var(--sf-fw-medium);
}

.wssf-stat-value {
    font-size: var(--sf-text-3xl);
    font-weight: var(--sf-fw-bold);
    line-height: 1;
    color: var(--sf-text);
    letter-spacing: -0.02em;
}

.wssf-stat-trend {
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-fw-medium);
}

.wssf-stat-trend--up   { color: var(--sf-success); }
.wssf-stat-trend--down { color: var(--sf-error); }

/* =========================================================================
 * UTILITY CLASSES (mínimo set, no sustituye Tailwind)
 * ========================================================================= */

.wssf-flex      { display: flex; }
.wssf-flex-col  { display: flex; flex-direction: column; }
.wssf-grid      { display: grid; }
.wssf-block     { display: block; }
.wssf-inline    { display: inline; }
.wssf-hidden    { display: none; }

.wssf-items-center  { align-items: center; }
.wssf-items-start   { align-items: flex-start; }
.wssf-items-end     { align-items: flex-end; }
.wssf-items-stretch { align-items: stretch; }

.wssf-justify-center  { justify-content: center; }
.wssf-justify-start   { justify-content: flex-start; }
.wssf-justify-end     { justify-content: flex-end; }
.wssf-justify-between { justify-content: space-between; }

.wssf-gap-1 { gap: var(--sf-space-1); }
.wssf-gap-2 { gap: var(--sf-space-2); }
.wssf-gap-3 { gap: var(--sf-space-3); }
.wssf-gap-4 { gap: var(--sf-space-4); }
.wssf-gap-6 { gap: var(--sf-space-6); }
.wssf-gap-8 { gap: var(--sf-space-8); }

.wssf-w-full  { width: 100%; }
.wssf-h-full  { height: 100%; }

@media (max-width: 767px) {
    .wssf-hidden-mobile  { display: none !important; }
}
@media (min-width: 768px) {
    .wssf-hidden-desktop { display: none !important; }
}