/* ============================================================================
   BYRO — Components v1.0
   ============================================================================
   Componentes base reutilizables. TODOS leen design-tokens.css.
   Cargar SIEMPRE después de design-tokens.css.
   Prefijo .byro-* para evitar colisiones.
   ============================================================================ */

/* ---- Botones ---- */
.byro-btn {
    font-family: var(--byro-font-sans);
    font-size: var(--byro-fs-base);
    font-weight: var(--byro-fw-medium);
    padding: 10px 18px;
    border-radius: var(--byro-r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--byro-t-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--byro-sp-2);
    line-height: 1;
}
.byro-btn:disabled { opacity: .4; cursor: not-allowed; }

.byro-btn--primary {
    background: linear-gradient(135deg, var(--byro-accent), var(--byro-accent-2));
    color: #fff;
    box-shadow: var(--byro-glow);
}
.byro-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }
.byro-btn--primary:active:not(:disabled) { filter: brightness(.95); }

.byro-btn--secondary {
    background: var(--byro-surface-3);
    color: var(--byro-text);
    border-color: var(--byro-border-strong);
}
.byro-btn--secondary:hover:not(:disabled) { background: var(--byro-border); }

.byro-btn--ghost { background: transparent; color: var(--byro-text-2); }
.byro-btn--ghost:hover:not(:disabled) { background: var(--byro-surface-2); color: var(--byro-text); }

.byro-btn--danger { background: var(--byro-danger); color: #fff; }
.byro-btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

.byro-btn--block { width: 100%; }

/* ---- Campos de formulario ---- */
.byro-field { display: flex; flex-direction: column; gap: var(--byro-sp-2); }
.byro-label { font-size: var(--byro-fs-sm); color: var(--byro-text-2); font-weight: var(--byro-fw-medium); }
.byro-input {
    background: var(--byro-bg-elev);
    border: 1px solid var(--byro-border-strong);
    border-radius: var(--byro-r-md);
    padding: 11px 13px;
    color: var(--byro-text);
    font-size: var(--byro-fs-base);
    font-family: var(--byro-font-sans);
    transition: var(--byro-t-base);
    width: 100%;
}
.byro-input::placeholder { color: var(--byro-text-disabled); }
.byro-input:focus {
    outline: none;
    border-color: var(--byro-accent);
    box-shadow: 0 0 0 3px rgba(var(--byro-accent-rgb), .18);
}
select.byro-input { cursor: pointer; }

/* ---- Tags / estados ---- */
.byro-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px; border-radius: var(--byro-r-full);
    font-size: var(--byro-fs-xs); font-weight: var(--byro-fw-medium);
}
.byro-tag .byro-tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.byro-tag--accent { background: var(--byro-info-bg);   color: var(--byro-accent-2); }
.byro-tag--ok     { background: var(--byro-ok-bg);     color: var(--byro-ok); }
.byro-tag--warn   { background: var(--byro-warn-bg);   color: var(--byro-warn); }
.byro-tag--danger { background: var(--byro-danger-bg); color: var(--byro-danger); }

/* ---- Card ---- */
.byro-card {
    background: var(--byro-surface);
    border: 1px solid var(--byro-border);
    border-radius: var(--byro-r-lg);
    padding: var(--byro-sp-5);
}

/* ---- Alertas ---- */
.byro-alert {
    display: flex; gap: var(--byro-sp-3);
    padding: var(--byro-sp-4);
    border-radius: var(--byro-r-md);
    font-size: var(--byro-fs-base);
    border: 1px solid;
}
.byro-alert--ok     { background: var(--byro-ok-bg);     border-color: rgba(52,211,153,.3);  color: var(--byro-ok); }
.byro-alert--warn   { background: var(--byro-warn-bg);   border-color: rgba(251,191,36,.3);  color: var(--byro-warn); }
.byro-alert--danger { background: var(--byro-danger-bg); border-color: rgba(248,113,113,.3); color: var(--byro-danger); }

/* ---- Skeleton (loading) ---- */
.byro-skeleton {
    background: linear-gradient(90deg, var(--byro-surface-2) 25%, var(--byro-surface-3) 50%, var(--byro-surface-2) 75%);
    background-size: 200% 100%;
    animation: byro-shimmer 1.4s infinite;
    border-radius: var(--byro-r-sm);
}
@keyframes byro-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}