/* =========================================
   CLASE BASE (Responsive / Mobile-First)
   ========================================= */
.btn-android {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Panton', sans-serif;
    font-weight: 700;
    
    /* FORMA BÁSICA */
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
    
    /* COMPORTAMIENTO */
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.05s cubic-bezier(0.4, 0, 0.2, 1), 
                background 0.05s ease;

    /* TAMAÑOS PARA MÓVIL (Por defecto) */
    font-size: 0.9rem;      /* Texto más pequeño */
    padding: 8px 16px;      /* Menos relleno */
    min-height: 40px;       /* Altura mínima más compacta */
    gap: 6px;               /* Menos espacio entre icono y texto */
}

.btn-android-np{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Panton', sans-serif;
    font-weight: 700;
    
    /* FORMA BÁSICA */
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;

    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.05s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.05s cubic-bezier(0.4, 0, 0.2, 1), 
                background 0.05s ease;

    padding: 4px 8px;
}
/* Control automático del tamaño de los iconos (SVG) en MÓVIL */
.btn-android svg {
    width: 24px;
    height: auto;
    transition: width 0.2s, height 0.2s;
}

/* =========================================
   MODIFICADORES DE TAMAÑO (MÓVIL)
   ========================================= */
.btn-fab {
    padding: 0 !important;
    width: 48px;          /* Círculo más pequeño en móvil */
    height: 48px;
    border-radius: 50%;
}

.btn-large {
    font-size: 1.2rem;
    padding: 12px 12px;
    width: 100%;
}

.btn-large svg {
    width: 24px;
    height: 24px;
}

/* =========================================
   MEDIA QUERIES (TABLET Y ESCRITORIO)
   ========================================= */
@media (min-width: 768px) {
    /* El botón normal crece */
    .btn-android {
        font-size: 1.2rem;
        padding: 12px 24px;
        min-height: 48px;
        gap: 8px;
    }

    /* El icono normal crece */
    .btn-android svg {
        width: 24px;
        height: 24px;
    }

    /* El botón FAB (Redondo) crece */
    .btn-fab {
        width: 64px;
        height: 64px;
    }
    
    /* El icono del FAB crece */
    .btn-fab svg {
        width: 32px;
        height: 32px;
    }

    /* El botón grande (Ej: JUGAR) crece */
    .btn-large {
        font-size: 1.8rem;
        padding: 16px 32px;
    }

    /* El icono del botón grande crece */
    .btn-large svg {
        width: 32px;
        height: 32px;
    }
}

/* =========================================
   BOTÓN VERDE (Extraído de tus XML)
   ========================================= */
.btn-verde {
    background: #22c55e;
    border-color: #16a34a;
    color: #ffffff;
    /* La sombra simula la capa bottom="4dp" de color #15803d */
    box-shadow: 0 4px 0 #15803d; 
}

/* Estado Pressed: El XML dice que baja a bottom="2dp" y cambia a color sólido #16a34a */
.btn-verde:active {
    background: #16a34a;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #15803d;
}


/* =========================================
   BOTÓN DORADO (Extraído de tus XML)
   ========================================= */
