/**
 * Paper Mario 3D Buttons - Custom CSS Override
 * Restaura efecto 'pulsable y casi agradable al tacto'
 * Basado en papermario.css
 */

/* ============================================
   PAPER MARIO 3D BUTTONS
   Efecto: Botón levantado (border-bottom + sombra)
   Hover: Botón se hunde (sombra se reduce)
   Active: Botón se levanta
============================================ */

.pm-btn {
    /* Base: Botón 3D de Paper Mario */
    background: var(--pm-primary);
    color: var(--pm-paper);
    border: 3px solid var(--pm-primary-dark);
    border-radius: var(--pm-radius-sm);
    padding: var(--pm-space-sm) var(--pm-space);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: var(--pm-transition-bounce);
    font-family: 'Fredoka', 'Nunito', sans-serif;
    box-shadow: 0 4px 0 var(--pm-primary-shadow);
    transform: translateY(0);
    display: inline-block;
    text-align: center;
    border-bottom: 4px solid var(--pm-primary-shadow);
}

/* Hover: Botón se hunde */
.pm-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--pm-primary-shadow);
    border-bottom: 2px solid var(--pm-primary-shadow);
}

/* Active: Botón se levanta */
.pm-btn:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 var(--pm-primary-shadow);
    border-bottom: 0px solid var(--pm-primary-shadow);
}

/* ============================================
   VARIANTES DE COLOR
============================================ */

/* Yellow (accent) */
.pm-btn-yellow {
    background: var(--pm-accent-yellow);
    border: 3px solid #B8860B;
    box-shadow: 0 4px 0 #8B4513;
    border-bottom: 4px solid #8B4513;
}

.pm-btn-yellow:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8B4513;
    border-bottom: 2px solid #8B4513;
}

.pm-btn-yellow:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 #8B4513;
    border-bottom: 0px solid #8B4513;
}

/* Secondary (blue) */
.pm-btn-secondary {
    background: var(--pm-secondary);
    border: 3px solid var(--pm-secondary-dark);
    box-shadow: 0 4px 0 var(--pm-secondary-shadow);
    border-bottom: 4px solid var(--pm-secondary-shadow);
}

.pm-btn-secondary:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--pm-secondary-shadow);
    border-bottom: 2px solid var(--pm-secondary-shadow);
}

.pm-btn-secondary:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 var(--pm-secondary-shadow);
    border-bottom: 0px solid var(--pm-secondary-shadow);
}

/* Small buttons */
.pm-btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
    box-shadow: 0 2px 0 var(--pm-primary-shadow);
    border-bottom: 2px solid var(--pm-primary-shadow);
}

.pm-btn-small:hover {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--pm-primary-shadow);
    border-bottom: 1px solid var(--pm-primary-shadow);
}

.pm-btn-small:active {
    transform: translateY(2px);
    box-shadow: 0 0px 0 var(--pm-primary-shadow);
    border-bottom: 0px solid var(--pm-primary-shadow);
}

/* ============================================
   PAPER MARIO CARDS
   Efecto: Bordes definidos, sombras suaves
============================================ */

.pm-card {
    background: var(--pm-paper);
    border: 3px solid var(--pm-primary-dark);
    border-radius: var(--pm-radius);
    padding: var(--pm-space-md);
    box-shadow: var(--pm-shadow);
    transition: var(--pm-transition);
}

.pm-card:hover {
    box-shadow: var(--pm-shadow-heavy);
    transform: translateY(-2px);
}

/* ============================================
   PAPER MARIO TITLES
   Fuente: Fredoka (redonda y amigable)
============================================ */

.pm-title {
    font-family: 'Fredoka', 'Nunito', sans-serif;
    color: var(--pm-primary-dark);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
    letter-spacing: 0.5px;
}

/* ============================================
   PAPER MARIO BADGES
   Efecto: Pequeños, redondeados, coloridos
============================================ */

.pm-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--pm-radius-sm);
    font-weight: 700;
    font-size: 0.85rem;
    border: 2px solid rgba(0,0,0,0.2);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
}

.pm-badge-primary {
    background: var(--pm-primary);
    color: var(--pm-paper);
}

.pm-badge-secondary {
    background: var(--pm-secondary);
    color: var(--pm-paper);
}

.pm-badge-green {
    background: var(--pm-accent-green);
    color: var(--pm-paper);
}

/* ============================================
   PAPER MARIO FLEX UTILS
============================================ */

.pm-flex {
    display: flex;
}

.pm-justify-center {
    justify-content: center;
}

.pm-flex-wrap {
    flex-wrap: wrap;
    gap: 8px;
}

/* ============================================
   PAPER MARIO SPACING
============================================ */

.pm-mt-lg {
    margin-top: var(--pm-space-lg);
}

/* ============================================
   LIKE BUTTON ESPECÍFICO
   Efecto: "🔍 ¡Interesante!" muy pulsable
============================================ */

.like-button {
    background: var(--pm-accent-yellow);
    border: 3px solid #B8860B;
    box-shadow: 0 4px 0 #8B4513;
    border-bottom: 4px solid #8B4513;
    color: #FFF;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--pm-radius-sm);
    cursor: pointer;
    transition: var(--pm-transition-bounce);
}

.like-button:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #8B4513;
    border-bottom: 2px solid #8B4513;
    background: #FFB84D;
}

.like-button:active {
    transform: translateY(4px);
    box-shadow: 0 0px 0 #8B4513;
    border-bottom: 0px solid #8B4513;
    background: #FFA500;
}

/* ============================================
   BACKGROUND OVERRIDE
   Asegurar fondo Paper Mario
============================================ */

body {
    background: var(--pm-paper) !important;
}

html, body {
    background: var(--pm-paper) !important;
}

/* ============================================
   COLOR OVERRIDE
   Usar variables Paper Mario en lugar de las normales
============================================ */

.container {
    background: var(--pm-paper);
}

/* Sobrescribir colores intensos con colores pálidos */
:root {
    --bg-color: var(--pm-paper) !important;
    --text-color: var(--pm-text) !important;
    --accent-color: var(--pm-primary) !important;
    --accent-hover: var(--pm-primary-light) !important;
}