/* =============================================================
   RADICAL OS 3.0 // COMPONENTES COMPARTIDOS
   =============================================================
   Clases utilitarias que se usaban duplicadas en varias apps.
   Convención: prefijo `rad-` para evitar colisiones.

   Si necesitas un patrón visual nuevo Y se va a repetir en >=2
   apps, añádelo aquí en lugar de en `apps/<app>/style.css`.
   ============================================================= */

/* --- BOTÓN BRUTALISTA -------------------------------------- */
.rad-btn {
    font-family: var(--font-mono);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    background: var(--text-light);
    color: var(--text-dark);
    border: var(--border-thick);
    box-shadow: var(--shadow-hard);
    cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}

.rad-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--text-dark);
}

.rad-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--text-dark);
}

.rad-btn--primary {
    background: var(--radical-yellow);
}

.rad-btn--danger {
    background: var(--radical-red);
    color: var(--text-light);
}

/* --- HEADER NEGRO (sidebars, secciones) -------------------- */
.rad-section-header {
    background: var(--text-dark);
    color: var(--text-light);
    font-family: var(--font-mono);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 10px;
}

/* --- OVERLAY DE SCANLINES (uso: añadir a un contenedor) ---- */
.rad-scanlines {
    position: relative;
}

.rad-scanlines::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--scanline-overlay);
    pointer-events: none;
    z-index: 1;
}

/* --- TEXT GLOWS (efecto fósforo) --------------------------- */
.rad-glow-green { text-shadow: 0 0 15px rgba(10, 255, 10, 0.6); }
.rad-glow-yellow { text-shadow: 0 0 15px rgba(204, 255, 0, 0.6); }
.rad-glow-blue { text-shadow: 0 0 15px rgba(0, 26, 255, 0.6); }
.rad-glow-red { text-shadow: 0 0 15px rgba(255, 0, 0, 0.6); }