.btn-dorado {
    background: linear-gradient(135deg, #fbbe4c 0%, #f8a72b 100%);
    border-color: #e5a32a;
    color: #000000;
    /* Capa inferior de 4dp */
    box-shadow: 0 4px 0 #c88a1e; 
}

/* Estado Pressed: Tu XML de pressed elimina la capa inferior y oscurece el gradiente */
.btn-dorado:active {
    background: linear-gradient(135deg, #E09000 0%, #AB6600 100%);
    transform: translateY(4px); /* Baja los 4px completos */
    box-shadow: 0 0px 0 transparent; /* Desaparece la sombra */
}


/* =========================================
   BOTÓN ROJO (Extraído de tus XML)
   ========================================= */
.btn-rojo {
    background: linear-gradient(135deg, #D9371B 0%, #C54540 100%);
    border-color: #B42E1E;
    color: #ffffff;
    /* Capa inferior de 4dp */
    box-shadow: 0 4px 0 #7E0F00;
}

/* Estado Pressed (Comportamiento heredado para que se sienta igual) */
.btn-rojo:active {
    background: linear-gradient(135deg, #B42E1E 0%, #902316 100%);
    transform: translateY(4px);
    box-shadow: 0 0px 0 transparent;
}

.btn-rojo {
    background: linear-gradient(135deg, #D9371B 0%, #C54540 100%);
    border-color: #B42E1E;
    color: #ffffff;
    /* Capa inferior de 4dp */
    box-shadow: 0 4px 0 #7E0F00;
}

/* Estado Pressed (Comportamiento heredado para que se sienta igual) */
.btn-rojo:active {
    background: linear-gradient(135deg, #B42E1E 0%, #902316 100%);
    transform: translateY(4px);
    box-shadow: 0 0px 0 transparent;
}

/* =========================================
   BOTÓN MORADO (button_purple)
   ========================================= */
.btn-morado {
    /* Degradado del XML normal: de #9A1CF2 a #BD65FA */
    background: linear-gradient(135deg, #9A1CF2 0%, #BD65FA 100%);
    
    /* Borde 1dp -> #AA2AE5 */
    border-color: #AA2AE5;
    
    color: #ffffff;
    
    /* Capa inferior de 4dp -> #7C1EC8 */
    box-shadow: 0 4px 0 #7C1EC8; 
}

/* Estado Pressed (button_purple_pressed.xml) */
.btn-morado:active {
    /* Degradado del XML presionado: de #A300EF a #690099 */
    background: linear-gradient(135deg, #A300EF 0%, #690099 100%);
    
    /* Borde cambia ligeramente al presionar -> #882AE5 */
    border-color: #882AE5;
    
    transform: translateY(4px); /* Baja los 4px */
    box-shadow: 0 0px 0 transparent; /* Desaparece la sombra */
}


/* =========================================
   BOTÓN AZUL (Extraído de tus XML)
   ========================================= */
.btn-azul {
    background: linear-gradient(135deg, #046D87 0%, #0891b2 100%);
    border-color: #02647C;
    color: #ffffff;
    /* Capa inferior de 4dp color #014150 */
    box-shadow: 0 4px 0 #014150; 
}

/* Estado Pressed (Extraído de button_blue_pressed.xml) */
.btn-azul:active {
    background: linear-gradient(135deg, #003240 0%, #02647C 100%);
    border-color: #02657C;
    transform: translateY(4px); /* Baja los 4px */
    box-shadow: 0 0px 0 transparent; /* Desaparece la sombra */
}


/* =========================================
   BOTÓN ROSA (button_pink)
   ========================================= */
.btn-rosa {
    /* Degradado del XML normal: de #C5017B a #EB3DA9 */
    background: linear-gradient(135deg, #C5017B 0%, #EB3DA9 100%);
    
    /* Borde 1dp -> #FF58BC */
    border-color: #FF58BC;
    
    color: #ffffff;
    
    /* Capa inferior de 4dp -> #76044B */
    box-shadow: 0 4px 0 #76044B; 
}

/* Estado Pressed (button_pink_pressed.xml) */
.btn-rosa:active {
    /* Degradado del XML presionado: de #AD2277 a #890156 */
    background: linear-gradient(135deg, #AD2277 0%, #890156 100%);
    
    transform: translateY(4px); /* Baja los 4px */
    box-shadow: 0 0px 0 transparent; /* Desaparece la sombra */
}


/* =========================================
   BOTÓN OSCURO / NEGRO (brand_dark)
   ========================================= */
.btn-oscuro {
    /* Fondo principal -> @color/brand_dark_button */
    background: #2a2a2a; 
    
    /* Borde 1dp -> @color/brand_dark_stroke */
    border-color: #404040; 
    
    color: #ffffff;
    
    /* Capa inferior de 4dp -> @color/brand_dark_shape */
    box-shadow: 0 4px 0 #000000; 
}

/* Estado Pressed (button_brand_dark_pressed.xml) */
.btn-oscuro:active {
    /* Degradado al presionar -> De @color/brand_dark_shape a @color/brand_dark_shape_f */
    background: linear-gradient(135deg, #000000 0%, #171717 100%);
    transform: translateY(4px); /* Baja los 4px */
    box-shadow: 0 0px 0 transparent; /* Desaparece la sombra */
}

/* =========================================
   BOTÓN BLANCO (brand_white)
   ========================================= */
.btn-blanco {
    /* Fondo principal -> @color/brand_white_button */
    background: #ffffff; 
    
    /* Borde 1dp -> @color/brand_white_stroke */
    border-color: #e5e7eb; 
    
    /* El texto debe ser oscuro para que se lea sobre el fondo blanco */
    color: #1f2937; 
    
    /* Capa inferior de 4dp -> @color/brand_white_shape */
    box-shadow: 0 4px 0 #d1d5db; 
}

/* Estado Pressed (button_brand_white_pressed.xml) */
.btn-blanco:active {
    /* Degradado al presionar -> De @color/brand_white_shape a @color/brand_white_shape_f */
    background: linear-gradient(135deg, #d1d5db 0%, #9ca3af 100%);
    transform: translateY(4px); /* Baja los 4px */
    box-shadow: 0 0px 0 transparent; /* Desaparece la sombra */
}

/* =========================================
   BOTÓN DESHABILITADO (Extraído de tus XML)
   ========================================= */
/* Usamos el seudoclass :disabled (para <button>) y una clase .btn-disabled (para enlaces <a>) */
.btn-android:disabled,
.btn-disabled {
    background: linear-gradient(135deg, #8E8E8E 0%, #BDBDBD 100%);
    border-color: #AFAFAF;
    color: #ffffff; /* Ajusta el color del texto si lo prefieres más gris */
    /* Capa inferior de 4dp color #616161 */
    box-shadow: 0 4px 0 #616161; 
    
    /* Comportamiento inactivo */
    cursor: not-allowed !important;
    opacity: 0.9;
}

/* Forzamos a que el botón deshabilitado NO baje ni cambie al presionarlo */
.btn-android:disabled:active,
.btn-disabled:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 0 #616161 !important;
    pointer-events: none;
}

/* =========================================
   CONTENEDORES ESTILO BOTÓN (Diseño sin animación)
   ========================================= */
.contenedor-estilo-oscuro {
    /* Layout para agrupar elementos internos */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px; /* Un poco menos de padding que un botón normal para que los hijos quepan bien */
    
    /* Apariencia exacta del btn-oscuro */
    background: #2a2a2a; 
    border: 1px solid #404040; 
    border-radius: 12px;
    box-shadow: 0 4px 0 #000000; 
    color: #ffffff;
    
    /* Evita que cambie el cursor */
    cursor: default;
}